WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
注释直接写在代码里了 不太理解意思的 可以先去看看我上一篇 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
滚动条因为要在触摸屏上用 所以我设计的很宽 宽度可以自己改 把宽度变量单独拿出来了
先上效果图
还没滚动
已滚动区域
滚动到底部
内容够显示,不需要滚动条的时候
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="ScrollViewerStyle.Window1"
x:Name="Window"
Title="Window1"
Width="300"
Height="300"> <Window.Resources> <!--滚动条默认背景色灰色-->
<ImageBrush x:Key="imgVerticalScrollBarBackground"
TileMode="FlipY"
ImageSource="Images/Window1/PageDownBG.png" />
<!--滚动条上部分已滚动背景色橘黄色-->
<ImageBrush x:Key="imgVerticalScrollBarDisabledBackground"
TileMode="FlipY"
ImageSource="Images/Window1/PageUpBG.png" />
<!--滚动条上滚动按钮图片-->
<ImageBrush x:Key="imgVerticalScrollBarUpButton"
ImageSource="Images/Window1/BarUp.png" />
<!--滚动条上滚动按钮不可用状态图片-->
<ImageBrush x:Key="imgVerticalScrollBarDisabledUpButton"
ImageSource="Images/Window1/BarUp_E.png" />
<!--滚动条下滚动按钮图片 可用 和不可用 都是灰色图片-->
<ImageBrush x:Key="imgVerticalScrollBarDownButton"
ImageSource="Images/Window1/BarDown.png" />
<!--滚动条中间滚动按钮图片-->
<BitmapImage x:Key="imgNavigationButton"
UriSource="Images/Window1/Nar_Center.png" />
<!--滚动条中间滚动按钮 滚动时图片-->
<BitmapImage x:Key="imgNavigationButton_S"
UriSource="Images/Window1/Nar_Center_S.png" />
<!--滚动条的宽度-->
<sys:Double x:Key="VerticalScrollBarWidth">50</sys:Double> <!--ScrollViewer模版-->
<ControlTemplate x:Key="ScrollViewerControlTemplate1"
TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"> <!--还是上一话题,我只需要右侧纵向的滚动条,横向滚动条和多余的代码我都去掉了,如果横竖都要用,请照葫芦画瓢,就当是复习了-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> <!--ScrollViewer左侧内容模版,对它没什么特别的操作,默认就可以-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Grid.Row="0" /> <!--ScrollViewer右侧滚动条,编辑它的样式-->
<ScrollBar x:Name="PART_VerticalScrollBar"
AutomationProperties.AutomationId="VerticalScrollBar"
Cursor="Arrow"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Grid.Row="0"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Style="{DynamicResource ScrollBarStyle1}" /> </Grid>
</ControlTemplate> <!--滚动条上下滚动按钮的基样式表-->
<Style x:Key="RepeatButtonBaseStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle x:Name="bg"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--上滚动区域和下滚动区域的基样式表-->
<Style x:Key="VerticalScrollBarPageButtonBaseStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--滚动条中间滚动按钮的样式表-->
<Style x:Key="ThumbStyle1"
TargetType="{x:Type Thumb}">
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="false" />
<Setter Property="Template"> <Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}"> <Image x:Name="image"
Stretch="Fill"
Source="{StaticResource imgNavigationButton}" /> <ControlTemplate.Triggers>
<Trigger Property="IsDragging"
Value="True">
<Setter Property="Source"
TargetName="image"
Value="{StaticResource imgNavigationButton_S}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter> </Style> <!--滚动条样式表-->
<Style x:Key="ScrollBarStyle1"
TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="false" />
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Width"
Value="{StaticResource VerticalScrollBarWidth}" />
<Setter Property="MinWidth"
Value="{StaticResource VerticalScrollBarWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
<RowDefinition Height="0.00001*" />
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
</Grid.RowDefinitions> <RepeatButton x:Name="rpBtnUp"
Command="{x:Static ScrollBar.LineUpCommand}"
Style="{StaticResource RepeatButtonBaseStyle}"
Background="{StaticResource imgVerticalScrollBarUpButton}"
Foreground="{x:Null}"
BorderBrush="{x:Null}" /> <RepeatButton Grid.Row="2"
x:Name="rpBtnDown"
Command="{x:Static ScrollBar.LineDownCommand}"
Style="{StaticResource RepeatButtonBaseStyle}"
Background="{StaticResource imgVerticalScrollBarDownButton}"
Foreground="{x:Null}"
BorderBrush="{x:Null}" /> <Border Grid.Row="1"
x:Name="bdBackground"
Visibility="Collapsed"
Background="{StaticResource imgVerticalScrollBarBackground}"> </Border>
<Track x:Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true"
ViewportSize="NaN"
IsEnabled="{TemplateBinding IsMouseOver}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageUpCommand}"
Style="{StaticResource VerticalScrollBarPageButtonBaseStyle}"
Background="{StaticResource imgVerticalScrollBarDisabledBackground}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageDownCommand}"
Style="{StaticResource VerticalScrollBarPageButtonBaseStyle}"
Background="{StaticResource imgVerticalScrollBarBackground}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ThumbStyle1}"
Height="64"
Margin="-2,-14,-1,-14" />
</Track.Thumb>
</Track> </Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Background"
TargetName="rpBtnUp"
Value="{StaticResource imgVerticalScrollBarDisabledUpButton}" />
<Setter Property="Visibility"
TargetName="PART_Track"
Value="Collapsed" />
<Setter Property="Visibility"
TargetName="bdBackground"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter> </Style>
</Window.Resources> <Grid x:Name="LayoutRoot">
<ScrollViewer Template="{DynamicResource ScrollViewerControlTemplate1}">
<TextBlock TextWrapping="Wrap"><Run Text="-------------------------------------------------------------------------------- ScrollViewer 可使内容显示在比其实际大小小的区域中。当 ScrollViewer 的内容不是全部可见时,ScrollViewer 会显示滚动条,用户可利用这些滚动条来移动可见的内容区域。包括 ScrollViewer 的所有内容的区域称为范围。内容的可见区域称为视区。 物理滚动用于按预设的物理增量(通常按以像素为单位声明的值)滚动内容。逻辑滚动用于滚动到逻辑树中的下一项。如果您需要物理滚动,而不是逻辑滚动,请将宿主 Panel 元素包装在一个 ScrollViewer 中,并将其 CanContentScroll 属性设置为 false。物理滚动是大多数 Panel 元素的默认滚动行为。 如果 ScrollViewer 包含大量项目,则滚动性能可能会受影响。在这种情况下,可将 IsDeferredScrollingEnabled 设置为 true。这样可使内容视图在拖动 Thumb 时保持静态,并且仅当释放 Thumb 时才更新。 因为 ScrollViewer 元素的滚动栏是按元素的默认样式进行定义的,所以如果您将自定义样式应用到 ScrollViewer,那么滚动栏将不再显示。滚动栏必须按自定义样式进行定义才能够显示。 自定义 ScrollViewer 控件 若要对多个 ScrollViewer 控件应用相同的属性设置,请使用 Style 属性。您可以修改默认的 ControlTemplate,以便为控件提供一个独特的外观。有关创建 ControlTemplate 的更多信息,请参见 通过创建 ControlTemplate 自定义现有控件的外观。若要查看特定于 ScrollViewer 的部件和状态,请参见 ScrollViewer 样式和模板。 可通过控件的默认样式设置此控件的依赖项属性。如果某一属性按默认样式设置,则当控件显示在应用程序中时,该属性的值可能会由默认值更改为其他值。默认样式是由应用程序在运行时所使用的桌面主题决定的。有关更多信息,请参见 Default WPF Themes(默认 WPF 主题)。" /></TextBlock>
</ScrollViewer>
</Grid>
</Window>
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)的更多相关文章
- WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码
- WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 先上效果图 正常样式 拖动时样式 好下面 开始吧 ==================================== ...
- WPF ScrollViewer滚动条样式,适合触摸屏使用
触摸屏上客户要求滚动条宽度大些,方便手指上下滚动,之前在网上看了个,原文找不到了,代码记录下. 效果如下: <ControlTemplate x:Key="ScrollViewerCo ...
- 兼容IE的滚动条自定义样式
废话不多说,直接上: IE专属的滚动条样式定义,只能设置各种原始结构的颜色,宽高结构等其他样式无法修改: div{ scrollbar-arrow-color: red; /*三角箭头的颜色*/ sc ...
- WPF ToolKit Chart 自定义样式
1.引用:WPFToolkit.dll, System.Windows.Controls.DataVisualization.Toolkit.dll 2. 页面代码参考如下: <UserCont ...
- WPF控件自定义样式(FasControls)
一.界面预览
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
- 【转】WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合 ...
随机推荐
- D3D 点列练习
画四个点在窗体. #pragma once #pragma comment(lib,"d3d9.lib") #pragma comment(lib,"d3dx9.lib& ...
- 基于 Android NDK 的学习之旅-----序言
前些日子做了个Android项目, 引擎层 用C的, 准备写这个系类的文章,借此跟朋友来分享下我NDK开放的经验以及自己知识的总结和备忘.希望能给需要这方面资料的朋友提供一定的帮助. 主要涉及到: ...
- Android菜鸟的成长笔记(25)——可爱的小闹钟
摘要: 这一篇主要使用系统为我们提供的一个服务AlarmManager来制作一个Android小闹钟,同时还涉及到了自定义主题.判断第一次启动应用.自定义动画.对话框.制作指导滑动页面等方面.最后形成 ...
- 小强的HTML5移动开发之路(29)—— JavaScript回顾4
一.变量的作用域 javascript脚本的执行过程分为两个阶段: 第一阶段,js引擎()先扫描整个javascript代码.当碰到<script>时,会先创建一个全局的活动对象,将< ...
- PyCharm 重构(refactor)快捷键
提取变量(比如一个函数会返回一个变量值):ctrl + alt + v(v:variable) 将某段代码封装为一个函数(函数+函数调用):ctrl + alt + m(m:method)
- DotNetty编写跨平台网络通信
DotNetty编写跨平台网络通信 长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但 ...
- [GeekBand] C++继承关系下虚函数内存分布
本文参考文献:GeekBand课堂内容,授课老师:侯捷 :深度探索C++对象模型(侯捷译) :网络资料,如:http://blog.csdn.net/sanfengshou/article/detai ...
- ice框架应用记录-框架说明
ice框架是一个解决分布式问题的框架,包括应用与管理工具两部分, 应用部分主要包括: 1,注册服务,用来管理所有节点:为了可靠性,一般会开启两个注册服务,一个主注册服务一个从注册服务 2,节点,就是开 ...
- iOS项目double、float精度丢失解决办法
描述 在iOS项目中老是遇到double.float精度丢失的问题 PS: NSString * jsonStr = @"{\"9.70\":9.70,\"67 ...
- C# 反射调用私有事件
原文:C# 反射调用私有事件 在 C# 反射调用私有事件经常会不知道如何写,本文告诉大家如何调用 假设有 A 类的代码定义了一个私有的事件 class A { private event EventH ...