WPF开发随笔收录-ScrollViewer滑块太小解决方案
一、前言
在WPF开发过程中,ScrollViewer是一个很常使用到的控件,在自己工作的项目中,收到一个反馈就是当ScrollViewer里面的内容太长时,滚动条的滑块就会变得很小,然后导致点击起来不太友好。一开始想着是通过在样式里面设置滑块的最小值,但都没法生效。最后换了一个思路来,通过把原有的滑块隐藏,然后自己加一个控件来充当滑块来间接控制ScrollViewer的滚动。
二、正文
1、这里就直接拿之前写的那个曲线图控件来进行演示,当曲线图的数据很多时,滑块就会显得很小个,现在实在默认样式情况下,如果在自定义的样式情况下很更小
2、这里就直接在曲线图的顶层放置了一个Canvas,添加一个Border来充当滑块,注意这里将整个Canvas覆盖再曲线图上,是因为我还添加了可以直接点击曲线图拖拽移动的功能,然后将ScrollViewer的滑块隐藏,设置好滑块的最小宽度和高度,默认隐藏
<Grid>
<local:CruveDrawingVisual x:Name="curve" Margin="0,10,0,15" />
<ScrollViewer
Name="scroll"
HorizontalScrollBarVisibility="Hidden"
ScrollChanged="ScrollViewer_ScrollChanged"
VerticalScrollBarVisibility="Disabled">
<Canvas x:Name="canvas" />
</ScrollViewer>
<Canvas x:Name="CurvePanel" Background="Transparent">
<Border
x:Name="border"
Canvas.Left="0"
Canvas.Bottom="0"
Height="15"
MinWidth="80"
Background="Green"
PreviewMouseLeftButtonDown="Border_PreviewMouseLeftButtonDown"
Visibility="Collapsed" />
</Canvas>
</Grid>
3、接着再后台添加对应的逻辑处理代码,详细的一些东西都已经通过备注的形式写在代码里,这里就不在啰嗦了
public partial class MainWindow : Window
{
private bool isAdd = true;
private List<int> lists = new List<int>(); private Point point_border; private double offset = -1; public MainWindow()
{
InitializeComponent(); CurvePanel.MouseMove += delegate (object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
if (Mouse.Captured == null) Mouse.Capture(CurvePanel); //拖动滑块
if (isBorder)
{
Point point = e.GetPosition(this);
//鼠标超出控件左边缘
if (point.X - point_border.X <= 0)
{
scroll.ScrollToHorizontalOffset(0);
}
//鼠标超出控件右边缘
else if (point.X - point_border.X >= CurvePanel.ActualWidth - border.ActualWidth)
{
scroll.ScrollToHorizontalOffset(lists.Count - CurvePanel.ActualWidth);
}
//鼠标在控件区间
else if (point.X - point_border.X > 0 && point.X - point_border.X < CurvePanel.ActualWidth - border.ActualWidth)
{
double left = point.X - point_border.X;
scroll.ScrollToHorizontalOffset((lists.Count - CurvePanel.ActualWidth) / (CurvePanel.ActualWidth - border.ActualWidth) * left);
}
}
//拖动画布
else
{
if (offset >= 0 && offset <= CurvePanel.ActualWidth)
{
scroll.ScrollToHorizontalOffset(scroll.HorizontalOffset - (e.GetPosition(this).X - offset));
}
offset = e.GetPosition(this).X;
}
}
else
{
offset = -1;
isBorder = false;
Mouse.Capture(null); // 释放鼠标捕获
}
};
} private void Window_Loaded(object sender, RoutedEventArgs e)
{
int temp = 20;
for (int i = 0; i < 24 * 60 * 60 * 2; i++)
{
if (isAdd)
{
lists.Add(temp);
temp += 2;
}
else
{
lists.Add(temp);
temp -= 2;
} if (temp == 280) isAdd = false;
if (temp == 20) isAdd = true;
}
canvas.Width = lists.Count;
//判断是否显示滑块
if (canvas.Width > CurvePanel.ActualWidth)
{
border.Visibility = Visibility.Visible;
//根据ScrollViewer内容的比例计算滑块的宽度
border.Width = CurvePanel.ActualWidth * CurvePanel.ActualWidth / canvas.Width;
}
else
{
border.Visibility = Visibility.Collapsed;
}
curve.SetupData(lists);
} private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
curve.OffsetX(scroll.HorizontalOffset); Canvas.SetLeft(border, scroll.HorizontalOffset / ((lists.Count - CurvePanel.ActualWidth) / (CurvePanel.ActualWidth - border.ActualWidth)));
} private bool isBorder = false;
private void Border_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
isBorder = true;
//获取鼠标点击滑块上的位置
point_border = e.GetPosition(border);
}
}
4、运行效果如下
WPF开发随笔收录-ScrollViewer滑块太小解决方案的更多相关文章
- WPF开发随笔收录-DataAnnotations实现数据校验(MVVM架构下)
一.前言 在自己的项目中挺多地方需要涉及到数据验证的,初期的实现方式都是通过点击确定后再逐个验证数据是否符合要求,但这种方式会让后台代码变得很多很乱.于是就开始在网上需求好的解决方式,刚好看到了一个大 ...
- WPF开发随笔收录-DrawingVisual绘制高性能曲线图
一.前言 项目中涉及到了心率监测,而且数据量达到了百万级别,通过WPF实现大数据曲线图时,尝试过最基础的Canvas来实现,但是性能堪忧,而且全部画出来也不实际.同时也尝试过找第三方的开源库,但是因为 ...
- WPF开发随笔收录-仿安卓Toast
一.前言 在项目中,经常需要用到消息提醒功能,在以前接触安卓开发那会使用过Toast,于是打算在WPF上也来模仿一个,话不多说,撸起袖子干起来! 二.正文 1.首先新建一个工程,工程的目录如下 2.编 ...
- WPF开发随笔收录-带递增递减按钮TextBox
一.前言 今天分享一下如何实现带递增递减按钮的TextBox控件 二.正文 1.之前的博客分享了一篇自定义XamlIcon控件的文章,这次就直接在那个项目的基础上实现今天这个自定义控件 2.首先添加两 ...
- WPF开发随笔收录-唯一标识符GUID
一.前言 该系列博客用于记录本人在WPF开发过程中遇到的各种知识点 二.正文 1.在工作的项目中,软件需要用到在线升级功能,由于第一次弄,在下载服务端的文件到本地时,文件的名称我选择直接生成为固定的格 ...
- WPF开发随笔收录-WriteableBitmap绘制高性能曲线图
一.前言 之前分享过一期关于DrawingVisual来绘制高性能曲线的博客,今天再分享一篇通过另一种方式来绘制高性能曲线的方法,也就是通过WriteableBitmap的方式:具体的一些细节这里就不 ...
- WPF开发随笔收录-心电图曲线绘制
一.前言 项目中之前涉及到胎儿心率图曲线的绘制,最近项目中还需要添加心电曲线和血样曲线的绘制功能.今天就来分享一下心电曲线的绘制方式: 二.正文 1.胎儿心率曲线的绘制是通过DrawingVisual ...
- WPF开发随笔收录-获取软件当前目录的坑
一.唠唠叨叨 软件开发过程中,经常需要使用到获取exe当前目录这个功能,前同事在实现这个需求时使用的是Directory.GetCurrentDirectory()这个方法,但再最近的测试中,突然发现 ...
- WPF开发随笔收录-报警闪烁效果实现
一.前言 工作中目前经手的项目是医疗相关的监护软件,所以会涉及到一些报警效果的实现,今天在这里就简单分享一下实现方式 二.正文 1.实现的方式比较的简单,就是通过一个Border控件,然后搭配Data ...
随机推荐
- Go xmas2020 学习笔记 11、io.Reader
11-Homework #2. 11-Reader. Reader interface. NewReader func. Reader Struct. Len .Size,Read func. Pra ...
- Sql语言-操作表
2. 操作表 1. C(Create):创建 1. 语法: create table 表名( 列名1 数据类型1, 列名2 数据类型2, .... 列名n 数据类型n ); * 注意:最后一列,不需要 ...
- svelte组件:svelte3自定义桌面PC端对话框组件svelte-layer
基于Svelte3.x开发pc网页版自定义弹窗组件svelteLayer. svelte-layer:基于svelte.js轻量级多功能pc桌面端对话框组件.支持多种弹窗类型.30+参数随意组合配置, ...
- Vim 中进行文本替换
Vim 中进行文本替换 格式 用法 :[range]s/from/to/[flags] tips: [] 表示该内容可选 参数 from 需要替换的字符串(可以是正则表达式) to 替换后的字符串 r ...
- 《手把手教你》系列基础篇(九十四)-java+ selenium自动化测试-框架设计基础-POM设计模式实现-下篇(详解教程)
1.简介 上一篇宏哥用PageFactory实现了POM,宏哥再介绍一下如果不用PageFactory如何实现POM. 2.项目实战 在这里宏哥以百度首页登录的例子,如果用POM实现,在测试脚本中实际 ...
- url路径匹配类
AntPathMatcher 1.AntPathMatcher类匹配URL规则如下 ?匹配一个字符 * 匹配0个或多个字符 * *匹配0个或多个目录 2.例子 /trip/api/*x 匹配 / ...
- XCTF练习题---MISC---misc_pic_again
XCTF练习题---MISC---misc_pic_again flag:hctf{scxdc3tok3yb0ard4g41n~~~} 解题步骤: 1.观察题目,下载附件 2.拿到手是一张图片,直接上 ...
- 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- LINUX系统虚拟机环境的安装
安装VM和Centos Step 1 去BIOS里修改设置开启虚拟化设备支持 设置BIOS: 1.开机按F2.F12.DEL.ESC等进入BIOS,一般来说可以看屏幕的左下角有提示按键进入BIOS,进 ...
- Linux系统inodes资源耗尽问题
1 inodes介绍 Linux系统下文件数据储存在"块"中,文件的元信息,例如文件的创建者.文件的创建日期.文件的大小等.这种储存文件元信息的区域就叫做inode,中文译名为&q ...