WPF 自定义滑动ScrollViewer
自定义滑动滚动条
预期目标:横向滚动条,可以左右滑动,用鼠标按住(触摸)然后释放可以实现快速滑动。
我们有几种方案:
1、ScrollViewer,修改其中的横向滚动条,将其中的背景设置为透明。
但是,存在的问题是,没有快速滑动的效果
2、ListBox,修改Panel为WrapPanel,或者直接将内容作为ItemSource填充进去。
这个能实现多个子元素切换的效果,但是针对单个或者一个区域的内容,就有点大材小用了。
3、用DevExpress中的LayoutControl、ScrollBox控件--经尝试后,很不错
1、添加LayoutControl控件或者ScrollBox。如果没有安装Dev控件,请自行下载 Dev下载地址
2、修改ScrollBox中的横向滚动条模板,设置属性
<dxlc:ScrollBox x:Name="MyScrollBox" HorizontalScrollBarStyle="{StaticResource ScrollBarStyle1}" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal"> <!--放置内容--> </StackPanel> </dxlc:ScrollBox>
样式:
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Grid Height="0"></Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
3、往ScrollBox中添加内容,这里我们的滑动效果已经做好了。
案例:
<dxlc:ScrollBox x:Name="MyScrollBox" HorizontalScrollBarStyle="{StaticResource ScrollBarStyle1}" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal"> <!--放置内容--> <TextBlock Text="1" Width="100" Height="200" Background="Red"></TextBlock> <TextBlock Text="2" Width="100" Height="200" Background="CornflowerBlue"></TextBlock> <TextBlock Text="3" Width="100" Height="200" Background="Brown"></TextBlock> <TextBlock Text="4" Width="100" Height="200" Background="Aqua"></TextBlock> <TextBlock Text="5" Width="100" Height="200" Background="DarkCyan"></TextBlock> <TextBlock Text="6" Width="100" Height="200" Background="Red"></TextBlock> <TextBlock Text="7" Width="100" Height="200" Background="Salmon"></TextBlock> <TextBlock Text="8" Width="100" Height="200" Background="Silver"></TextBlock> <TextBlock Text="2" Width="100" Height="200" Background="CornflowerBlue"></TextBlock> <TextBlock Text="3" Width="100" Height="200" Background="Brown"></TextBlock> <TextBlock Text="4" Width="100" Height="200" Background="Aqua"></TextBlock> <TextBlock Text="5" Width="100" Height="200" Background="DarkCyan"></TextBlock> </StackPanel> </dxlc:ScrollBox>
4、如果想要左右细微的调节滑动,我们可以另外添加俩个按钮去点击滑动
<Button x:Name="BtnLeft" Height="28" Click="BtnLeft_OnClick" Background="Transparent" Content="向左滑" HorizontalAlignment="Left"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Path Stroke="DodgerBlue" StrokeThickness="5" Data="M10,14 25,0"></Path> <Path Stroke="DodgerBlue" StrokeThickness="5" Data="M10,11 25,25"></Path> </Grid> </ControlTemplate> </Button.Template> </Button> <Button x:Name="BtnRight" Height="28" Click="BtnRight_OnClick" Background="Transparent" Content="向右滑" HorizontalAlignment="Right"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Path Stroke="DodgerBlue" StrokeThickness="5" Data="M15,14 0,0"></Path> <Path Stroke="DodgerBlue" StrokeThickness="5" Data="M15,11 0,25"></Path> </Grid> </ControlTemplate> </Button.Template> </Button>
后台对应的事件处理:
private void BtnLeft_OnClick(object sender, RoutedEventArgs e) { MyScrollBox.HorizontalOffset += ; } private void BtnRight_OnClick(object sender, RoutedEventArgs e) { MyScrollBox.HorizontalOffset -= ; }
GitHub下载地址:https://github.com/Kybs0/ScrollBoxStyle
WPF 自定义滑动ScrollViewer的更多相关文章
- WPF 自定义BarChartControl(可左右滑动的柱状图)
自定义可左右滑动.拖拽滑动的平面柱状图 在做这种样式控件之前,可先浏览我之前预研的控件: A.自定义左右滑动ScrollViewer(可拖动滑动) B.自定义Bar柱状图 OK,现在说下控件具体设计过 ...
- WPF 自定义BarChartControl(可左右滑动的柱状图)(转)
自定义可左右滑动.拖拽滑动的平面柱状图 在做这种样式控件之前,可先浏览我之前预研的控件: A.自定义左右滑动ScrollViewer(可拖动滑动) B.自定义Bar柱状图 OK,现在说下控件具体设计过 ...
- WPF自定义TextBox及ScrollViewer
原文:WPF自定义TextBox及ScrollViewer 寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了.回来第一件事就是改了项目的一个bug,最近又新增了一个新的 ...
- WPF 自定义ComboBox样式,自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...
- WPF 自定义MenuItem样式
原文:WPF 自定义MenuItem样式 一.前言 默认的MenuItem样式比较普通,这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化.需要其他功能的变化,大家可以根据样式 ...
- WPF 自定义 MessageBox (相对完善版 v1.0.0.6)
基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当你不得不弹出一个消息框通知用户消息时(虽然很不建议在程序中频繁 ...
- WPF 自定义ScrollViwer
ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,ScrollViewer简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...
- WPF自定义选择年月控件详解
本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- WPF 自定义的图表(适用大量数据绘制)下
原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...
随机推荐
- Ajax 加载数据 练习 自我有些迷糊了,写的大概请谅解 ^ _ ^
查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现? <h1>显示数据</h1> <table width="100%" bord ...
- python property理解
一般情况下我这样使用property: @property def foo(self): return self._foo # 下面的两个decrator由@property创建 @foo.sette ...
- 基本数据结构(2)——算法导论(12)
1. 引言 这一篇博文主要介绍链表(linked list),指针和对象的实现,以及有根树的表示. 2. 链表(linked list) (1) 链表介绍 我们在上一篇中提过,栈与队 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
系列目录 我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美. 皮肤颜色来源于AdminLTE系统.我的颜色全部都这里取的.,所以一共取了11个颜色.1个皮肤=2个ban ...
- 配置 LBaaS - 每天5分钟玩转 OpenStack(121)
上一节学习了 Neutron LBaaS 的原理,今天开始实践.首先在配置中启用 LBaaS 服务. Neutron 通过 lbaas plugin 和 lbaas agent 提供 LBaaS 服务 ...
- 读书笔记--SQL必知必会19--存储过程
不同的DBMS对存储过程的实现不同,差异巨大,这里不涉及具体的DBMS,仅仅说明存储过程的简单含义. 19.1 存储过程 简单来说,存储过程就是为以后使用而保存的一条或多条SQL语句. 可以将存储过程 ...
- SQL Server Management Studio 无法修改表,超时时间已到 在操作完成之前超时时
在修改表时,保存的时候显示:无法修改表,超时时间已到 在操作完成之前超时时间已过或服务器未响应 这是执行时间设置过短的原因,可以修改一下设置便能把执行时间加长,以便有足够的时间执行完修改动作. 在 S ...
- c#面向对象基础技能——学习笔记(三)基于OOP思想研究对象的【方法】
实例方法:(解决问题的步骤)完成某功能的各种语句的组合 编写方法要考虑的内容: 1.通过项目需求,确定各方法的任务.功能: 2.方法的可访问性(默认是private):(字段private 属性int ...
- 实现对gridview删除行时弹出确认对话框的一种简单方法
在VS2008提供的GridView中我们可以直接添加一个CommandField删除列:<asp:CommandField ShowDeleteButton="True" ...
- TYPESDK手游聚合SDK服务端设计思路与架构之四:流程优化之信息安全与订单校验
有了前文几个步骤的分析和设计,TYPESDK的信息交互流程已经可以正常工作了,但是,这个流程还没有考虑到支付这样的过程中,至关重要的信息安全问题. 在整个交互过程中,游戏服务端,SDK服务端,渠道服务 ...