一、前言

在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滑块太小解决方案的更多相关文章

  1. WPF开发随笔收录-DataAnnotations实现数据校验(MVVM架构下)

    一.前言 在自己的项目中挺多地方需要涉及到数据验证的,初期的实现方式都是通过点击确定后再逐个验证数据是否符合要求,但这种方式会让后台代码变得很多很乱.于是就开始在网上需求好的解决方式,刚好看到了一个大 ...

  2. WPF开发随笔收录-DrawingVisual绘制高性能曲线图

    一.前言 项目中涉及到了心率监测,而且数据量达到了百万级别,通过WPF实现大数据曲线图时,尝试过最基础的Canvas来实现,但是性能堪忧,而且全部画出来也不实际.同时也尝试过找第三方的开源库,但是因为 ...

  3. WPF开发随笔收录-仿安卓Toast

    一.前言 在项目中,经常需要用到消息提醒功能,在以前接触安卓开发那会使用过Toast,于是打算在WPF上也来模仿一个,话不多说,撸起袖子干起来! 二.正文 1.首先新建一个工程,工程的目录如下 2.编 ...

  4. WPF开发随笔收录-带递增递减按钮TextBox

    一.前言 今天分享一下如何实现带递增递减按钮的TextBox控件 二.正文 1.之前的博客分享了一篇自定义XamlIcon控件的文章,这次就直接在那个项目的基础上实现今天这个自定义控件 2.首先添加两 ...

  5. WPF开发随笔收录-唯一标识符GUID

    一.前言 该系列博客用于记录本人在WPF开发过程中遇到的各种知识点 二.正文 1.在工作的项目中,软件需要用到在线升级功能,由于第一次弄,在下载服务端的文件到本地时,文件的名称我选择直接生成为固定的格 ...

  6. WPF开发随笔收录-WriteableBitmap绘制高性能曲线图

    一.前言 之前分享过一期关于DrawingVisual来绘制高性能曲线的博客,今天再分享一篇通过另一种方式来绘制高性能曲线的方法,也就是通过WriteableBitmap的方式:具体的一些细节这里就不 ...

  7. WPF开发随笔收录-心电图曲线绘制

    一.前言 项目中之前涉及到胎儿心率图曲线的绘制,最近项目中还需要添加心电曲线和血样曲线的绘制功能.今天就来分享一下心电曲线的绘制方式: 二.正文 1.胎儿心率曲线的绘制是通过DrawingVisual ...

  8. WPF开发随笔收录-获取软件当前目录的坑

    一.唠唠叨叨 软件开发过程中,经常需要使用到获取exe当前目录这个功能,前同事在实现这个需求时使用的是Directory.GetCurrentDirectory()这个方法,但再最近的测试中,突然发现 ...

  9. WPF开发随笔收录-报警闪烁效果实现

    一.前言 工作中目前经手的项目是医疗相关的监护软件,所以会涉及到一些报警效果的实现,今天在这里就简单分享一下实现方式 二.正文 1.实现的方式比较的简单,就是通过一个Border控件,然后搭配Data ...

随机推荐

  1. Java语言学习day01--6月28日

    Java语言学习day01一:Java概述 1.Java语言发展史 任职于太阳微系统的 詹姆斯·高斯林 等人于1990年代初开发Java语言的雏形,最初被命名为 Oak ,目标设置在 家用电器等小型系 ...

  2. Java语言学习day05--7月2日

    今日内容介绍1.引用类型变量的创建及使用2.流程控制语句之选择语句 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于引用数据类型,我们先了解下 ...

  3. python基础练习题(题目 判断101-200之间有多少个素数,并输出所有素数。)

    day7 --------------------------------------------------------------- 实例012:100到200的素数 题目 判断101-200之间 ...

  4. 清除安装的Rancher、K8s

    #清除主机的所有容器.挂载.镜像(慎用) docker stop $(docker ps -aq) docker system prune -f docker volume rm $(docker v ...

  5. 接口测试框架实战(一) | Requests 与接口请求构造

    1080×388 33.4 KB Requests 是一个优雅而简单的 Python HTTP 库,其实 Python 内置了用于访问网络的资源模块,比如urllib,但是它远不如 Requests ...

  6. 【MyBatis】多关键字的模糊查询

    目录 情景分析 题目 要求 相关代码 Mapper.java Impl.java mapper.xml test.java 思路分析 1.最开始,参数没有使用List,引起的问题 2.Mybatis的 ...

  7. VS Code 真的会一统江湖吗?

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 作者 | ROBEN KLEENE / 策划 | 万佳原文链接:https://blog.ro ...

  8. 审计 Linux 系统的操作行为的 5 种方案对比

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 很多时候我们为了安全审计或者故障跟踪排错,可能会记录分析 ...

  9. 新鲜出炉:appium2.0+ 单点触控和多点触控新的解决方案

    在 appium2.0 之前,在移动端设备上的触屏操作,单手指触屏和多手指触屏分别是由 TouchAction 类,Multiaction 类实现的. 在 appium2.0 之后,这 2 个方法将会 ...

  10. CTF简介

    最近在学习渗透测试,后来发现CTF很有趣,发现对学习有所帮助,于是找了几个网站,下面推荐几个我觉得不错的网站 https://www.ctfhub.com/#/index https://adworl ...