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

 

posted @ 2018-05-08 18:12  <--青青子衿-->  阅读(1256)  评论(0)  编辑  收藏  举报
// /**/ // 在页脚Html代码 引入 // function btn_donateClick() { var DivPopup = document.getElementById('Div_popup'); var DivMasklayer = document.getElementById('div_masklayer'); DivMasklayer.style.display = 'block'; DivPopup.style.display = 'block'; var h = Div_popup.clientHeight; with (Div_popup.style) { marginTop = -h / 2 + 'px'; } } function MasklayerClick() { var masklayer = document.getElementById('div_masklayer'); var divImg = document.getElementById("Div_popup"); masklayer.style.display = "none"; divImg.style.display = "none"; } setTimeout( function () { document.getElementById('div_masklayer').onclick = MasklayerClick; document.getElementById('btn_donate').onclick = btn_donateClick; var a_gzw = document.getElementById("guanzhuwo"); a_gzw.href = "javascript:void(0);"; $("#guanzhuwo").attr("onclick","follow('33513f9f-ba13-e011-ac81-842b2b196315');"); }, 900);