关闭

win10 uwp 进度条 Marquez

标签: uwpwin10进度条uwp控件uwp入门
1654人阅读 评论(1) 收藏 举报
分类:

本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他。


如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 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 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

2
0
查看评论

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。
  • lindexi_gd
  • lindexi_gd
  • 2017-09-10 16:28
  • 1356

Win10的UWP之进度条

关于UWP的进度条的处理的方案有两种方案 我们新建一个项目,然后处理的界面如下的代码<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowD...
  • zhongyanfu0
  • zhongyanfu0
  • 2016-07-21 19:39
  • 1240

win10 uwp 异步进度条

本文主要讲我设计的几个进度条,还有如何使用异步控制进度条,如何使用动画做进度。进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal-progress-dialog进度条其实异步就是使用后台变化,然后value绑定我使用一个Progre...
  • lindexi_gd
  • lindexi_gd
  • 2016-09-19 10:30
  • 2512

win10 uwp 入门

UWP是什么我在这里就不说,本文主要是介绍如何入门UWP,也是合并我写的博客。
  • lindexi_gd
  • lindexi_gd
  • 2016-07-27 08:55
  • 4434

win10 UWP 应用设置

win10 UWP 应用设置 简单的把设置需要的,放到微软自带的LocalSettings LocalSettings.Values可以存放几乎所有数据 如果需要存放复合数据,一个设置项是由多个值组成,可以使用ApplicationDataCompositeValue将多个合并。 存放一个st...
  • lindexi_gd
  • lindexi_gd
  • 2016-01-12 21:01
  • 2359

win10 uwp 毛玻璃

毛玻璃在UWP很简单,不会和WPF那样伤性能。 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃。毛玻璃可以使用 win2D 方法,也可以使用 Compositor 。使用 win2d 得到软件内控件毛玻璃,而使用 Compositor 可以获得窗口毛玻璃。
  • lindexi_gd
  • lindexi_gd
  • 2017-06-19 09:12
  • 2414

win10 uwp iot

这篇文章主要译: https://msdn.microsoft.com/magazine/mt694090 有很多都是胡说,随便喷,但我不会理。
  • lindexi_gd
  • lindexi_gd
  • 2016-04-24 08:13
  • 5894

解决 Win10 UWP 无法使用 ss 连接

一旦使用了 ss, 那么很多应用就无法连接网络。 本文提供一个方法可以简单使用ss提供的代理
  • lindexi_gd
  • lindexi_gd
  • 2017-04-26 09:12
  • 5131

win10 uwp 获取按钮鼠标左键按下

我们可以使用`PointerPressed`获得鼠标右键按下,但是我们如何获得左键?
  • lindexi_gd
  • lindexi_gd
  • 2016-12-29 09:37
  • 2467

uwp开发:Slider控件和MediaElement绑定,实现拖动播放.

1、实现原理: Slider拖动时,Value值改变,MediaElement播放时,Position值改变。所以,只需将Slider的Value属性和MediaElement的Position属性进行绑定即可。 2、实现方法: Slider的Value属性是double类型的,而...
  • xuzhongxuan
  • xuzhongxuan
  • 2016-12-11 20:06
  • 760
    个人资料
    • 访问:632342次
    • 积分:9247
    • 等级:
    • 排名:第2400名
    • 原创:242篇
    • 转载:16篇
    • 译文:25篇
    • 评论:240条
    博客专栏
    文章分类
    最新评论