WPF自定义实现上传文件显示进度的按钮控件
更新时间：2023年06月12日 09:35:32 作者：BruceNeter
自定义控件在WPF开发中是很常见的，有时候某些控件需要契合业务或者美化统一样式，这时候就需要对控件做出一些改造，本文就来自定义实现一个上传文件显示进度的按钮控件吧
话不多说直接看效果
默认效果:
上传效果:
按钮设置圆角
因为按钮本身没有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>看看效果:
按钮上传文件相关定义
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;
}
}到此这篇关于WPF自定义实现上传文件显示进度的按钮控件的文章就介绍到这了,更多相关WPF自定义控件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍C#中SQLite的高级应用,涵盖事务处理（ACID）、连接池、批量操作、异步编程及性能优化,强调数据安全与并发控制,适用于移动和桌面开发,感兴趣的朋友跟随小编一起看看吧2025-06-06
这篇文章主要介绍了Unity中EventTrigger的几种使用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-04-04
本篇文章是对C#中@符号的几种使用方法进行了详细的分析介绍，需要的朋友参考下2013-05-05
这篇文章主要介绍了C#实现将Doc文档转换成rtf格式的方法,结合实例形式分析了C#针对word文件的读取及文档格式转换相关操作技巧,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了C#实现在控制台输入密码显示星号的方法，感兴趣的小伙伴们可以参考一下2016-04-04
本文详细介绍了在C#中比较两个List集合内容是否相同的方法,包括非自定义类和自定义类的元素比较,对于非自定义类,可以使用SequenceEqual、排序后比较或HashSet来忽略重复元素,对于自定义类,需要重写Equals和GetHashCode方法,然后使用相应的比较方法2025-02-02
本篇文章对赫夫曼树编码的问题进行了分析说明，需要的朋友参考下2013-05-05
这篇文章主要为大家详细介绍了Unity实现QQ列表折叠菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
很多时候我们需要获取一个结构未知的文件夹下所有的文件或是指定类型的所有文件,下面这篇文章主要给大家介绍了关于如何在C#项目中链接一个文件夹下的所有文件,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了c#如何使用 XML 文档功能,帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下2020-10-10
最新评论