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                 <Track
102       Name="PART_Track"
103       Grid.Row="1"
104       IsDirectionReversed="true">
105                     <Track.DecreaseRepeatButton>
106                         <RepeatButton
107           Style="{StaticResource ScrollBarPageButton}"
108           Command="ScrollBar.PageUpCommand" />
109                     </Track.DecreaseRepeatButton>
110                     <Track.Thumb>
111                         <Thumb
112           Style="{StaticResource ScrollBarThumb}"
113           Margin="1,0,1,0"
114           Background="{StaticResource HorizontalNormalBrush}"
115           BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
116                     </Track.Thumb>
117                     <Track.IncreaseRepeatButton>
118                         <RepeatButton
119           Style="{StaticResource ScrollBarPageButton}"
120           Command="ScrollBar.PageDownCommand" />
121                     </Track.IncreaseRepeatButton>
122                 </Track>
123                 <RepeatButton
124       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                 <Border
142       Grid.ColumnSpan="3"
143       CornerRadius="0"
144       Background="#F0F0F0" />
145                 <RepeatButton
146       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                 <Track
152       Name="PART_Track"
153       Grid.Column="1"
154       IsDirectionReversed="False">
155                     <Track.DecreaseRepeatButton>
156                         <RepeatButton
157           Style="{StaticResource ScrollBarPageButton}"
158           Command="ScrollBar.PageLeftCommand" />
159                     </Track.DecreaseRepeatButton>
160                     <Track.Thumb>
161                         <Thumb
162           Style="{StaticResource ScrollBarThumb}"
163           Margin="0,1,0,1"
164           Background="{StaticResource NormalBrush}"
165           BorderBrush="{StaticResource NormalBorderBrush}" />
166                     </Track.Thumb>
167                     <Track.IncreaseRepeatButton>
168                         <RepeatButton
169           Style="{StaticResource ScrollBarPageButton}"
170           Command="ScrollBar.PageRightCommand" />
171                     </Track.IncreaseRepeatButton>
172                 </Track>
173                 <RepeatButton
174       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>

如果代码存在任何问题,欢迎讨论!

时间: 2024-10-04 20:02:07

WPF针对控件中ScrollBar样式的修改的相关文章

wpf 保存控件中的内容为图片格式

黄色的是wpf控件的名称! //保存到特定路径            FileStream fs = new FileStream(@"C:\image.png", FileMode.Create);            //对象转换成位图            RenderTargetBitmap bmp = new RenderTargetBitmap((int)this.mediaElement1.ActualWidth, (int)this.mediaElement1.Act

WPF Image控件中的ImageSource与Bitmap的互相转换

1.从bitmap转换成ImageSource [DllImport("gdi32.dll", SetLastError = true)] private static extern bool DeleteObject(IntPtr hObject); /// <summary> /// 从bitmap转换成ImageSource /// </summary> /// <param name="icon"></param&g

在WPF的WebBrowser控件中屏蔽脚本错误的提示

在WPF中使用WebBrowser控件显示网页时,经常会报脚本错误的提示,如何屏蔽掉这些错误提示呢.方法是定义如下方法: public void SuppressScriptErrors(WebBrowser wb, bool Hide) { FieldInfo fiComWebBrowser = typeof(WebBrowser).GetField("_axIWebBrowser2", BindingFlags.Instance | BindingFlags.NonPublic);

WPF触屏Touch事件在嵌套控件中的响应问题

原文:WPF触屏Touch事件在嵌套控件中的响应问题 前几天遇到个touch事件的坑,记录下来以增强理解. 具体是 想把一个listview嵌套到另一个listview,这时候如果list view(子listview)的内容过多超过容器高度,它是不会出现滚动条压缩内容区域的,反而会将滚动区域转移到外面的list view(父listview),这个无可争议,但这个问题开始没留意,为待会的坑埋下伏笔. 因为 然后就是设置鼠标滚轮. 首先我使用了MouseWheel事件,奇怪的是它明明是个路由事件

WPF 重写微调自带的样式,ListView、DataGrid、TreeView等所有控件的默认样式

原文:WPF 重写微调自带的样式,ListView.DataGrid.TreeView等所有控件的默认样式 不知道各位在开发中有没有遇到这样的窘迫,开发一个UI,设计给出的效果图和自带的样式的区别很大,然后有的样式通过属性是修改不了的,比如TreeView的子项TreeViewItem,想完全透明背景色就做不到,只有重写Template,然而重写了模板发现很多默认的功能失效了,等等一些列问题:又比如需要重新DataGrid,的DataGridRowHeader模板,又不知这个模板哪些属性必须要给

WPF常用控件总结及其应用demo

WPF常用控件总结及其应用 一.控件 1.WrapPanel布局控件:可以实现当空间不足时子控件自动往下一行布局,空间充足时又会自动调整行布局.常用布局控件还有StackPanel(设置其子元素是垂直排列还是水平排列).Grid(通过定义行和列来绘制出一个表格).Canvas(通过指定相对于其的坐标来指定子控件的位置).DockPanel(设置其子元素如何停靠,DockPanel.Left.DockPanel.Right.DockPanel.Top.DockPanel.Bottom). 2.Sc

WPF用户控件实现类似WinForm的子窗口

1.WPF 介绍 .NET Framework 4 WPF 是下一代显示系统,用于生成Windows 客户端应用程序. 使用 WPF可以创建广泛的独立应用程序以及浏览器承载的应用程序. WPF 的核心是一个与分辨率无关并且基于向量的呈现引擎,旨在利用现代图形硬件的优势.WPF 通过一整套应用程序开发功能扩展了这个核心,这些功能包括Extensible Application Markup Language (XAML).控件.数据绑定.布局.2-D和3-D图形.动画.样式.模板.文档.媒体.文本

WPF第三方控件盘点

WPF统一的编程模型.语言和框架,实现了界面设计人员和开发人员工作可以分离的境界,鉴于WPF强大的优势,且一直是开发者关注的地方,下面和大家分享基于WPF项目开发需要用到的第三方控件,包括业界最受好评的网格控件.图表控件.停靠窗口和文本编辑器. 网格控件 1. Mindscape WPF Property Grid 这款表格控件是100%原生WPF表格控件,是Mindscape公司旗下WPF Elements用户界面套包里的一个商业子控件,当前已经更新到了5.1版本,新的版本在属性表格的性能以及

[Android] 拍照、截图、保存并显示在ImageView控件中

最近在做Android的项目,其中部分涉及到图像处理的内容.这里先讲述如何调用Camera应用程序进行拍照,并截图和保存显示在ImageView控件中以及遇到的困难和解决方法. PS:作者购买了本<Android第一行代码 著:郭霖>,参照里面的内容完成(推荐该书,前面的布局及应用非常不错).网上这类资料非常多,作者仅仅分享给初学者同时在线记录些内容,希望对大家有所帮助. 首先,设置activity_main.xml为LinearLayout布局且 android:orientation=&q