继续聊WPF——自定义滚动条

 

关键点：Track控件没有默认模板，它包括三个部分

DecreaseRepeatButton——这是一个RepeatButton即滑块左（上）的部分；

IncreaseRepeatButton——同上，即滑块右（下）部分；

Thumb——很明显了，这是拖动的滑块，请参考前面的文章。

 

 

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <ControlTemplate x:Key="myThumb" TargetType="{x:Type Thumb}">
            <Border Name="bd" BorderThickness="0.8" CornerRadius="2"
                    Height="{TemplateBinding Height}"
                    Width="{TemplateBinding Width}"
                    Margin="0,1,0,1">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#112299" Offset="0"/>
                        <GradientStop Color="#3522AA" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.Setters>
                        <Setter TargetName="bd" Property="BorderBrush" Value="#66BBEE"/>
                    </Trigger.Setters>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="myRepBt" TargetType="{x:Type RepeatButton}">
            <Border Margin="0,2,0,2"
                       BorderThickness="0.7"
                    BorderBrush="#BBBBBB">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="LightGray" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </ControlTemplate>
        <ControlTemplate x:Key="rbtForScrollBar" TargetType="{x:Type RepeatButton}">
            <Border CornerRadius="2"
                    Margin="0,1,0,1">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Yellow" Offset="0"/>
                        <GradientStop Color="Orange" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <Path VerticalAlignment="Center" HorizontalAlignment="Center"
                      Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}"
                      Fill="Black"/>
            </Border>
        </ControlTemplate>
        <ControlTemplate x:Key="ScrollTmp" TargetType="{x:Type ScrollBar}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="20"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition MaxWidth="20"/>
                </Grid.ColumnDefinitions>
                <Border Grid.ColumnSpan="3" />
                <RepeatButton Template="{StaticResource rbtForScrollBar}" Grid.Column="0"
                                  Margin="0,1,0,1"
                                  Command="ScrollBar.LineLeftCommand"
                                  Content="M0,4 L4,8 L4,0 Z"/>
                <Track Grid.Column="1" Name="PART_Track"
                       Maximum="{TemplateBinding Maximum}"
                       Minimum="{TemplateBinding Minimum}"
                       Value="{TemplateBinding Value}">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Template="{StaticResource myRepBt}"
                                      Command="ScrollBar.PageLeftCommand"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Template="{StaticResource myRepBt}"
                                      Command="ScrollBar.PageRightCommand"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Width="auto" Template="{StaticResource myThumb}"/>
                    </Track.Thumb>
                </Track>
                <RepeatButton Template="{StaticResource rbtForScrollBar}" Grid.Column="3"
                                  Margin="0,1,0,1"
                                  Command="ScrollBar.LineRightCommand"
                                  Content="M0,0 L0,8 4,4 Z"/>
            </Grid>
        </ControlTemplate>
    </Window.Resources>

    <Canvas Margin="10,10,10,10">
        <ScrollBar Canvas.Left="5" Canvas.Top="5" Width="260" Height="28"
                   Template="{StaticResource ScrollTmp}"
                   Orientation="Horizontal" Maximum="5" Minimum="0"/>
    </Canvas>
</Window>