ScrollBar模板定义

1）先在xaml放几个标签，效果图如下。

 <Grid Background="LightBlue">

        <Border BorderBrush="DarkBlue" BorderThickness="1" Width="200" Height="150">

            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

             StackPanel Width="400" Height="500">

                    <StackPanel.Background>

                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                            <GradientStop Color="LightGreen" Offset="0" />

                            <GradientStop Color="LightBlue" Offset="0.3" />

                            <GradientStop Color="LightYellow" Offset="0.6" />

                            <GradientStop Color="Black" Offset="1" />

                        </LinearGradientBrush>

                    </StackPanel.Background>

                </StackPanel>

            </ScrollViewer>

        </Border>

    </Grid>   

 

2）现在开始定义ScrollBar的模板，ScrollBar主要由上下（或者左右）的两个RepeatButton和中间的Track三个控件组成，其中Track里面也是有三个东西，IncreaseRepeatButton、DecreaseRepeatButton、Thumb（滑块）。

3）定义ScrollBar模板的时候，Track里面的IncreaseRepeatButton和DecreaseRepeatButton只要透明处理就行了。

        <Style x:Key="ScrollBarRepeatButtonStyle" TargetType="{x:Type RepeatButton}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Rectangle Fill="Transparent" />

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

4）上下（或者左右）的两个RepeatButton先不写，空着

<Style x:Key="UpRepeatButtonStyle" TargetType="{x:Type RepeatButton}"></Style>

 <Style x:Key="DownRepeatButtonStyle" TargetType="{x:Type RepeatButton}"></Style>

5）定义Thumb的模板，为了方便颜色的变换。这里定义多两个画笔资源，ThumbBorderBrush和ThumbFillBrush，表示滑块的边框和填充色。

        <SolidColorBrush x:Key="ThumbBorderBrush" Color="#FFFFFFFF" />

        <SolidColorBrush x:Key="ThumbFillBrush" Color="#FF414C6F" />

        <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Grid Margin="0">

                            <Rectangle RadiusX="2" RadiusY="2" Stroke="{StaticResource ThumbBorderBrush}" Fill="{StaticResource ThumbFillBrush}"></Rectangle>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

6）现在四个RepeatButton和Thumb都定义好了模板，接着把它们应用在ScrollBar里面。开始定义ScrollBar的模板

<Style TargetType="{x:Type ScrollBar}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate  TargetType="{x:Type ScrollBar}">

                        <Grid x:Name="GridRoot" Width="10">  

                            <Grid.RowDefinitions>

                                <RowDefinition Height="10" />

                                <RowDefinition Height="*" />

                                <RowDefinition Height="10" />

                            </Grid.RowDefinitions>

                            <RepeatButton Grid.Row="0"  Style="{StaticResource DownRepeatButtonStyle}"/>

                            <RepeatButton Grid.Row="2"  Style="{StaticResource UpRepeatButtonStyle}"/>

                            <Track x:Name="PART_Track" Grid.Row="1" >

                                <Track.IncreaseRepeatButton>

                                    <RepeatButton Style="{StaticResource ScrollBarRepeatButtonStyle}"/>

                                </Track.IncreaseRepeatButton>

                                <Track.Thumb>

                                    <Thumb Width="10" Style="{StaticResource ThumbStyle}"/>

                                </Track.Thumb>

                                <Track.DecreaseRepeatButton>

                                    <RepeatButton Style="{StaticResource ScrollBarRepeatButtonStyle}"/>

                                </Track.DecreaseRepeatButton>

                            </Track>

                        </Grid>                       

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

7）现在的效果如下

8）现在有几个问题，①滑块的位置不对 ②垂直的ScrollBar应用到了模板，水平的则没有应用到。

针对这两个问题，①为Track添加IsDirectionReversed="True"，这个属性的意思是“是否方向相反”。②为ScrollBar模板添加属性触发器，让ScrollBar在Orientation=“Horizontal”的时候，把模板旋转-90°。

    <ControlTemplate.Triggers>

        <Trigger Property="Orientation" Value="Horizontal">

            <Setter Property="LayoutTransform" TargetName="GridRoot">

                <Setter.Value>

                    <RotateTransform Angle="-90"></RotateTransform>

                </Setter.Value>

            </Setter>

        </Trigger>

    </ControlTemplate.Triggers>

9）现在效果如下:

 

10）<Track x:Name=“PART_Track”></Track>添加Orientation="Vertical" ，为啥要加这个属性，挺难表达的，反正水平的ScrollBar在旋转前，就是依靠左右拖动来是实现页面滚动的，因此旋转后还是保持这个样子，加了属性后，就行了。效果如下:

11）定义上下（或者左右）的两个RepeatButton,这里定义多两个画笔资源，RepeatBottonFillBrush和RepeatButtonBorderBrush，表示边框和填充色。

        <SolidColorBrush x:Key="RepeatBottonFillBrush" Color="#FF414C6F" />

        <SolidColorBrush x:Key="RepeatButtonBorderBrush" Color="#FFFFFFFF" />

        <Style x:Key="UpRepeatButtonStyle" TargetType="{x:Type RepeatButton}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Path Data="M0,0 L 10,0 5,10 z" Fill="{StaticResource RepeatBottonFillBrush}" Stroke="{StaticResource RepeatButtonBorderBrush}" Stretch="Fill" Margin="1"/>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="DownRepeatButtonStyle" TargetType="{x:Type RepeatButton}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Path Data="M5,0 L 10,10 0,10 z" Fill="{StaticResource RepeatBottonFillBrush}" Stroke="{StaticResource RepeatButtonBorderBrush}" Stretch="Fill" Margin="1"/>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

12）现在效果如下：

13）最后要做的，就是重写ScrollView的模板，把它的背景去掉了。