ScrollViewer结构介绍和ListBox自定义样式

最新推荐文章于 2024-09-02 22:18:00 发布
最新推荐文章于 2024-09-02 22:18:00 发布
阅读量414 收藏
点赞数
分类专栏： WPF 控件
原文链接：https://www.cnblogs.com/anding/p/4987426.html
版权

转自：https://www.cnblogs.com/anding/p/4987426.html

一．前言

　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。

本文主要内容：

  • ScrollViewer的样式拆解及基本样式定义；
  • ListBox集合控件的样式定义；  

二．ScrollViewer自定义样式

ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图：

　　如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图：

  • 1：向上滑动的按钮，用RepeatButton实现功能；
  • 2：上部分滑块，功能同1，也是一个RepeatButton来实现的；
  • 3：中间可拖动滑块，用一个Thumb来实现；
  • 4：下部分滑块，和5功能一样，向下滑动，用一个RepeatButton来实现；
  • 5：向下滑动的按钮，用RepeatButton实现功能；

　　上面实现的是一个标准的垂直滑动条ScrollBar组成，实际可用根据需求定制，实现不同效果的滑动效果。以上各部分的样式代码：  

复制代码 
    <sys:Double x:Key="ScrollBarSize">12</sys:Double>
    <!--滚动两边按钮样式-->
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Background" Value="Transparent"></Setter>
        <Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="Width" Value="auto"></Setter>
        <Setter Property="Height" Value="auto"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <TextBlock x:Name="FIcon" FontSize="12" Text="{TemplateBinding local:ControlAttachProperty.FIcon}" Margin="1"
                               Style="{StaticResource FIcon}" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource MouseOverForeground}" TargetName="FIcon"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource PressedForeground}" TargetName="FIcon"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.5" TargetName="FIcon"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">滚动条滑块两边按钮样式</span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Style </span><span style="color: #ff0000;">x:Key</span><span style="color: #0000ff;">="ScrollBarTrackButton"</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{x:Type RepeatButton}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Background"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="Transparent"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">Setter</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Template"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter.Value</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate </span><span style="color: #ff0000;">TargetType</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{x:Type RepeatButton}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="Transparent"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Setter.Value</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Setter</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">滚动条滑块样式</span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate </span><span style="color: #ff0000;">x:Key</span><span style="color: #0000ff;">="ThumbTemplate"</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">="Thumb"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border  </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="Bg"</span><span style="color: #ff0000;"> CornerRadius</span><span style="color: #0000ff;">="4"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> SnapsToDevicePixels</span><span style="color: #0000ff;">="True"</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarForeround}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">&lt;Border.Background&gt;
                &lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;
                    &lt;GradientStop Color="#C7C0C0" Offset="0.15"/&gt;
                    &lt;GradientStop Color="#AFA9A9" Offset=".5"/&gt;
                    &lt;GradientStop Color="#989494" Offset=".5"/&gt;
                    &lt;GradientStop Color="#858585" Offset="1"/&gt;
                &lt;/LinearGradientBrush&gt;
            &lt;/Border.Background&gt;</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="IsMouseOver"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="True"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Background"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource MouseOverForeground}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> TargetName</span><span style="color: #0000ff;">="Bg"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">Setter</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="IsEnabled"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="False"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Opacity"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="0.5"</span><span style="color: #ff0000;"> TargetName</span><span style="color: #0000ff;">="Bg"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">Setter</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">水平滚滚动条模板</span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate </span><span style="color: #ff0000;">x:Key</span><span style="color: #0000ff;">="HorizontalScrollBar"</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{x:Type ScrollBar}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="HorizontalRoot"</span><span style="color: #ff0000;"> Height</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{TemplateBinding Height}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid.ColumnDefinitions</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ColumnDefinition </span><span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="Auto"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ColumnDefinition </span><span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="*"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ColumnDefinition </span><span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="Auto"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid.ColumnDefinitions</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">外部背景,好像不用更好看</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">&lt;Border x:Name="Bg" Grid.Column="0" Grid.ColumnSpan="3" CornerRadius="0"  Opacity="0" Background="#858585"/&gt;</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">内部背景</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="BgInner"</span><span style="color: #ff0000;"> Grid.Column</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> SnapsToDevicePixels</span><span style="color: #0000ff;">="True"</span><span style="color: #ff0000;"> Opacity</span><span style="color: #0000ff;">="0.3"</span><span style="color: #ff0000;">  CornerRadius</span><span style="color: #0000ff;">="6"</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarBackground}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">左按钮</span><span style="color: #008000;">--&gt;</span>

        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">Grid.Column</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton  </span><span style="color: #ff0000;">local:ControlAttachProperty.FIcon</span><span style="color: #0000ff;">="&amp;#xe65e;"</span><span style="color: #ff0000;">  Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarButton}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> x:Name</span><span style="color: #0000ff;">="HorizontalSmallDecrease"</span><span style="color: #ff0000;">
                             IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0,1,0,0"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.LineLeftCommand"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">中间滑动区域</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="PART_Track"</span><span style="color: #ff0000;"> IsDirectionReversed</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Grid.Column</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">左滑块</span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.DecreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="HorizontalLargeDecrease"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.PageLeftCommand"</span><span style="color: #ff0000;">
                                  IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{DynamicResource ScrollBarTrackButton}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.DecreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">中间滑块 Margin="1" VerticalAlignment="Center" VerticalContentAlignment="Center" </span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.Thumb</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Thumb </span><span style="color: #ff0000;">Template</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ThumbTemplate}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.Thumb</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">右滑块</span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.IncreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="HorizontalLargeIncrease"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.PageRightCommand"</span><span style="color: #ff0000;">
                                  IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;">  Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{DynamicResource ScrollBarTrackButton}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.IncreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">右按钮</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">Grid.Column</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">local:ControlAttachProperty.FIcon</span><span style="color: #0000ff;">="&amp;#xe605;"</span><span style="color: #ff0000;">  Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarButton}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;">
                             IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0,1,0,0"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.LineRightCommand"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="IsMouseOver"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">TargetName</span><span style="color: #0000ff;">="BgInner"</span><span style="color: #ff0000;"> Property</span><span style="color: #0000ff;">="Opacity"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="0.5"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">垂直滚滚动条模板</span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate </span><span style="color: #ff0000;">x:Key</span><span style="color: #0000ff;">="VerticalScrollBar"</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{x:Type ScrollBar}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="VerticalRoot"</span><span style="color: #ff0000;"> Height</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{TemplateBinding Height}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Grid.RowDefinitions</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RowDefinition </span><span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="Auto"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RowDefinition </span><span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="*"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RowDefinition </span><span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="Auto"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid.RowDefinitions</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">外部背景,好像不用更好看</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">&lt;Border x:Name="Bg" Grid.Row="0" Grid.RowSpan="3" CornerRadius="0" Opacity="0" Background="#858585"/&gt;</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">内部背景</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="BgInner"</span><span style="color: #ff0000;"> Grid.Row</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> CornerRadius</span><span style="color: #0000ff;">="6"</span><span style="color: #ff0000;"> SnapsToDevicePixels </span><span style="color: #0000ff;">="True"</span><span style="color: #ff0000;"> Opacity</span><span style="color: #0000ff;">="0.3"</span><span style="color: #ff0000;">  Background</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarBackground}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">上按钮</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">Grid.Row</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> x:Name</span><span style="color: #0000ff;">="VerticalSmallDecrease"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">local:ControlAttachProperty.FIcon</span><span style="color: #0000ff;">="&amp;#xe65d;"</span><span style="color: #ff0000;">  Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarButton}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;">
                             IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.LineUpCommand"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">中间滑动区域</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="PART_Track"</span><span style="color: #ff0000;"> IsDirectionReversed</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> Grid.Row</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">上滑块</span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.DecreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="HorizontalLargeDecrease"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.PageUpCommand"</span><span style="color: #ff0000;"> 
                                  IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{DynamicResource ScrollBarTrackButton}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.DecreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">中间滑块</span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.Thumb</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Thumb </span><span style="color: #ff0000;">Template</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ThumbTemplate}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;"> MinHeight</span><span style="color: #0000ff;">="10"</span><span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.Thumb</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">下滑块</span><span style="color: #008000;">--&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Track.IncreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="HorizontalLargeIncrease"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.PageDownCommand"</span><span style="color: #ff0000;">
                                  IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{DynamicResource ScrollBarTrackButton}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track.IncreaseRepeatButton</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Track</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #008000;">&lt;!--</span><span style="color: #008000;">下按钮</span><span style="color: #008000;">--&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Border </span><span style="color: #ff0000;">Grid.Row</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #ff0000;"> x:Name</span><span style="color: #0000ff;">="VerticalSmallIncrease"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">RepeatButton </span><span style="color: #ff0000;">local:ControlAttachProperty.FIcon</span><span style="color: #0000ff;">="&amp;#xe64b;"</span><span style="color: #ff0000;">  Style</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarButton}</span><span style="color: #0000ff;">"</span><span style="color: #ff0000;">
                             IsTabStop</span><span style="color: #0000ff;">="False"</span><span style="color: #ff0000;"> Interval</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> Command</span><span style="color: #0000ff;">="ScrollBar.LineDownCommand"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="IsMouseOver"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">TargetName</span><span style="color: #0000ff;">="BgInner"</span><span style="color: #ff0000;"> Property</span><span style="color: #0000ff;">="Opacity"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="0.5"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate.Triggers</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlTemplate</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">ScrollBar样式</span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Style </span><span style="color: #ff0000;">x:Key</span><span style="color: #0000ff;">="DefaultScrollBar"</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{x:Type ScrollBar}</span><span style="color: #0000ff;">"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="SnapsToDevicePixels"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="True"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="OverridesDefaultStyle"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="true"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Style.Triggers</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Orientation"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="Horizontal"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Template"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource HorizontalScrollBar}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Height"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarSize}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Trigger </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Orientation"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="Vertical"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Template"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource VerticalScrollBar}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">Setter </span><span style="color: #ff0000;">Property</span><span style="color: #0000ff;">="Width"</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">="</span><span style="color: #808000;">{StaticResource ScrollBarSize}</span><span style="color: #0000ff;">"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Trigger</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Style.Triggers</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">Style</span><span style="color: #0000ff;">&gt;</span></pre>
