ListBox ScrollBar with different line colors on it

Question

I want to customize my ListBox vertical ScrollBar to show current selected item position with blue mark like we have in VS editor and also want to show background color of listboxitem on vertical scrollbar line.

How can I achieve this?

Answer 1

Here is your custom ScrollViewer:

public class MyScrollViewer : ScrollViewer
{
    static MyScrollViewer()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyScrollViewer), new FrameworkPropertyMetadata(typeof(MyScrollViewer)));
    }


}

with its XAML:

<Style TargetType="{x:Type local:MyScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyScrollViewer}">
                <Grid>
                    <ScrollContentPresenter />
                    <local:MyScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Value="{TemplateBinding HorizontalOffset}"
                             Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" 
                             Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And here is the custom ScrollBar used by the ScrollViewer:

public class MyScrollBar : ScrollBar
{
    static MyScrollBar()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyScrollBar), new FrameworkPropertyMetadata(typeof(MyScrollBar)));
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var canvas = Template.FindName("PART_Canvas", this) as Canvas;

        if (canvas != null)
        {
            //draw something onto the canvas
            Line myLine = new Line();

            myLine.Stroke = System.Windows.Media.Brushes.Red;

            myLine.X1 = 100;
            myLine.X2 = 140;  
            myLine.Y1 = 200;
            myLine.Y2 = 200;

            myLine.StrokeThickness = 1;

            canvas.Children.Add(myLine);
        }
    }
}

Also with XAML:

<Style TargetType="{x:Type local:MyScrollBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyScrollBar}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MaxWidth="18"/>
                            <ColumnDefinition Width="0.00001*"/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.ColumnSpan="3" CornerRadius="2" Background="Transparent" />
                        <RepeatButton  Grid.Column="0" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
                        <Canvas x:Name="PART_Canvas" Grid.Column="1" />
                        <RepeatButton Grid.Column="2"  Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And here is the Windows using this control:

<Window x:Class="VSScroller.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:VSScroller"
    Title="MainWindow" Height="350" Width="525">

<Grid>
    <local:MyScrollViewer HorizontalScrollBarVisibility="Visible" Background="Yellow">
        <TextBlock>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <LineBreak/>
                   standard dummy text ever since the 1500s, when an unknown printer <LineBreak/>
            took a galley of type and scrambled it to make a <LineBreak/>
                   type specimen book. It has survived not only five centuries, <LineBreak/>
            but also the leap into electronic typesetting, remaining 
                   essentially unchanged. It was popularised in the 1960s with <LineBreak/>
            the release of Letraset sheets containing Lorem Ipsum passages, <LineBreak/>
                   and more recently with desktop publishing software like Aldus <LineBreak/>
            PageMaker including versions of Lorem Ipsum.</TextBlock>
    </local:MyScrollViewer>
</Grid>

Answer 2

As bidy said, retemplate the ScrollBar to customise. Here is a good example of custom scrollbar that outlines the main components etc: http://www.codeproject.com/Articles/85896/WPF-Customize-your-Application-with-Styles-and-C