`
lindexi-gd
  • 浏览: 139506 次
社区版块
存档分类
最新评论

win10 uwp 按下等待按钮

 
阅读更多

我们经常需要一个按钮,在按下时,后台执行Task,这时不能再次按下按钮。

<!--more-->

我们使用自定义控件,首先新建一个类,我把它命名是ProgressButton

一个进度条按钮,也就是我们按下时发生进度条,完成时他又是按钮。

我们需要一个值让我们知道是不是已经完成了后台,按钮可以按下,在按下时,自动让按钮IsEnable为false。

我们需要模板有TextBlock,显示文字,ProgressRing显示进度条。

于是我们使用TemplatePart

    [TemplatePart(Name = "TextBlock", Type = typeof(TextBlock))]
    [TemplatePart(Name = "Progress", Type = typeof(Windows.UI.Xaml.Controls.ProgressRing))]
    public class ProgressButton : Windows.UI.Xaml.Controls.Button

依赖属性其实很简单,我们需要在VS上大propdp 按Tab 就可以看到vs帮我们写的依赖属性。

我们需要修改属性名称,属性类型,默认值。

我这里的Text ,需要他修改时使用函数,这个叫CallBack。

依赖函数使用DependencyProperty.Register

他参数: name 是 属性名, propertyType 是属性类型, ownerType 是属于的类的类型, typeMetadata 是默认值和修改时使用函数

我们来说下 typeMetadata

typeMetadata 可以传入一个默认值,这个值就是我们不在依赖属性赋值,就给他一个默认的值。然后我们还可以给他一个在属性修改时使用的函数。

注意我们给他的函数不是必需,一般都不需要。

如果需要给他一个函数,这个函数需要有参数DependencyObject sender, DependencyPropertyChangedEventArgs e

其中 sender 是发送的实例,我们知道属性属于哪个类,我在这里,是属于ProgressButton ,我就可以使用 ProgressButton button = sender as ProgressButton;得到类,注意我们写的函数是静态的,所以sender才有用,我们可以使用sender获得类的属性

e 是有 NewValue 和 OldValue , NewValue 是我们要修改的值, OldValue 是原来的值。

大概需要的依赖属性在我们这个控件有 Text Complete 就没了。

Text是我们按钮的文字,Complete 是我们的后台是不是在执行,如果是的话,按钮就无法点击,显示进度条。

代码:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace lindexi.uwp.control.Button.Control
{
    [TemplatePart(Name = "TextBlock", Type = typeof(TextBlock))]
    [TemplatePart(Name = "Progress", Type = typeof(Windows.UI.Xaml.Controls.ProgressRing))]
    public class ProgressButton : Windows.UI.Xaml.Controls.Button
    {
        public ProgressButton()
        {
            DefaultStyleKey = typeof(ProgressButton);
            Click += ProgressButton_Click;
        }

        private void ProgressButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Complete = false;
        }

        private Windows.UI.Xaml.Controls.TextBlock _textBlock;

        private Windows.UI.Xaml.Controls.ProgressRing _proress;

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(ProgressButton), new PropertyMetadata("",
                (d, e) =>
                {
                    ProgressButton temp = d as ProgressButton;
                    if (temp == null)
                    {
                        return;
                    }
                    if(temp._textBlock!=null)
                    {
                        temp._textBlock.Text = (string) e.NewValue;
                    }
                }));



        public bool Complete
        {
            get { return (bool)GetValue(CompleteProperty); }
            set { SetValue(CompleteProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Complete.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty CompleteProperty =
            DependencyProperty.Register("Complete", typeof(bool), typeof(ProgressButton), new PropertyMetadata(true,
                OnComplete));

        private static void OnComplete(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ProgressButton button = d as ProgressButton;
            if (button == null)
            {
                return;
            }

            bool temp = (bool)e.NewValue;


            //button._textBlock.Visibility = temp ? Visibility.Visible : Visibility.Collapsed;
            button._proress.Visibility = temp ? Visibility.Collapsed : Visibility.Visible;
            button.IsEnabled = temp;
        }



        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _textBlock = GetTemplateChild("TextBlock") as Windows.UI.Xaml.Controls.TextBlock;
            _proress = GetTemplateChild("Progress") as Windows.UI.Xaml.Controls.ProgressRing;

            if (_textBlock != null)
            {
                _textBlock.Visibility = Visibility.Visible;
                _textBlock.Text = Text;
            }

            if (_proress != null)
            {
                _proress.Visibility=Visibility.Collapsed;
            }
        }
    }
}

我们在控件 OnApplyTemplate 拿到 _textBlock _proress 我们需要写一个Style

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:control="using:lindexi.uwp.control.Button.Control">
    <Style TargetType="control:ProgressButton">
        <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding" Value="8,4,8,4"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="UseSystemFocusVisuals" Value="True"/>
        <Setter Property="FocusVisualMargin" Value="-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="control:ProgressButton">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"></DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"></DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" 
                                          AutomationProperties.AccessibilityView="Raw" 
                                          BorderBrush="{TemplateBinding BorderBrush}" 
                                          BorderThickness="{TemplateBinding BorderThickness}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          Content="{TemplateBinding Content}" 
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Padding="{TemplateBinding Padding}" 
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <TextBlock x:Name="TextBlock" Margin="10,10,10,10"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"></TextBlock>
                        <ProgressRing x:Name="Progress" IsActive="True"></ProgressRing>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

这个是从Button复制,就改了Button为 control:ProgressButton

我们要使用按钮,需要在资源写

    <Page.Resources>
        <ResourceDictionary Source="Control/ProgressButton.xaml"></ResourceDictionary>
    </Page.Resources>

然后就可以使用 ProgressButton ,我写ProgressButton在control文件夹,我需要在命名空间xmlns:control="using:lindexi.uwp.control.Button.Control"

 <control:ProgressButton Text="确定"
                                 Complete="{x:Bind View.Complete,Mode=TwoWay}"
                                 Click="ButtonBase_OnClick"></control:ProgressButton>

我上面是测试,点击是进行100秒,过了就完成,代码简单,如果想知道,戳此链接 https://github.com/lindexi/UWP/tree/master/uwp/control/Button

那么如果我们有好多个页面都用到 ProgressButton ,我们需要在所有页面都写 ResourceDictionary 这样不好,我们有一个简单方法,让页面不用写这个。

在解决方案新建一个文件夹Themes,注意命名一定是Themes,注意有个名称后面有个s,我就在这坑好多天了。

然后新建资源字典 Generic.xaml ,注意名称也是不能自己修改。

在 Generic.xaml 合并字典

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ms-appx:///Control/ProgressButton.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>

这样我们就可以在页面直接用。

如果使用遇到问题,欢迎讨论。

参见:http://www.cnblogs.com/ms-uap/p/5520872.html

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
分享到:
评论

相关推荐

    Win10下通过UWP刷新WIFI

    下面我们将深入探讨如何在Win10下通过UWP实现这些功能。 首先,我们需要了解UWP(Universal Windows Platform)是微软为Windows 10推出的一种跨设备的应用程序开发框架。它允许开发者编写一次代码,就能在各种...

    Win10 UWP应用代理工具

    全选设置之后UWP即可访问localhost,可以走代理。

    Win10 UWP 开发教程 课程 资源

    Win10 UWP 开发教程 课程 资源 80课时 课程地址:http://blog.csdn.net/shanguuncle/article/details/78111649

    win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子

    总结来说,"win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子"提供了一个实际操作的平台,让开发者学习如何在UWP环境中利用MVVM模式进行开发。通过分析和实践这个框架,你将能够更好地理解MVVM的工作原理,以及如何...

    C#实现win10 uwp 右击浮出窗在点击位置

    在Windows 10 UWP应用开发中,常常需要创建一种用户友好的交互方式,即当用户右键点击某个元素时,能在一个特定的位置显示一个浮出菜单(MenuFlyout)。本篇文章将详细介绍如何使用C#实现这样的功能,使得MenuFlyout...

    win10 uwp 使用 asp dotnet core 做图床服务器客户端

    在本文中,我们将探讨如何利用Windows 10的UWP(通用Windows平台)应用程序与ASP.NET Core构建一个图床服务器的客户端。这是一个涉及到跨平台开发和云端图像存储管理的项目,旨在提供一种高效且灵活的方式来上传和...

    win10 moblie uwp qq5.6.1150.1000

    win10 moblie uwp qq5.6.1150.1000主程序,不含依赖程序

    win10 moblie uwp 越飞阅读1.4.68.0

    win10 moblie uwp 越飞阅读1.4.68.0主程序,不含依赖程序

    lindexi#lindexi#2020-10-28-win10-uwp-字符文本转语音声音文件方法1

    title: "win10 uwp 字符文本转语音声音文件方法"在 UWP 中,支持将传入的字符串文本内容转换为音频语音,可以将这个语音声音通过 MediaEl

    WindowsStore_LTSC2019,LTSC 自动恢复 win10 应用商店

    但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上...

    WindowsStore_LTSC2019,LTSC自动恢复win10应用商店

    但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上安装...

    uwp开发-demoHelloworld源码

    【描述】提到的"一个uwp开发源码,可以移植到一切win10系统"意味着该项目遵循了UWP的跨平台特性,使得开发者能够在不同类型的Windows 10设备上部署和运行同一套代码。UWP是微软为了统一Windows生态而推出的新开发...

    lindexi#lindexi.github.io#win10 uwp 使用 AppCenter 自动构建1

    首先打开 使用微软的账号或 github 账号登陆点击 add new 添加一个 UWP 程序,需要写出 app 的

    Sound Blaster Connect的uwp版独立安装包

    此安装包为win10的uwp版应用软件Sound Blaster Connect,有需要的朋友可以去下载下来

    lindexi#lindexi.github.io#win10 uwp 异步转同步1

    如果需要反过来,把同步转异步,可以使用 同步方法转异步写你的代码使用Task.Wait 时需要小心死锁不会出现死锁的代码使用Task.Delay等待即使使用方法

    win10应用商店uwp安装包

    win10应用商店安装包,Microsoft.WindowsStore_11804.1001.913.0_neutral_~_8wekyb3d8bbwe,可用于不带应用商店的安装

    Win10 资源管理器替代工具 FilesUWP 1.5.0.0 中文免费版.zip

    借助 Windows Explorer 上的这种现代 UWP,以更有效,更令人满意的方式管理文件 我们认为我们大多数人都可以同意 Windows 10 是迄今为止 Microsoft 操作系统的最佳版本,尽管它具有各种可感知的或多或少的主观缺点...

    Uwp中的换肤

    在UWP(Universal Windows Platform)应用开发中,换肤功能是一项重要的用户体验设计,它允许用户根据个人喜好更改应用的主题色、背景图片等视觉元素,从而提升应用的个性化和吸引力。UWP的换肤通常涉及到以下几个...

    Python-微软已经引入了一项开源UWP社区工具包帮助开发者通过Win10SDK进行互相合作

    微软推出的开源UWP社区工具包(Windows Community Toolkit)是一个关键的资源,它旨在简化和加速开发流程,使得开发者能够更高效地利用Win10 SDK进行编程。 UWP社区工具包是一个集合了各种辅助工具、组件和示例代码...

    通用 Windows 平台 (UWP) 应用指南

    Windows10 引入了通用 Windows 平台 (UWP),这进一步推动了 Windows 运行时模型的发展,并将该平台引入到 Windows 10 统一核心版 中。作为核心版的一部分,UWP 现提供了一个可供在每个运行 Windows 10 的设备上使用...

Global site tag (gtag.js) - Google Analytics