复制代码
View Code

　　最后ScrollViewer的样式如下，其实就是两个  ScrollBar组成：

复制代码 
    <!--ScrollViewer样式-->
    <Style x:Key="DefaultScrollViewer" TargetType="{x:Type ScrollViewer}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" x:Name="leftColumn" />
                            <ColumnDefinition Width="Auto" x:Name="rightColumn" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}"
                                                CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"
                                                Grid.Row="0" Grid.Column="0" />
                        <!--垂直滚动条 -->
                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}"
                                   Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                   Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <!--水平底部滚动条-->
                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar"
                                   Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}"
                                   Minimum="0" Orientation="Horizontal" Grid.Row="1"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                   Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                   ViewportSize="{TemplateBinding ViewportWidth}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
复制代码

使用很简单，如果想通用，把上面定义的ScrollViewer设置为默认样式即可：

<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource DefaultScrollBar}"></Style>

<Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource DefaultScrollViewer}"></Style>

三．ListBox样式定义

ListBox是最基础、常用的集合控件，效果：

ListBox的样式比较简单，包括两部分：

  • ListBoxItem项的样式；
  • ListBox的样式；

完整代码：  

复制代码 
<Style x:Key="DefaultListBoxItem" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <!--<Setter Property="VerticalContentAlignment" Value="Center" />-->
        <Setter Property="MinHeight" Value="25" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Padding" Value="3,0,0,0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                            <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                            <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
