首页 > 其他分享 >WPF自定义控件实战:自制上传文件显示进度按钮

WPF自定义控件实战:自制上传文件显示进度按钮

时间:2023-08-12 21:22:34浏览次数:47  
标签:控件 自定义 MyProgressButton 按钮 new WPF btn 上传

自定义控件在WPF开发中是很常见的,有时候某些控件需要契合业务或者美化统一样式,这时候就需要对控件做出一些改造。

 

目录

 

话不多说直接看效果

默认效果:
image
上传效果:

image
image

按钮设置圆角

因为按钮本身没有CornerRadius属性,所以只能重写Button的控件模板。

<Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5"
                            Width="{TemplateBinding Width}"
                            Background="{TemplateBinding Background}"
                            BorderThickness="1"
                            Height="{TemplateBinding Height}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在按钮的模板中加入一个Border即可,但是按钮本身没有CornerRadius属性,就没办法使用TemplateBinding ,只能写死在样式,那肯定不行,所以我们就需要拓展一下Button按钮。

1.创建一个类MyProgressButton继承Button类,由于是新创建的一个类,所以我们可以直接使用依赖属性来完成这件事,在MyProgressButton中定义一个圆角弧度的依赖属性。

public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(MyProgressButton), new PropertyMetadata(default));

2.创建一个ProgressButtonStyle.xaml的资源文件,针对MyProgressButton定义一些样式,包括弧度的绑定和鼠标移入移出的阴影效果,让我们的按钮立体起来

<Style TargetType="local:MyProgressButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyProgressButton">
                    <Border CornerRadius="{TemplateBinding CornerRadius}"
                            Width="{TemplateBinding Width}"
                            Background="{TemplateBinding Background}"
                            BorderThickness="1"
                            Height="{TemplateBinding Height}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect Color="#cccccc" Direction="270" ShadowDepth="2" Opacity="1" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Effect" >
                    <Setter.Value>
                        <DropShadowEffect Color="#bbbbbb" Direction="270" ShadowDepth="2" Opacity="1" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

3.最后在主界面将MyProgressButton的命名控件加入进来,并且用xaml创建一个MyProgressButton按钮,自定义一些属性,并且将ProgressButtonStyle.xaml样式加入到App.xaml中

<Window x:Class="ProgressButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ProgressButton"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:MyProgressButton Content="上传文件" 
                                Foreground="#555555"
                                Cursor="Hand"
                                FontSize="14"
                                CornerRadius="5"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Height="40" Width="135" 
                                Background="Salmon"
                                x:Name="upload_btn">
        </local:MyProgressButton>
    </Grid>
</Window>

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/ProgressButton;component/Button/ProgressButtonStyle.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

看看效果:
image

按钮上传文件相关定义

1.定义按钮类型MyProgressButton文件上传进度,是否上传,以及上传时按钮背景色三个依赖属性

