ListBox ScrollBar上有不同的線條顏色

Question

我想自定義我的ListBox vertical ScrollBar以顯示當前所選項目位置與藍色標記，就像我們在VS編輯器中一樣，並且還希望在vertical scrollbar線上show background color of listboxitem 。

我怎樣才能做到這一點？

Answer 1

這是您的自定義ScrollViewer：

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


}

使用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>

這是ScrollViewer使用的自定義ScrollBar：

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);
        }
    }
}

還有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>

以下是使用此控件的Windows：

<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

正如bidy所說，重新模仿ScrollBar進行自定義。 以下是自定義滾動條的一個很好的示例，其中概述了主要組件等： http ： //www.codeproject.com/Articles/85896/WPF-Customize-your-Application-with-Styles-and-C