android 中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
以上所述是小编给大家介绍的android 中win10 使用uwp控件实现进度条marquez效果，希望对大家有所帮助