win10 uwp 进度条 Marquez
本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他。
如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 TextBlock 一个是进度条。
那么如何让 文字和左边的距离变化?使用 TranslateTransform
看起来 Marquez 的界面就是:
<ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="20"
VerticalAlignment="Stretch"></ProgressBar>
<TextBlock x:Name="scrohn" Text="100/100"
VerticalAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform X="0"></TranslateTransform>
</TextBlock.RenderTransform>
</TextBlock>
进度条的名字就是 Marquez ,写完界面,后台也不难
需要使用几个依赖属性设置最大值、当前值、最小值
/// <summary>
/// 标识 <see cref="Maximum" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
"Maximum", typeof(double), typeof(Marquez), new PropertyMetadata(100d, (s, e) =>
{
var t = s as Marquez;
if (t == null)
{
return;
}
Scrhrentran(t.scrohn, t.ActualWidth, t.Value, (double) e.NewValue, t.Mcdon);
}));
/// <summary>
/// 标识 <see cref="Minimum" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
"Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double)));
/// <summary>
/// 标识 <see cref="Value" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value", typeof(double), typeof(Marquez), new PropertyMetadata(20d, (s, e) =>
{
var t = s as Marquez;
if (t == null)
{
return;
}
Scrhrentran(t.scrohn, t.ActualWidth, (double) e.NewValue, t.Maximum, t.Mcdon);
}));
/// <summary>
/// 获取或设置
/// </summary>
public double Value
{
get { return (double) GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
/// <summary>
/// 获取或设置最小值
/// </summary>
public double Minimum
{
get { return (double) GetValue(MinimumProperty); }
set { SetValue(MinimumProperty, value); }
}
/// <summary>
/// 获取或设置最大值
/// </summary>
public double Maximum
{
get { return (double) GetValue(MaximumProperty); }
set { SetValue(MaximumProperty, value); }
}
所有值变化时,需要修改文字和进度条,因为进度条没有绑定值到代码,Scrhrentran 函数修改所有值。
为什么不使用绑定,因为绑定容易重复,而且有些值不是简单绑定就可以,这个控件使用绑定还是可以做到,如果自己感兴趣,可以修改他绑定。
从属性可以看到,值变化自动调用 Scrhrentran 于是函数需要修改进度条的值,修改进度条很简单,只需要使用下面代码
private static void Scrhrentran(TextBlock scrohn, double w, double v, double t, ProgressBar mcdon)
{
mcdon.Value = v;
mcdon.Maximum = t;
}
可以看到,上面的代码没修改最小值,因为最小值没有在依赖属性写,我不写最小值因为我想讲下如何获得依赖属性修改。
依赖属性是很好用的,他自己就带了绑定,如果想用绑定,那么可以使用依赖属性,依赖属性可以使用 dep 和tab打出来,一般的依赖属性是比较长的,最小值用的就是 vs 自带的依赖属性,也就是经常这样写。
/// <summary>
/// 标识 Minimum 的依赖项属性。
/// </summary>
public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
"Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double)));
/// <summary>
/// 获取或设置最小值
/// </summary>
public double Minimum
{
get { return (double) GetValue(MinimumProperty); }
set { SetValue(MinimumProperty, value); }
}
实际依赖属性是上面的静态属性,他使用了注册,注册的第一个参数表示变量的名字,因为是自己生成的,就是字符串,但是字符串有问题,如果我修改了 Minimum 名称,那么字符串就无法使用,为了在修改名称可以使用,我建议使用 nameof 这个可以获得变量名称。
其中第二个参数是 类型,第三个是类,这个参数指定是哪个类,如果复制了别人的 依赖属性,容易出错,因为他的类没有修改为自己的类。最后一个属性是指定默认值,在这个属性可以指定属性修改时的函数。
public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
"Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double), (s, e) =>
{
} ));
现在就可以在里面写属性修改的函数,第一个参数 s 是哪个触发,也就是 Marquez ,使用第一个参数就可以获得 Marquez,第二个参数是获得之前的值和当前的值,通过e.NewValue
可以获得修改后的值。
但是不可以通过这个函数修改 e.NewValue
的值。
于是这个控件比较难的地方就是修改文字,下面来开始做这部分。
显示文字可以使用下面代码
scrohn.Text = v.ToString("F") + "/" + t.ToString("F");
可以看到,只看代码是不知道 v 是什么, t 是什么,所以在命名时最好不要这样写,建议写为 value 和 maximum,这样看代码就可以知道两个值。
修改文字之前,判断RenderTransform
var sc = scrohn.RenderTransform as TranslateTransform;
在value为最大值,文字显示在中间,于是文字最大的就是 w / 2
,w就是控件宽度。但是还需要乘以现在的 v / t
于是算法就是 sc.X = w / 2 * v / t
,但是因为文字有宽度,显示的是文字左边,所以需要减去文字,但是可能让文字在控件看不到,因为sc.X < 0
,于是代码就是
sc.X = w / 2 * v / t - scrohn.ActualWidth / 2;
if (sc.X < 0)
{
sc.X = 0;
}
总的代码放在github:https://github.com/lindexi/UWP/tree/master/uwp/control/Progress
如果 想写一个控件,建议先在我的库找找,可能我做了,所以可以让你省点时间。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
win10 uwp 进度条 Marquez的更多相关文章
- win10 uwp 进度条 WaveProgressControl
昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做. 本文翻译 https://stackoverflow.com/a/46057 ...
- 2018-8-10-win10-uwp-进度条-Marquez-
原文:2018-8-10-win10-uwp-进度条-Marquez- title author date CreateTime categories win10 uwp 进度条 Marquez li ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- Win10的UWP之进度条
原文:Win10的UWP之进度条 关于UWP的进度条的处理的方案有两种方案 我们新建一个项目,然后处理的界面如下的代码 <Grid.RowDefinitions> <RowDefin ...
- win10 uwp 异步进度条
本文主要讲我设计的几个进度条,还有如何使用异步控制进度条,如何使用动画做进度. 进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal- ...
- win10系统更新补丁时进度条一直卡在0%不动的解决方案
为了能够让win10系统更加安全稳定,很多用户都会时不时为自己的电脑安装补丁.不过,部分用户在为win10系统更新补丁时,却会遇到进度条一直卡在0%不动的问题.这该怎么办呢?下面,小编就告诉大家解决该 ...
- uwp,c#,mediaElement与slider进度条绑定
虽然微软uwp官方已停止对传统媒体控件mediaElement的update,新控件为mediaPlayerElement和mediaPlayer[官方word:https://docs.micros ...
- win10 uwp 商业游戏
本文告诉大家去做一个商业游戏,游戏很简单,几乎没有什么技术 游戏的开始,需要添加框架库,于是引用我自己写的库. 首先是创建一个启动页面,这个页面是显示启动的. 在显示启动的时候,是需要加载游戏需要使用 ...
- 2018-2-13-win10-uwp-异步进度条
title author date CreateTime categories win10 uwp 异步进度条 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17 ...
随机推荐
- 201521123082《Java程序设计》第3周学习总结
201521123082<Java程序设计>第3周学习总结 标签(空格分隔): Java 1.本周学习总结 XMind图: 2.书面作业 Q1.代码阅读 public class Test ...
- 201521123077 《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- 201521123023《java程序设计》第三周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 预防黑客入侵 防黑必学的cmd命令vs网络安全
这些命令又可*********三类:网络检测(如ping).网络连接(如telnet)和网络配置(如netsh).前面两种相对简单,本文只介绍两个网络配置工具.自带的关于网络的命令行工具很多,比如大家 ...
- Android Studio不更新到最新版使用Kotlin
第一步:安装Kotlin插件 打开Settings面板,找到Plugins选项,点击Browse repositories(浏览仓库),输入“Kotlin”查找,然后安装即可.安装完成之后需要重启An ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- python之socket--粘包补充
struct补充 import struct import json header_dic={'total_size':123123, 'filename':None, 'md5':None} hea ...
- 内置open()函数对外部文件的操作
>>> file=open('c://333.csv','r') 一些基本打开关闭操作 >>> s=file.read() >>> print s ...
- POJ--3172 Scales (DFS 大容量背包 C++)
Scales Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3148 Accepted: 851 Description ...
- MySQL集群(二)之主主复制
前面介绍了主从复制,这一篇我将介绍的是主主复制,其实听名字就可以知道,主主复制其实就是两台服务器互为主节点与从节点.接下来我将详细的给大家介绍,怎么去配置主主复制! 一.主从复制中的问题 1.1.从节 ...