复制代码
复制代码 
    <Style x:Key="DefaultListBox" TargetType="{x:Type ListBox}">
        <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
        <Setter Property="Background" Value="{StaticResource ItemsContentBackground}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultListBoxItem}"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="False"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border Name="Border" Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer>
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
复制代码

ListBox默认是支持虚拟化的，当加载大数据时需要开启虚拟化，或者定义一个虚拟化的样式：

复制代码 
    <!--支持虚拟化的ListBox-->
    <Style x:Key="VirtualListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource DefaultListBox}">
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
        <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    </Style>
复制代码

上面演示效果的代码示例：  

复制代码 
<ListBox Margin="5" SelectionMode="Multiple"  >
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">男</ListBoxItem>
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">女</ListBoxItem>
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">其他</ListBoxItem>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <CheckBox>2222333333333333333</CheckBox>
                <TextBox Width="200"></TextBox>
                <ListBoxItem IsSelected="True">111</ListBoxItem>
            </ListBox>
            <ListBox Margin="5" Grid.Column="1">
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">男</ListBoxItem>
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">女</ListBoxItem>
                <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">其他</ListBoxItem>
            </ListBox>
复制代码

另外提供一个比较常用的需求，ListBox单选RadioButton效果样式，如上图右边的那个ListBox效果：  

复制代码 
   <Style x:Key="RadioButtonListBoxItem" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource DefaultListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <RadioButton  IsChecked="{Binding IsSelected,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}">
                            <RadioButton.Content>
                                <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </RadioButton.Content>
                        </RadioButton>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                            <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                            <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
复制代码

 

附录：参考引用

WPF自定义控件与样式(1)-矢量字体图标(iconfont)

WPF自定义控件与样式(2)-自定义按钮FButton

WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

 

