c# - 带有不同线条颜色的 ListBox ScrollBar

Question

我想自定义我的 ListBox vertical ScrollBar 以像我们在 VS 编辑器中那样用蓝色标记显示当前选定的项目位置，并且还想显示 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>