Wpf ScrollBar自定义样式
2015-04-13 14:50
501 查看
Wpf的ScrollBar可以分为六个区域:A.背景、B.向上按钮、C.向下的按钮、D.Track里面向上的按钮、E.Track里面向下的按钮、F.Track的Thumb
详情见下图
下面通过一个例子来自定义ScrollBar的样式
这里用到了两个其它的样式,其中 scroll_background 定义Track.DecreaseRepeatButton 、 Track.IncreaseRepeatButton的背景
scroll_thumb_style定义Thumb的外观
这里的Thumb的Height是自动的大小,如果想自己设定Thumb的Height,直接设置时没有效果的,必须要将Track的ViewportSize设置为NaN即 ViewportSize="NaN"
上面的例子中只定义了A,D-F区域,B、C即向上滑动和向下滑动的那妞被去掉,如果要加上,只需要在Grid里面添加上既可以了
最终运行结果
本例的代码
http://pan.baidu.com/s/1ntI3fXB
转自:/article/6137930.html
详情见下图
下面通过一个例子来自定义ScrollBar的样式
<Style x:Key="ScrollBar_style" TargetType="ScrollBar"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ScrollBar"> <Grid Width="15"> <Border Width="13" HorizontalAlignment="Center" CornerRadius="5" Background="#33555555"> </Border> <Track HorizontalAlignment="Center" Name="PART_Track" Width="{TemplateBinding Width}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" Value="{TemplateBinding Value}" IsDirectionReversed="true"> <Track.DecreaseRepeatButton> <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineUpCommand" /> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Template="{StaticResource scroll_background}" Command="ScrollBar.LineDownCommand" /> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb Style="{StaticResource scroll_thumb_style}" > </Thumb> </Track.Thumb> </Track> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
这里用到了两个其它的样式,其中 scroll_background 定义Track.DecreaseRepeatButton 、 Track.IncreaseRepeatButton的背景
<ControlTemplate x:Key="scroll_background" TargetType="RepeatButton"> <Border Background="Transparent"> </Border> </ControlTemplate>
scroll_thumb_style定义Thumb的外观
<Style x:Key="scroll_thumb_style" TargetType="Thumb"> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Focusable" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Thumb"> <Rectangle Width="13" Fill="#7D7D7D" RadiusX="5" RadiusY="5"> </Rectangle> </ControlTemplate> </Setter.Value> </Setter> </Style>
这里的Thumb的Height是自动的大小,如果想自己设定Thumb的Height,直接设置时没有效果的,必须要将Track的ViewportSize设置为NaN即 ViewportSize="NaN"
上面的例子中只定义了A,D-F区域,B、C即向上滑动和向下滑动的那妞被去掉,如果要加上,只需要在Grid里面添加上既可以了
<Grid.RowDefinitions> <RowDefinition Height="15" /> <RowDefinition Height="*" /> <RowDefinition Height="15" /> </Grid.RowDefinitions> <!--<Border Grid.RowSpan="3"> <Border.Background> <ImageBrush ImageSource="/images/scroll_line_background.png" /> </Border.Background> </Border>--> <Border Grid.RowSpan="3"> <Border.Background> <ImageBrush ImageSource="/images/scroll_background.png" /> </Border.Background> </Border> <RepeatButton Template="{StaticResource scroll_up}" Grid.Row="0" Command="ScrollBar.LineUpCommand" /> <RepeatButton Template="{StaticResource scroll_down}" Grid.Row="2" Command="ScrollBar.LineDownCommand" />
最终运行结果
本例的代码
http://pan.baidu.com/s/1ntI3fXB
转自:/article/6137930.html
相关文章推荐
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery自定义滚动条样式插件mCustomScrollbar
- 自定义滚动条样式-jquery.tinyscrollbar.min.js 插件
- jQuery自定义滚动条样式插件mCustomScrollbar
- jQuery自定义滚动条样式插件mCustomScrollbar
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- WPF ScrollViewer 自定义样式
- CSS3自定义滚动条样式 -webkit-scrollbar原文地址:http://www.xuanfengge.com/css3-webkit-scrollbar.html
- Android UI ActionBar功能-自定义 Action Bar 样式
- [WPF] 自定义按钮样式
- WPF自定义漂亮的按钮样式
- jquery自定义滚动条-->mCustomScrollbar
- QScrollBar样式
- WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
- WPF 自定义TreeViewItem样式
- Java代码 自定义Android RatingBar 样式 【调整大小】