通知公告
标准控件ScrollBar的资源样式
日期:2015-12-17  发布人:admin  浏览量:784

1.简介
  ScrollBar控件主要实现常用的滚动条功能,分为垂直和水平,这个控件的由三个部分组成:两个行滚动控件和一个Track控件,而Track控件分为三部分:Page1、Page2和Thumb(滑块),因此,ScrollBar的样式就是由这几个部分组成(当然可以少,布局可以根据情况定制),这里我们给出Windows下标准的滚动条样式风格布局。
而且ScrollBar是ScrollViewer(滚动视图)的必要组成部分。
2.属性
2.1    Orientation
  类型:Orientation;
  功能:滚动条方向;
  说明:滚动条通过此属性来定义垂直和水平,样式资源中通过此属性来定义垂直和水平方向的滚动样式资源。
3.事件
3.1ScrollEvent
  功能:滚动发生时触发此事件;
  说明:此事件是一个冒泡事件,会从当前控件向上依次触发,直到事件被处理或到达跟元素为止。
4.标准的资源样式
  下面是一个标准的ScrollBar样式定义:
    <?xml encoding="utf-8" ?>
<ResourceDictionary Author="汪荣(QQ:386666951)" >

    <SolidColorBrush x:Key="scrollbar_br_normal" Color="#3D3D3D" />
    <SolidColorBrush x:Key="scrollbar_br_hot" Color="#3D3D3D" />

    <!--水平滚动条样式风格定义-->
    <Style x:Key="ScrollBarLeftButton" TargetType="RepeatButton">
        <Setter Property="Background" Value="#808080" />
        <Setter Property="Width" Value="14" />
        <Setter Property="Height" Value="7" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Path Data="M 9 0 L 9 7 L 2 3.5 Z" Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarRightButton" TargetType="RepeatButton">
        <Setter Property="Background" Value="#808080" />
        <Setter Property="Width" Value="14" />
        <Setter Property="Height" Value="7" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Path Data="M 4 0 L 4 7 L 11 3.5 Z" Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="HorizontalScrollBarPageButton1" TargetType="RepeatButton">
        <Setter Property="Background" Value="888866FF" />
        <Setter Property="Template" Value="{VertPageButton}" />
    </Style>

    <Style x:Key="HorizontalScrollBarPageButton2" TargetType="RepeatButton">
        <Setter Property="Background" Value="#888866FF" />
        <Setter Property="Template" Value="{VertPageButton}" />
    </Style>
    
    <ControlTemplate x:Key="HorizontalScrollBarTemplate" TargetType="ScrollBar">
        <Border Background="{TemplateBinding Background}" >
            <Grid VerticalAlignment="Center" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="12"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition MinWidth="12"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <RepeatButton VerticalAlignment="Center" Command="{ScrollBar.LineLeftCommand}" Style="{ScrollBarLeftButton}" />
                <Track Name="PART_Track" Grid.Column="1" Orientation="{TemplateBinding Orientation}"
                       Minimum="{TemplateBinding Minimum}" Maximum="{TemplateBinding Maximum}"
                       Value="{TemplateBinding Value}" ViewportSize="{TemplateBinding ViewportSize}" >
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{ScrollBar.PageLeftCommand}" Style="{HorizontalScrollBarPageButton1}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{ScrollBar.PageRightCommand}" Style="{HorizontalScrollBarPageButton2}"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{HorizontalScrollBarThumb}" MinWidth="30" />
                    </Track.Thumb>
                </Track>
                <RepeatButton Grid.Column="2" VerticalAlignment="Center" Command="{ScrollBar.LineRightCommand}" Style="{ScrollBarRightButton}" />
            </Grid>
        </Border>
    </ControlTemplate>
    
    <!--垂直滚动条样式风格定义-->
    <Style x:Key="ScrollBarUpButton" TargetType="RepeatButton">
        <Setter Property="Background" Value="#808080" />
        <Setter Property="Width" Value="7" />
        <Setter Property="Height" Value="14" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Path Data="M 0 9 L 7 9 L 3.5 2 Z" Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarDownButton" TargetType="RepeatButton">
        <Setter Property="Background" Value="#808080" />
        <Setter Property="Width" Value="7" />
        <Setter Property="Height" Value="14" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Path Data="M 0 4 L 7 4 L 3.5 11 Z" Fill="{TemplateBinding Background}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="VerticalScrollBarPageButton1" TargetType="RepeatButton">
        <Setter Property="Background" Value="888866FF" />
        <Setter Property="Template" Value="{VertPageButton}" />
    </Style>

    <Style x:Key="VerticalScrollBarPageButton2" TargetType="RepeatButton">
        <Setter Property="Background" Value="#888866FF" />
        <Setter Property="Template" Value="{VertPageButton}" />
    </Style>
    
    <ControlTemplate x:Key="VerticalScrollBarTemplate" TargetType="ScrollBar">
        <Border Background="{TemplateBinding Background}" >
            <Grid HorizontalAlignment="Center" >
                <Grid.RowDefinitions>
                    <RowDefinition MaxHeight="8"/>
                    <RowDefinition MinHeight="12"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition MaxHeight="12"/>
                    <RowDefinition MaxHeight="8"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <RepeatButton Name="PART_Up" HorizontalAlignment="Center" Visibility="Visible" Grid.Row="1" 
                              Command="{ScrollBar.LineUpCommand}" Style="{ScrollBarUpButton}" />
                <Track Name="PART_Track" IsDirectionReversed="True" Grid.Row="2" Orientation="{TemplateBinding Orientation}"
                       Visibility="Visible" Minimum="{TemplateBinding Minimum}" Maximum="{TemplateBinding Maximum}"
                       Value="{TemplateBinding}" ViewportSize="{TemplateBinding}" >
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{ScrollBar.PageLeftCommand}" Style="{VerticalScrollBarPageButton1}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{ScrollBar.PageRightCommand}" Style="{VerticalScrollBarPageButton2}"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{VerticalScrollBarThumb}" MinHeight="30" />
                    </Track.Thumb>
                </Track>
                <RepeatButton Name="PART_Down" HorizontalAlignment="Center" Visibility="Visible" Grid.Row="3" 
                              Command="{ScrollBar.LineDownCommand}" Style="{ScrollBarDownButton}" />
            </Grid>
        </Border>
    </ControlTemplate>
    
    <Style TargetType="ScrollBar">
        <Setter Property="Background" Value="{StaticResource scrollbar_br_normal}" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical" >
                <Setter Property="Width" Value="15" />
                <Setter Property="Template" Value="{VerticalScrollBarTemplate}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Horizontal" >
                <Setter Property="Height" Value="15" />
                <Setter Property="Template" Value="{HorizontalScrollBarTemplate}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource scrollbar_br_hot}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

上一篇: 没有了 下一篇: 标准控件ComboBox的资源样式