论坛 › 编程研究 › ScrollViewer自定义滚动条样式

billypon 发表于 2013-3-5 19:54:07

ScrollViewer自定义滚动条样式

这里有滚动条控件的结构：http://www.cnblogs.com/homezzm/archive/2010/01/25/1656041.html
这里有自动隐藏滚的代码：http://blog.csdn.net/qqamoon/article/details/7317891

billypon 发表于 2013-3-5 20:20:37

我也来发一个自己做的滚动条样式吧：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <SolidColorBrush x:Key="NormalBrush" Color="#BDD4DE" />
        <SolidColorBrush x:Key="GlyphBrush" Color="White" />

        <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                        <Setter.Value>
                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                        <Border Name="Border" Background="{StaticResource NormalBrush}">
                                                <Path HorizontalAlignment="Center"
                                                          VerticalAlignment="Center"
                                                          Fill="{StaticResource GlyphBrush}"
                                                          Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </Border>
                                        <ControlTemplate.Triggers>
                                                <Trigger Property="IsEnabled" Value="False">
                                                        <Setter Property="Foreground" Value="{StaticResource GlyphBrush}" />
                                                </Trigger>
                                        </ControlTemplate.Triggers>
                                </ControlTemplate>
                        </Setter.Value>
                </Setter>
        </Style>

        <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                        <Setter.Value>
                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                        <Border Background="Transparent" />
                                </ControlTemplate>
                        </Setter.Value>
                </Setter>
        </Style>

        <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                        <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Thumb}">
                                        <Border Background="{TemplateBinding Background}" />
                                </ControlTemplate>
                        </Setter.Value>
                </Setter>
        </Style>

        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                <Grid>
                        <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="16" />
                                <RowDefinition />
                                <RowDefinition MaxHeight="16" />
                        </Grid.RowDefinitions>
                        <RepeatButton Grid.Row="0"
                                                  Style="{StaticResource ScrollBarLineButton}"
                                                  Height="16"
                                                  Margin="0,1"
                                                  Command="ScrollBar.LineUpCommand"
                                                  Content="M 0 4 L 8 4 L 4 0 Z" />
                        <Grid Grid.Row="1" Background="#EEF3F6">
                                <Track Name="PART_Track" IsDirectionReversed="True">
                                        <Track.DecreaseRepeatButton>
                                                <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                                <Thumb Style="{StaticResource ScrollBarThumb}" Background="{StaticResource NormalBrush}" />
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                                <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
                                        </Track.IncreaseRepeatButton>
                                </Track>
                        </Grid>
                        <RepeatButton Grid.Row="2"
                                                  Style="{StaticResource ScrollBarLineButton}"
                                                  Height="16"
                                                  Margin="0,1"
                                                  Command="ScrollBar.LineDownCommand"
                                                  Content="M 0 0 L 4 4 L 8 0 Z" />
                </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
                <Grid>
                        <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="16" />
                                <ColumnDefinition />
                                <ColumnDefinition MaxWidth="16" />
                        </Grid.ColumnDefinitions>
                        <RepeatButton Grid.Column="0"
                                                  Style="{StaticResource ScrollBarLineButton}"
                                                  Width="16"
                                                  Margin="1,0"
                                                  Command="ScrollBar.LineLeftCommand"
                                                  Content="M 4 0 L 4 8 L 0 4 Z" />
                        <Grid Grid.Column="1" Background="#EEF3F6">
                                <Track Name="PART_Track" IsDirectionReversed="False">
                                        <Track.DecreaseRepeatButton>
                                                <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                                <Thumb Style="{StaticResource ScrollBarThumb}" Background="{StaticResource NormalBrush}" />
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                                <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
                                        </Track.IncreaseRepeatButton>
                                </Track>
                        </Grid>
                        <RepeatButton Grid.Column="2"
                                                  Style="{StaticResource ScrollBarLineButton}"
                                                  Width="16"
                                                  Margin="1,0"
                                                  Command="ScrollBar.LineRightCommand"
                                                  Content="M 0 0 L 4 4 L 0 8 Z" />
                </Grid>
        </ControlTemplate>
       
        <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Style.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="Width" Value="16" />
                                <Setter Property="Height" Value="Auto" />
                                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Horizontal">
                                <Setter Property="Width" Value="Auto" />
                                <Setter Property="Height" Value="16" />
                                <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                        </Trigger>
                </Style.Triggers>
        </Style>

        <Style x:Key="ScrollViewer" TargetType="{x:Type ScrollViewer}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="Template">
                        <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                                <Grid.ColumnDefinitions>
                                                        <ColumnDefinition />
                                                        <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Grid.RowDefinitions>
                                                        <RowDefinition />
                                                        <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <ScrollContentPresenter Margin="1" />
                                                <ScrollBar Name="PART_VerticalScrollBar"
                                                                   Grid.Column="1"
                                                                   Margin="0,0,1,0"
                                                                   Value="{TemplateBinding VerticalOffset}"
                                                                   Maximum="{TemplateBinding ScrollableHeight}"
                                                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                                                <ScrollBar Name="PART_HorizontalScrollBar"
                                                                   Orientation="Horizontal"
                                                                   Grid.Row="1"
                                                                   Grid.Column="0"
                                                                   Margin="0,0,0,1"
                                                                   Value="{TemplateBinding HorizontalOffset}"
                                                                   Maximum="{TemplateBinding ScrollableWidth}"
                                                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                                        </Grid>
                                </ControlTemplate>
                        </Setter.Value>
                </Setter>
        </Style>
</ResourceDictionary>
使用方法：引用资源后，把ScrollViewer的Style属性设置为Style="{StaticResource ScrollViewer}"

查看完整版本: ScrollViewer自定义滚动条样式