Wpf ScrollBar自定義樣式

 

Wpf的ScrollBar可以分為六個區域：A.背景、B.向上按鈕、C.向下的按鈕、D.Track里面向上的按鈕、E.Track里面向下的按鈕、F.Track的Thumb

詳情見下圖

 

下面通過一個例子來自定義ScrollBar的樣式

<Style x:Key="ScrollBar_style" TargetType="ScrollBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollBar">
                        <Grid Width="15">
                            <Border Width="13" HorizontalAlignment="Center" CornerRadius="5" Background="#33555555">
                            </Border>
                            <Track HorizontalAlignment="Center" Name="PART_Track" Width="{TemplateBinding Width}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}"
                                    Value="{TemplateBinding Value}"  IsDirectionReversed="true">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineUpCommand"  />
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineDownCommand" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource scroll_thumb_style}" >
                                         </Thumb>
                                    </Track.Thumb>
                          </Track>
                           
                        </Grid>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

這里用到了兩個其它的樣式，其中 scroll_background 定義Track.DecreaseRepeatButton 、 Track.IncreaseRepeatButton的背景

<ControlTemplate x:Key="scroll_background" TargetType="RepeatButton">
            <Border Background="Transparent">
            </Border>
        </ControlTemplate>

scroll_thumb_style定義Thumb的外觀

<Style x:Key="scroll_thumb_style" TargetType="Thumb">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Rectangle Width="13" Fill="#7D7D7D" RadiusX="5" RadiusY="5">
                        </Rectangle>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

這里的Thumb的Height是自動的大小，如果想自己設定Thumb的Height，直接設置時沒有效果的，必須要將Track的ViewportSize設置為NaN即 ViewportSize="NaN"

上面的例子中只定義了A，D-F區域，B、C即向上滑動和向下滑動的那妞被去掉，如果要加上，只需要在Grid里面添加上既可以了

<Grid.RowDefinitions>
                            <RowDefinition Height="15" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="15" />
                        </Grid.RowDefinitions>
                        <!--<Border Grid.RowSpan="3">
                            <Border.Background>
                                <ImageBrush ImageSource="/images/scroll_line_background.png" />
                            </Border.Background>
                        </Border>-->
                        <Border Grid.RowSpan="3">
                            <Border.Background>
                                <ImageBrush ImageSource="/images/scroll_background.png" />
                            </Border.Background>
                        </Border>
                        <RepeatButton Template="{StaticResource scroll_up}" Grid.Row="0" Command="ScrollBar.LineUpCommand" />
<RepeatButton Template="{StaticResource scroll_down}" Grid.Row="2" Command="ScrollBar.LineDownCommand" />

 

最終運行結果

 

 

本例的代碼

http://pan.baidu.com/s/1ntI3fXB