WPF创建进度条

本文介绍: 关键点就是要对max的值进行判断，如果大于100和小于100的话，显示是不一样的，主要是因为进度条的值是100，要相对的扩大或者缩小，那么界面上显示的数据变化就是一样的。功能就是点击按钮，后台处理数据，前台显示处理数据的变化，当然还可以对进度条进行美化和关闭的操作，等待后台处理完毕数据，然后自动关闭。5.Prog ressBarStyle.xa ml，最后就是对进度条的美化样式。使用 wpf做一个原生的进度条，进度条上面有值，先看效果。4.MainWin dow.xa ml.cs的代码。其中最重要的就是Task。

使用 wpf做一个原生的进度条，进度条上面有值，先看效果。

功能就是点击按钮，后台处理数据，前台显示处理数据的变化，当然还可以对进度条进行美化和关闭的操作，等待后台处理完毕数据，然后自动关闭。

1.首先简简单单创建一个项目

2.先建立进度条的页面DialogWait.xaml

<Window x:Class="WpfApp5.DialogWait"
        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:WpfApp5"
        mc:Ignorable="d"
        WindowStyle="None" AllowsTransparency="True"  Background="Transparent" ShowInTaskbar="False" ResizeMode="NoResize">
    <ProgressBar x:Name="progressBar" Maximum="100"   Height="25" Width="300" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</Window>

3.DialogWait.xaml.cs 后台代码如下

关键点就是要对max的值进行判断，如果大于100和小于100的话，显示是不一样的，主要是因为进度条的值是100，要相对的扩大或者缩小，那么界面上显示的数据变化就是一样的。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApp5
{
    /// <summary>
    /// DialogWait.xaml 的交互逻辑
    /// </summary>
    public partial class DialogWait : Window
    {
        /// <summary>
        /// 进度条最大值
        /// </summary>
        private int max = 0;
        /// <summary>
        /// 大于100的增量
        /// </summary>
        private int increment = 0;
        /// <summary>
        /// 小于100的增量
        /// </summary>
        private double incrementLess = 0;
        public DialogWait()
        {
            InitializeComponent();
        }
        public DialogWait(int max)
        {
            InitializeComponent();
            this.Width = 300;
            this.Height = 25;
            this.Owner = Application.Current.MainWindow;
            this.WindowStartupLocation = WindowStartupLocation.CenterOwner;
            this.max = max;
            if (max >= 100)
            {
                increment = max / 100;
            }
            else
            {
                incrementLess = Math.Round(100.0 / max, 3);
            }
        }
        public void ShowWait(int value)
        {
            progressBar.Dispatcher.Invoke(() =>
            {
                if (max >= 100)
                {
                    progressBar.Value = value / increment;
                }
                else
                {
                    progressBar.Value = Math.Round(value * incrementLess, 0);
                }
            });
        }
    }
}

4.MainWindow.xaml.cs的代码

其中最重要的就是Task

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp5
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            DialogWait dialogWaitPercent = new DialogWait(500);
            Task.Run(() =>
            {
                A(dialogWaitPercent);//处理数据
            });
            dialogWaitPercent.ShowDialog();
        }
        public void A(DialogWait dialogWaitPercent)
        {
            for (int i = 0; i < 500; i++)
            {
                dialogWaitPercent.ShowWait(i);
                Thread.Sleep(10);
            }
            dialogWaitPercent.Dispatcher.Invoke(() =>
            {
                dialogWaitPercent.Close();
            });
        }
    }
}

5.ProgressBarStyle.xaml，最后就是对进度条的美化样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Height" Value="15"/>
        <Setter Property="Background" Value="#6fae5f"/>
        <Setter Property="FontSize" Value="10"/>
        <Setter Property="Padding" Value="5,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid Background="#00000000">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate"/>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard RepeatBehavior="Forever">
                                        <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                                            <EasingPointKeyFrame KeyTime="0:0:0" Value="0.5,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:1.5" Value="1.95,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:3" Value="0.5,0.5"/>
                                        </PointAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid Height="{TemplateBinding Height}">
                            <Border Background="#000000" CornerRadius="7.5" Opacity="0.05"/>
                            <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
                            <Grid Margin="{TemplateBinding BorderThickness}">
                                <Border x:Name="PART_Track"/>
                                <Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="width1"/>
                                        <ColumnDefinition x:Name="width2" Width="0"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid x:Name="Animation"  RenderTransformOrigin="0.5,0.5">
                                        <Grid.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                                <SkewTransform AngleY="0" AngleX="0"/>
                                                <RotateTransform Angle="180"/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </Grid.RenderTransform>
                                        <Border Background="{TemplateBinding Background}" CornerRadius="7.5">
                                            <Viewbox HorizontalAlignment="Left" StretchDirection="DownOnly" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                                                <TextBlock Foreground="#ffffff" SnapsToDevicePixels="True" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Value,StringFormat={}{0}%}" RenderTransformOrigin="0.5,0.5">
                                                    <TextBlock.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                                            <SkewTransform AngleY="0" AngleX="0"/>
                                                            <RotateTransform Angle="0"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </TextBlock.RenderTransform>
                                                </TextBlock>
                                            </Viewbox>
                                        </Border>
                                        <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="#c5c5c5"/>
                        </Trigger>
                        <Trigger Property="IsIndeterminate" Value="true">
                            <Setter TargetName="width1" Property="Width" Value="0.25*"/>
                            <Setter TargetName="width2" Property="Width" Value="0.725*"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>