Custom Simple Scrollbar linked to Listview

Question

The default scrollbar for a listview appears at the right. I designed a new style and would like it to appear separate from the listview control. What you see in the image is how I have it set up now using blend.

So how do I link the custom scroll bar to the listview? I'm using Blend 4.

Listview Image located here:

http://i141.photobucket.com/albums/r69/thebirdbath/scroll.jpg

Answer 1

Ok, pretty close. Its working but I've lost my column headers. Also I can't get the transparency in between the bar and the listview. Its like the bar is still attached and I want them to appear like they are separate. (See the link to my original image)

This has been very helpful. Almost there!

My code is below.

<ListView
                            AlternationCount="2"
                            Padding="0,0,10,0"
                            Shared:GridViewSort.AutoSort="True"
                            Shared:GridViewSort.ShowSortGlyph="True"
                            ItemsSource="{Binding Contents}" 
                            SelectionMode="Extended" 
                            Background="Transparent" 
                            Foreground="White" 
                            SelectionChanged="ListBoxSelectionChanged"
                            BorderThickness="0"

                            ItemContainerStyle="{DynamicResource ListViewItemStyle}" 
                            Style="{DynamicResource ListViewStyle1}" Margin="0" VerticalAlignment="Top">

                            <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Background="Transparent"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.Template>
        <ControlTemplate TargetType="{x:Type ListView}">
            <MS_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                <ScrollViewer Padding="{TemplateBinding Padding}"
                              Style="{DynamicResource ScrollViewerKey}"
                              FlowDirection="RightToLeft">
                    <ScrollViewer.Resources>
                        <Style TargetType="GridViewHeaderRowPresenter">
                            <Setter Property="FlowDirection" Value="LeftToRight"/>
                        </Style>
                    </ScrollViewer.Resources>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    FlowDirection="LeftToRight"/>
                </ScrollViewer>
            </MS_Themes:ListBoxChrome>
            <ControlTemplate.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListView.Template>

Answer 2

I'm not sure if you want to add your Style to the ScrollViewer inside the Template of the ListView or if you want to disable that ScrollViewer and place the ListView in a separate ScrollViewer.

To apply the Style to the ScrollViewer in the Template and place the ScrollBar to the left you can modify the default Template when using GridView. It will require a reference to PresentationFramework.Aero

• Set FlowDirection="RightToLeft" on the ScrollViewer to place it on the left side
• Set FlowDirection="LeftToRight" on the ItemsPresenter and GridViewHeaderRowPresenter since they will inherit RightToLeft otherwise
• To get the transparent space between the ScrollViewer and the content, set Background="Transparent" for the ListView and set the desired Background on the ItemsPanel instead
• Control the transparent space with Padding, e.g. Padding="0,0,10,0"

Looks like this

<ListView xmlns:MS_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
          Padding="0,0,10,0"
          Background="Transparent"
          BorderThickness="0"
          ScrollViewer.VerticalScrollBarVisibility="Visible">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Background="White"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.Template>
        <ControlTemplate TargetType="{x:Type ListView}">
            <MS_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                <ScrollViewer Padding="{TemplateBinding Padding}"
                              Style="{YourStyle...}"
                              FlowDirection="RightToLeft">
                    <ScrollViewer.Resources>
                        <Style TargetType="GridViewHeaderRowPresenter">
                            <Setter Property="FlowDirection" Value="LeftToRight"/>
                        </Style>
                    </ScrollViewer.Resources>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    FlowDirection="LeftToRight"/>
                </ScrollViewer>
            </MS_Themes:ListBoxChrome>
            <ControlTemplate.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListView.Template>
    <!--...-->
</ListView>