/// <summary>
        /// 文件上传进度
        /// </summary>
        public double Progress
        {
            get { return (double)GetValue(ProgressProperty); }
            set { SetValue(ProgressProperty, value); }
        }

        public static readonly DependencyProperty ProgressProperty =
            DependencyProperty.Register(nameof(Progress), typeof(double), typeof(MyProgressButton), new PropertyMetadata(double.NegativeZero, OnProgressChanged));

        /// <summary>
        /// 文件是否上传
        /// </summary>
        public bool IsUploading
        {
            get { return (bool)GetValue(IsUploadingProperty); }
            set { SetValue(IsUploadingProperty, value); }
        }

        public static readonly DependencyProperty IsUploadingProperty =
            DependencyProperty.Register(nameof(IsUploading), typeof(bool), typeof(MyProgressButton), new PropertyMetadata(false, OnIsUploadingChanged));

        /// <summary>
        /// 上传时按钮背景色
        /// </summary>
        public Color UploadingColor
        {
            get { return (Color)GetValue(UploadingColorProperty); }
            set { SetValue(UploadingColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for UploadingColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty UploadingColorProperty =
            DependencyProperty.Register(nameof(UploadingColor), typeof(Color), typeof(MyProgressButton), new PropertyMetadata(Colors.White));

2.如何实现按钮内部的进度显示?有几种办法,比如使用渐进色修改偏移,或者按钮内部套一个进度条,或者按钮内部放两个不同颜色的块控件,动态修改两者的长度。我们选择第一种。

在Progress属性被修改的时候,我们动态修改下按钮内部渐进色的偏移。为ProgressProperty添加值变化的回调。

private static void OnProgressChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var btn = d as MyProgressButton;
            var progress = (double)e.NewValue;
            if (progress != double.NegativeZero)
            {
                Brush brush = null;
                if ((brush = btn.Background as LinearGradientBrush) != null) //如果按钮本身是线性渐变色则直接修改偏移
                {
                    GradientStopCollection collections =
                        brush.GetValue(GradientBrush.GradientStopsProperty) as GradientStopCollection;

                    collections[1].Offset = collections[0].Offset = progress / 100;
                }
                else //如果本身不是线性渐变色则将背景色修改为线性渐变色
                {
                    LinearGradientBrush linearGradientBrush = new LinearGradientBrush();
                    //设置一个横向的线
                    linearGradientBrush.StartPoint = new Point(0, 0.5);
                    linearGradientBrush.EndPoint = new Point(1, 0.5);

                    GradientStop gradientStop = new GradientStop(); //右边的颜色,即按钮设置的上传时背景色
                    gradientStop.Color = btn!.UploadingColor;

                    GradientStop gradientStop1 = new GradientStop();//左边的颜色,即按钮原本的颜色
                    gradientStop1.Color = (btn!.Background as SolidColorBrush)!.Color;

                    gradientStop.Offset = gradientStop1.Offset = progress / 100;

                    linearGradientBrush.GradientStops.Add(gradientStop1);
                    linearGradientBrush.GradientStops.Add(gradientStop);
                    btn.Background = linearGradientBrush;
                }
            }
        }

在上传文件的时候,将按钮置为禁用,防止重复点击。写一个IsUploadingProperty属性的值变化的回调。

private static void OnIsUploadingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var btn = d as MyProgressButton;
            if ((bool)e.NewValue)
            {
                btn!.IsEnabled = false;
            }
            else
            {
                btn!.IsEnabled = true;
            }
        }
测试代码
Binding binding = new Binding();
            binding.Source = this;
            binding.Path = new PropertyPath("Progress");
            binding.Mode = BindingMode.OneWay;
            upload_btn.SetBinding(MyProgressButton.ProgressProperty, binding);

            Binding binding1 = new Binding();
            binding1.Source = this;
            binding1.Path = new PropertyPath("IsUploading");
            binding1.Mode = BindingMode.OneWay;
            upload_btn.SetBinding(MyProgressButton.IsUploadingProperty, binding1);
private async void upload_btn_Click(object sender, RoutedEventArgs e)
        {
            IsUploading = true;
            try
            {
                using (FileStream fread = new FileStream("d://d3dcompiler_47.dll", FileMode.Open, FileAccess.Read))
                using (FileStream fwrite = new FileStream("d://d3dcompiler_47_copy.dll", FileMode.OpenOrCreate, FileAccess.Write))
                {
                    var allLength = new FileInfo("d://d3dcompiler_47.dll").Length;
                    long copyedBytes = 0;
                    while (true)
                    {
                        var buffer = ArrayPool<byte>.Shared.Rent(1024 * 10);
                        try
                        {
                            var len = await fread.ReadAsync(buffer, 0, buffer.Length);
                            if (len > 0)
                            {
                                await fwrite.WriteAsync(buffer[..len]);
                                copyedBytes += len;
                                Progress = copyedBytes * 100 / allLength;
                                await Task.Delay(20);
                            }
                            else
                            {
                                break;
                            }
                        }
                        catch { break; }
                        finally
                        {
                            ArrayPool<byte>.Shared.Return(buffer);
                        }
                    }

                    MessageBox.Show("上传成功");
                };
            }
            finally
            {
                IsUploading = false;
            }
        }

 

出处:https://www.cnblogs.com/qwqwQAQ/p/17473005.html

标签:控件,自定义,MyProgressButton,按钮,new,WPF,btn,上传
From: https://www.cnblogs.com/mq0036/p/17625550.html

相关文章

  • 基于scheduler framework开发自定义调度器
    k8sv1.19.0基于schedulerframework开发插件,本质上是实现接口。下载代码mkdirsigs.k8s.iocdsigs.k8s.iogitclonehttps://github.com/kubernetes-sigs/scheduler-plugins.gitcdscheduler-pluginsgitcheckoutrelease-1.19新增代码pkg目录下新增label_a_b目录packag......
  • Odoo12_自定义导出excel
    1.首先按钮或者菜单出发一个后端方法返回url动作defdownload_xxx_excel(self):url='/export_xxx_excel?id={self.id}return{'type':'ir.actions.act_url','url':url,'tar......
  • Qt自定义控件之动画文本
    @TOC前言在Qt中,自定义控件可以让我们实现丰富的用户界面效果和交互体验。其中,动画文本是一种常见的效果,通过文本的动态变化可以吸引用户的注意力,增强用户体验。本文将介绍如何使用Qt实现一个动画文本的自定义控件,让你的应用程序更加生动活泼。一、动画文本的效果功能实现:基础功......
  • 在传奇游戏界面添加或删除自定义功能按钮
    本教程是以HERO引擎和非凡登录器(原猎鹰登录器)为例进行示范,其他引擎请自行进行测试,。自定义功能按钮就是在游戏界面中处于小地图,组队等按钮上面的一排可自定义进行功能设置的按钮,如图中所示,用方框选中的就是想要达到的效果。以下是具体添加方法:首先要下载下面我们给大家准备好的一......
  • WPF 禁止输入法 IME
    WPF禁止输入法IME InputMethod.IsInputMethodEnabledhttps://learn.microsoft.com/zh-cn/dotnet/api/system.windows.uielement.isinputmethodenabled?view=netframework-4.8.1针对Listbox,如果也要禁止IME,需要禁止ListboxItem的IsInputMethodEnabled<StyleTarge......
  • SpringBoot复习:(21)自定义ImportBeanDefinitionRegistrar
    要达到的目的:将某个包下使用了某个自定义注解(比如@MyClassMapper)的类注册到Spring容器。一、自定义注解:packagecom.example.demo.service;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;@Retention(RetentionPolicy.RUNTIME)publ......
  • C# WPF 将第三方DLL嵌入 exe
    没成功,只是做个记录,后面再研究希望将第三方的HandyControl.dll嵌入到exe中,这样不用发多个文件给别人将第三方DLL。加载到解决方案中添加引用将“属性页”中的“复制本地”项改为“False”右键点击最开始复制到项目目录中的dll文件,点击“属性”。将“属性”页中的“复制到输出......
  • 你们眼睛干涩,胀痛吗?C# WPF 久坐提醒桌面小程序 - 内附 眼肌运动、远视力表高清图
    目录说明设置提醒时间,及休息时间久坐提醒倒计时休息提醒倒计时休息到计时代码说明主窗体设置工作到计时休息倒计时源码高清图久坐提醒桌面小程序:干这行职业病比较多,之前用爱丽(即:玻璃酸钠滴眼液),用的时候挺舒服,缓解吧,不过治标不治本。注意休息,加强锻炼非常有必要,每工作1小时,休息10分......
  • 你们眼睛干涩,胀痛吗?C# WPF 久坐提醒桌面小程序 - 内附 眼肌运动、远视力表高清图
    目录说明设置提醒时间,及休息时间久坐提醒倒计时休息提醒倒计时休息到计时代码说明主窗体设置工作到计时休息倒计时源码高清图久坐提醒桌面小程序:干这行职业病比较多,之前用爱丽(即:玻璃酸钠滴眼液),用的时候挺舒服,缓解吧,不过治标不治本。注意休息,加强锻炼非常有必要,每工作1小时,休息10分......
  • 自定义键盘
    1.下载刷写工具在https://www.wch.cn/downloads/WCHISPTool_Setup_exe.html 下载WCHISPStudio工具此工具为CH552G芯片厂商沁恒官方烧录工具(仅有windows版本)2.刷写最新键盘固件最新固件:threekey_v5.1.hex 点击下载3、设置下载固件打开WCHISPStudio按下图设置将USB线......