WPF样式-ScrollBar

1.对于滚动条 ScrollBar 样式的设计，通过继承，可以实现在不同的控件中，如 TextBox、RichTextBox、DataGrid、ListBox...等带有滚动条的控件统一修改。

2.在对ScrollBar样式的设计过程中，很容易实现 + - 按钮、滚动条宽度、滚动条的背景颜色的修改，如下代码中

 1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 2  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  3  xmlns:sys="clr-namespace:System;assembly=mscorlib">  4  5 <ResourceDictionary.MergedDictionaries>  6 <ResourceDictionary Source="Base.xaml"></ResourceDictionary>  7 </ResourceDictionary.MergedDictionaries>  8 <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">40</sys:Double>  9 <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">40</sys:Double> 10 11 <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource base}"> 12 <Style.Triggers> 13 <Trigger Property="Orientation" Value="Horizontal"> 14 <Setter Property="Width" Value="Auto"/> 15 <Setter Property="Height" Value="20" /> 16 <Setter Property="Background" Value="#E0F4FF"/> 17 </Trigger> 18 <Trigger Property="Orientation" Value="Vertical"> 19 <Setter Property="Width" Value="20"/> 20 <Setter Property="Height" Value="Auto" /> 21 <Setter Property="Background" Value="#E0F4FF"/> 22 </Trigger> 23 </Style.Triggers> 24 </Style> 25 26 </ResourceDictionary>

ScrollBar Style 1

3.但是，无法实现对滑块的样式修改，比如颜色修改，试了很多方式，当滚动条一出现，就会报错，主要问题集中在Trump上，下面的代码基本上解决了这个问题

  1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3                     xmlns:sys="clr-namespace:System;assembly=mscorlib">
  4 
  5     <ResourceDictionary.MergedDictionaries>
  6         <ResourceDictionary Source="Base.xaml"></ResourceDictionary>
  7     </ResourceDictionary.MergedDictionaries>
  8     <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">20</sys:Double>
  9     <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">20</sys:Double>
 10 
 11     <Style  x:Key="ScrollBarStyleTest"  TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource base}">
 12         <Style.Triggers>
 13             <Trigger Property="Orientation" Value="Horizontal">
 14                 <Setter Property="Width" Value="Auto"/>
 15                 <Setter Property="Height" Value="20" />
 16                 <Setter Property="Background" Value="#B594CD"/>
 17             </Trigger>
 18             <Trigger Property="Orientation" Value="Vertical">
 19                 <Setter Property="Width" Value="20"/>
 20                 <Setter Property="Height" Value="Auto" />
 21                 <Setter Property="Background" Value="#B594CD"/>
 22                 <Setter Property="Template">
 23                     <Setter.Value>
 24 
 25                         <ControlTemplate TargetType="{x:Type ScrollBar}">
 26 
 27                             <Track IsDirectionReversed="True">
 28 
 29                                 <Track.Thumb>
 30                                     <Thumb Background="Red"/>
 31                                 </Track.Thumb>                               
 32 
 33                             </Track>
 34 
 35                         </ControlTemplate>
 36 
 37 
 38                     </Setter.Value>
 39 
 40                 </Setter>
 41             </Trigger>
 42         </Style.Triggers>
 43         
 44         
 45     </Style>
 46 
 47 
 48     <Color x:Key="WhiteColor">#FFFFFF</Color>
 49     <!--上下三角形箭头 背景颜色  姜彦20180507 1336-->
 50     <SolidColorBrush x:Key="GlyphBrush" Color="{StaticResource WhiteColor}"/>
 51     
 52     
 53     <Style  TargetType="{x:Type ScrollBar}">
 54         <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
 55         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 56         <Setter Property="Template">
 57             <Setter.Value>
 58                 <ControlTemplate TargetType="{x:Type ScrollBar}">
 59                     <Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
 60                         <Grid.RowDefinitions>
 61                             <RowDefinition MaxHeight="18"/>
 62                             <RowDefinition Height="0.00001*"/>
 63                             <RowDefinition MaxHeight="18"/>
 64                         </Grid.RowDefinitions>
 65 
 66                         <Border Grid.RowSpan="3" Background="White" CornerRadius="3,3,3,3"/>
 67 
 68                         <RepeatButton x:Name="DecreaseRepeat" 
 69                                       Background="#AF8FE8" 
 70                                       BorderThickness="0"
 71                                       Command="ScrollBar.LineUpCommand"> <!--上箭头按钮颜色 姜彦20180507 1428-->
 72                             <Grid>
 73                                 <!--上下三角形箭头 背景颜色  姜彦20180507 1336-->
 74                                 <Path x:Name="DecreaseArrow" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z" Fill="{DynamicResource GlyphBrush}"/>
 75                             </Grid>
 76                         </RepeatButton>
 77 
 78                         <Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
 79                             <Track.Thumb>
 80                                 <Thumb Background="#AF8FE8"
 81                                        BorderBrush="#AF8FE8"
 82                                        BorderThickness="1"
 83                                        Margin="0,0,0,0"
 84                                        />
 85                             </Track.Thumb>
 86                             <Track.IncreaseRepeatButton>
 87                                 <RepeatButton x:Name="PageUp" 
 88                                               Background="White" 
 89                                               BorderThickness="0"
 90                                               Command="ScrollBar.PageDownCommand"
 91                                               /> <!--滑块下半部分 背景颜色 姜彦20180507 1429-->
 92                             </Track.IncreaseRepeatButton>
 93                             <Track.DecreaseRepeatButton>
 94                                 <RepeatButton x:Name="PageDown" 
 95                                               Background="White" 
 96                                               BorderThickness="0"
 97                                               Command="ScrollBar.PageUpCommand"/>   <!--滑块上半部分 背景颜色 姜彦20180507 1429-->
 98                             </Track.DecreaseRepeatButton>
 99                         </Track>
100 
101                         <RepeatButton Grid.Row="2" 
102                                       x:Name="IncreaseRepeat" 
103                                       Background="#AF8FE8" 
104                                       BorderThickness="0"
105                                       Command="ScrollBar.LineDownCommand"> <!--下箭头按钮颜色 姜彦20180507 1428-->
106                             <Grid>
107                                 <Path x:Name="IncreaseArrow" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z" Fill="{DynamicResource GlyphBrush}"/>
108                             </Grid>
109                         </RepeatButton>
110                     </Grid>
111 
112                     <ControlTemplate.Triggers>
113                         <Trigger Property="Orientation" Value="Horizontal">
114 
115                             <Setter Property="LayoutTransform" TargetName="GridRoot">
116                                 <Setter.Value>
117                                     <RotateTransform Angle="-90"/>
118                                 </Setter.Value>
119                             </Setter>
120 
121                             <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>
122 
123                             <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
124                             <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
125                             <Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
126                             <Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
127                         </Trigger>
128                     </ControlTemplate.Triggers>
129                 </ControlTemplate>
130             </Setter.Value>
131         </Setter>
132         <Setter Property="Background" Value="White"/>
133     </Style>
134 
135 
136 </ResourceDictionary>

ScrollBar Style2

 

转载于:https://www.cnblogs.com/jiangyan219/articles/9010020.html