版权所有，文章来源：http://www.cnblogs.com/anding

个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。

狂奔之林
关注
专栏目录
WPF ScrollViewer 样式
11-25 5016
[code=csharp]
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
LJianDong的博客
11-07 826
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使...
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
自定义ScrollViewer样式
ajian11的专栏
06-30 375
&lt;Grid.Resources&gt;                &lt;SolidColorBrush x:Key="NormalColor"&gt;#898E9A&lt;/SolidColorBrush&gt;                 &lt;SolidColorBrush x:Key="HighlightColor"&gt;#6C7079&lt;/SolidColorBr
WPF (基础控件13)ScrollViewer控件的详细使用教程
最新发布
weixin_39604653的博客
09-02 1210
ScrollViewer 是 WPF 中的一个容器控件，它允许用户滚动其内容。通常用于显示超出可视区域的内容，如长文本、图片列表或复杂的布局。通过 ScrollViewer，你可以在水平和/或垂直方向上滚动查看内容。
WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
weixin_34032779的博客
05-26 188
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化   艾尼路 出的效果图 本人嵌套  WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)  源代码      ...
window phone7中自定义listbox或scrollviewer滚动条样式
weixin_30608131的博客
02-17 62
window phone7中的 listbox或scrollviewer提供丰富绚丽的效果，当然包括滚动条在使用时自动显示，在停止滚动时自动隐藏(这点和ios差不多)，但是在很多情况下我们需要自定义滚动条的样式，我遇到的问题是重写scrollviewer控件模板，因为listbox其实是有scrollviewer提供滚动的，但是在【用户滚动时显示滚动条，停止滚动时隐藏滚动条】上遇到了麻烦，后从st...
WPF ListBox 自定义scrollbar
07-27
要在 WPF 的 ListBox 中自定义滚动条，你可以使用样式和模板来修改默认的外观。下面是一个简单的示例： 首先，你需要在 XAML 中定义一个样式，用于自定义 ListBox 的滚动条： ```xaml ...
WPF listBox 漂亮的listBOX
10-10
此外，`ListBox`还支持多种样式和模板，包括`ListBoxStyle`和`ItemContainerStyle`，用于自定义整个控件的外观以及每个项容器的样式。例如，改变选中项的背景色： ```xml <ListBox> <ListBox.ItemContainerStyle> ...
Expression Blend和Silverlight中的ListBox样式（第1部分-ScrollBars）
04-11
总之，通过Expression Blend，我们可以充分利用Silverlight的灵活性，创造出独具特色的ListBox样式，尤其是对ScrollBars的定制，可以极大地提升应用的专业性和用户的满意度。记住，良好的UI设计是成功应用的关键，而...
WPF中自定义Scrollbar 滚动条 样式 图片
11-24
默认情况下，滚动条具有系统定义的样式，但WPF的强大之处在于允许开发者根据需求自定义控件的外观和行为，包括滚动条的样式。本文将深入探讨如何在WPF中自定义Scrollbar的样式，包括设置颜色和使用自定义图片。 ...
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
自定义ScrollViewer——仿iphone和android
04-15
网上找不到 只好自己开发了 ScrollViewer是不错，不过不足够 特别是用了IPHONE和ANDROID之后 拖到底部后，还可以继续拖一小段距离 符合手触设备的用户体验 VS2010开发
ListBox自动滚动到底部
09-10
ListBox自动滚动到底部
ListBox样式
weixin_33738555的博客
09-24 292
转载于:https://www.cnblogs.com/XzcBlog/p/3990665.html
WPF滚动条样式自定义，ScrollViewer样式自定义
小周爱学习的博客
04-03 7862
在做wpf界面制作中布局经常用到ScrollViewer控件，默认的样式很丑，跟自己设计的界面风格不搭配，需要修改成跟自己界面设计风格一样的话需要修改它的默认样式。下面就分享下代码：&lt;ScrollViewer HorizontalScrollBarVisibility="Visible" Template="{DynamicResource ScrollViewerControlTempla...
【转】WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_34146986的博客
12-19 367
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义；   二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图： 　　如上图，ScrollViewer简单来说分...
[WPF,XAML,ScrollBar,ScrollViewer,Style] 自定义滚动条
热门推荐
记忆碎片
03-04 1万+
<!-- body, p, pre, span {font-family:Consolas,'Microsoft Yahei'; font-size:14px} p {line-height:150%} --> 自定义 ScrollViewer 的滚动条样式，如下图所示： ScrollBar 在滚动时会自动显示并隐藏，而且 ScrollBar 存在于 View
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值