首页 > 代码库 > WPF针对控件中ScrollBar样式的修改
WPF针对控件中ScrollBar样式的修改
代码最终实现的效果
样式资源代码:
1 <Window.Resources> 2 <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#2280BC" /> 3 <SolidColorBrush x:Key="NormalBrush" Color="#2280BC" /> 4 <SolidColorBrush x:Key="NormalBorderBrush" Color="#2280BC" /> 5 <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#2280BC" /> 6 <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#2280BC" /> 7 <SolidColorBrush x:Key="GlyphBrush" Color="#FFFFFF" /> 8 <LinearGradientBrush x:Key="PressedBrush" 9 StartPoint="0,0" EndPoint="0,1"> 10 <GradientBrush.GradientStops> 11 <GradientStopCollection> 12 <GradientStop Color="#BBB" Offset="0.0"/> 13 <GradientStop Color="#EEE" Offset="0.1"/> 14 <GradientStop Color="#EEE" Offset="0.9"/> 15 <GradientStop Color="#FFF" Offset="1.0"/> 16 </GradientStopCollection> 17 </GradientBrush.GradientStops> 18 </LinearGradientBrush> 19 20 <!--style for repeatbutton 01--> 21 <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}"> 22 <Setter Property="SnapsToDevicePixels" Value="True"/> 23 <Setter Property="OverridesDefaultStyle" Value="true"/> 24 <Setter Property="Focusable" Value="false"/> 25 <Setter Property="Template"> 26 <Setter.Value> 27 <ControlTemplate TargetType="{x:Type RepeatButton}"> 28 <Border Name="Border" Margin="1" CornerRadius="0" Background="{StaticResource NormalBrush}" 29 BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="1"> 30 <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource GlyphBrush}" 31 Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> 32 </Border> 33 <ControlTemplate.Triggers> 34 <Trigger Property="IsPressed" Value="true"> 35 <Setter TargetName="Border" Property="Background" 36 Value="{StaticResource PressedBrush}" /> 37 </Trigger> 38 <Trigger Property="IsEnabled" Value="false"> 39 <Setter Property="Foreground" 40 Value="{StaticResource DisabledForegroundBrush}"/> 41 </Trigger> 42 </ControlTemplate.Triggers> 43 </ControlTemplate> 44 </Setter.Value> 45 </Setter> 46 </Style> 47 48 <!--style for repeatbutton 01--> 49 <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 50 <Setter Property="SnapsToDevicePixels" Value="True"/> 51 <Setter Property="OverridesDefaultStyle" Value="true"/> 52 <Setter Property="IsTabStop" Value="false"/> 53 <Setter Property="Focusable" Value="false"/> 54 <Setter Property="Template"> 55 <Setter.Value> 56 <ControlTemplate TargetType="{x:Type RepeatButton}"> 57 <Border Background="Transparent" /> 58 </ControlTemplate> 59 </Setter.Value> 60 </Setter> 61 </Style> 62 63 <!--style for thumb--> 64 <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 65 <Setter Property="SnapsToDevicePixels" Value="True"/> 66 <Setter Property="OverridesDefaultStyle" Value="true"/> 67 <Setter Property="IsTabStop" Value="false"/> 68 <Setter Property="Focusable" Value="false"/> 69 <Setter Property="Template"> 70 <Setter.Value> 71 <ControlTemplate TargetType="{x:Type Thumb}"> 72 <Border 73 CornerRadius="0" 74 Background="{TemplateBinding Background}" 75 BorderBrush="{TemplateBinding BorderBrush}" 76 BorderThickness="1" /> 77 </ControlTemplate> 78 </Setter.Value> 79 </Setter> 80 </Style> 81 82 <!--controltemplate for verticalscrollbar--> 83 <ControlTemplate x:Key="VerticalScrollBar" 84 TargetType="{x:Type ScrollBar}"> 85 <Grid > 86 <Grid.RowDefinitions> 87 <RowDefinition MaxHeight="18"/> 88 <RowDefinition Height="0.00001*"/> 89 <RowDefinition MaxHeight="18"/> 90 </Grid.RowDefinitions> 91 <Border 92 Grid.RowSpan="3" 93 CornerRadius="0" 94 Background="#F0F0F0" /> 95 <RepeatButton 96 Grid.Row="0" 97 Style="{StaticResource ScrollBarLineButton}" 98 Height="18" 99 Command="ScrollBar.LineUpCommand"100 Content="M 0 4 L 8 4 L 4 0 Z" />101 <Track102 Name="PART_Track"103 Grid.Row="1"104 IsDirectionReversed="true">105 <Track.DecreaseRepeatButton>106 <RepeatButton107 Style="{StaticResource ScrollBarPageButton}"108 Command="ScrollBar.PageUpCommand" />109 </Track.DecreaseRepeatButton>110 <Track.Thumb>111 <Thumb112 Style="{StaticResource ScrollBarThumb}"113 Margin="1,0,1,0"114 Background="{StaticResource HorizontalNormalBrush}"115 BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />116 </Track.Thumb>117 <Track.IncreaseRepeatButton>118 <RepeatButton119 Style="{StaticResource ScrollBarPageButton}"120 Command="ScrollBar.PageDownCommand" />121 </Track.IncreaseRepeatButton>122 </Track>123 <RepeatButton124 Grid.Row="3"125 Style="{StaticResource ScrollBarLineButton}"126 Height="18"127 Command="ScrollBar.LineDownCommand"128 Content="M 0 0 L 4 4 L 8 0 Z"/>129 </Grid>130 </ControlTemplate>131 132 <!--controltemplate for horizontalscrollbar-->133 <ControlTemplate x:Key="HorizontalScrollBar"134 TargetType="{x:Type ScrollBar}">135 <Grid >136 <Grid.ColumnDefinitions>137 <ColumnDefinition MaxWidth="18"/>138 <ColumnDefinition Width="0.00001*"/>139 <ColumnDefinition MaxWidth="18"/>140 </Grid.ColumnDefinitions>141 <Border142 Grid.ColumnSpan="3"143 CornerRadius="0"144 Background="#F0F0F0" />145 <RepeatButton146 Grid.Column="0"147 Style="{StaticResource ScrollBarLineButton}"148 Width="18"149 Command="ScrollBar.LineLeftCommand"150 Content="M 4 0 L 4 8 L 0 4 Z" />151 <Track152 Name="PART_Track"153 Grid.Column="1"154 IsDirectionReversed="False">155 <Track.DecreaseRepeatButton>156 <RepeatButton157 Style="{StaticResource ScrollBarPageButton}"158 Command="ScrollBar.PageLeftCommand" />159 </Track.DecreaseRepeatButton>160 <Track.Thumb>161 <Thumb162 Style="{StaticResource ScrollBarThumb}"163 Margin="0,1,0,1"164 Background="{StaticResource NormalBrush}"165 BorderBrush="{StaticResource NormalBorderBrush}" />166 </Track.Thumb>167 <Track.IncreaseRepeatButton>168 <RepeatButton169 Style="{StaticResource ScrollBarPageButton}"170 Command="ScrollBar.PageRightCommand" />171 </Track.IncreaseRepeatButton>172 </Track>173 <RepeatButton174 Grid.Column="3"175 Style="{StaticResource ScrollBarLineButton}"176 Width="18"177 Command="ScrollBar.LineRightCommand"178 Content="M 0 0 L 4 4 L 0 8 Z"/>179 </Grid>180 </ControlTemplate>181 182 <!--style for scrollbar-->183 <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">184 <Setter Property="SnapsToDevicePixels" Value="True"/>185 <Setter Property="OverridesDefaultStyle" Value="true"/>186 <Style.Triggers>187 <Trigger Property="Orientation" Value="Horizontal">188 <Setter Property="Width" Value="Auto"/>189 <Setter Property="Height" Value="18" />190 <Setter Property="Template"191 Value="{StaticResource HorizontalScrollBar}" />192 </Trigger>193 <Trigger Property="Orientation" Value="Vertical">194 <Setter Property="Width" Value="18"/>195 <Setter Property="Height" Value="Auto" />196 <Setter Property="Template"197 Value="{StaticResource VerticalScrollBar}" />198 </Trigger>199 </Style.Triggers>200 </Style>201 202 <!--style for scrollviewew-->203 <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}">204 <Setter Property="OverridesDefaultStyle" Value="True"/>205 <Setter Property="Template">206 <Setter.Value>207 <ControlTemplate TargetType="{x:Type ScrollViewer}">208 <Grid>209 <Grid.ColumnDefinitions>210 <ColumnDefinition Width="Auto"/>211 <ColumnDefinition/>212 </Grid.ColumnDefinitions>213 <Grid.RowDefinitions>214 <RowDefinition/>215 <RowDefinition Height="Auto"/>216 </Grid.RowDefinitions>217 218 <ScrollContentPresenter Grid.Column="1"/>219 220 <ScrollBar Name="PART_VerticalScrollBar"221 Value="{TemplateBinding VerticalOffset}"222 Maximum="{TemplateBinding ScrollableHeight}"223 ViewportSize="{TemplateBinding ViewportHeight}"224 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>225 <ScrollBar Name="PART_HorizontalScrollBar"226 Orientation="Horizontal"227 Grid.Row="1"228 Grid.Column="1"229 Value="{TemplateBinding HorizontalOffset}"230 Maximum="{TemplateBinding ScrollableWidth}"231 ViewportSize="{TemplateBinding ViewportWidth}"232 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>233 234 </Grid>235 </ControlTemplate>236 </Setter.Value>237 </Setter>238 </Style>239 240 </Window.Resources>
窗体控件调用代码,其实无需特意调用,是属于全局样式的
<Grid> <StackPanel Orientation="Vertical"> <ListView Height="250" Width="250" Margin="20"> <TextBlock Text="this is test data1! this is test data1" FontSize="25"/> <TextBlock Text="this is test data2! this is test data2" FontSize="25"/> <TextBlock Text="this is test data3! this is test data3" FontSize="25"/> <TextBlock Text="this is test data4! this is test data4" FontSize="25"/> <TextBlock Text="this is test data5! this is test data5" FontSize="25"/> <TextBlock Text="this is test data6! this is test data6" FontSize="25"/> <TextBlock Text="this is test data7! this is test data7" FontSize="25"/> <TextBlock Text="this is test data8! this is test data8" FontSize="25"/> <TextBlock Text="this is test data9! this is test data9" FontSize="25"/> <TextBlock Text="this is test data0! this is test data0" FontSize="25"/> </ListView> <ScrollViewer Height="50" Width="200" Margin="20"> <TextBox TextWrapping="Wrap"/> </ScrollViewer> <ListBox Height="200" Width="300" Margin="20"> <TextBlock Text="this is test data1! this is test data1" FontSize="25"/> <TextBlock Text="this is test data2! this is test data2" FontSize="25"/> <TextBlock Text="this is test data3! this is test data3" FontSize="25"/> <TextBlock Text="this is test data4! this is test data4" FontSize="25"/> <TextBlock Text="this is test data5! this is test data5" FontSize="25"/> <TextBlock Text="this is test data6! this is test data6" FontSize="25"/> <TextBlock Text="this is test data7! this is test data7" FontSize="25"/> <TextBlock Text="this is test data8! this is test data8" FontSize="25"/> <TextBlock Text="this is test data9! this is test data9" FontSize="25"/> <TextBlock Text="this is test data0! this is test data0" FontSize="25"/> </ListBox> </StackPanel> </Grid>
如果代码存在任何问题,欢迎讨论!
WPF针对控件中ScrollBar样式的修改
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。