WPF 简易耗时加载进度条

本文实现了简易的WPF加载进度条,其MVVM框架基于Caliburn.Micro 3.2.0,相关框架的知识请自行百度学习。

  1. 创建BaseViewModel基类,基类继承自Caliburn.Micro的PropertyChangedBase类(该类实现了INotifyPropertyChanged接口,省去了自己实现接口的过程)。BaseViewModel类中定义了两个委托,委托ShowLodingEvent用于显示加载进度条,委托CloseLoadingEvent用于关闭加载进度
    /// <summary>
        /// ViewModel的基类
        /// </summary>
        public class BaseViewModel : PropertyChangedBase
        {
            #region 委托
            /// <summary>
            /// 显示加载进度条
            /// </summary>
            public Action<string> ShowLodingEvent { get; set; }
    
    
            /// <summary>
            /// 关闭加载进度条
            /// </summary>
            public System.Action CloseLoadingEvent { get; set; }
    
            #endregion
        }
  2. 创建加载进度条弹窗 LoadingDialog (借鉴LisenYang的弹窗  https://blog.csdn.net/lisenyang/article/details/18218167
    前台XAML代码如下
     
    <Window x:Class="LovelyWpf.BaseView.LoadingDialog"
            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:LovelyWpf.BaseView"
            mc:Ignorable="d"
            Background="Transparent"
            WindowStyle="None"
            AllowsTransparency="True"
            Opacity="0.5"
            Width="300" Height="140">
        <Window.Resources>
            <Storyboard x:Key="Storyboard1">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse1">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse2">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse3">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse4">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse5">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse6">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse7">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse8">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse9">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse10">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse11">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse12">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse13">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.3000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse14">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.4000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse15">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse16">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse17">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="180" />
                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="180" />
                    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="360" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
    
        </Window.Resources>
        <Window.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
            </EventTrigger>
        </Window.Triggers>
    
        <Grid x:Name="LayoutRoot" Background="#00000000">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="40"></RowDefinition>
            </Grid.RowDefinitions>
            <Viewbox Width="8" Height="8" Grid.Row="0">
                <Grid HorizontalAlignment="Center" x:Name="loading" Margin="0" VerticalAlignment="Center" Width="3.333" Height="3.333" Visibility="Visible">
                    <Ellipse RenderTransformOrigin="0.468,3.443" x:Name="ellipse" Fill="RoyalBlue" Stroke="{x:Null}" d:IsHidden="True" />
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse1" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="20" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse2" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="40" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse3" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="60" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse4" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="80" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse5" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="100" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse6" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="120" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse7" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="140" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse8" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="160" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse9" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="180" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse10" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="200" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse11" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="220" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse12" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="240" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse13" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="260" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse14" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="280" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse15" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="300" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse16" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="320" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse17" d:IsHidden="True">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="340" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse RenderTransformOrigin="0.5,0.499" x:Name="ellipse_Copy" Fill="RoyalBlue" Stroke="{x:Null}" Margin="-0.012,0,0.001,-9.67" VerticalAlignment="Bottom" Height="3.344">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="0" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Border RenderTransformOrigin="0.492,1.006" Margin="1.081,0,1.086,-8.056" x:Name="border" VerticalAlignment="Bottom" Height="8.622" Background="RoyalBlue" CornerRadius="1,1,0,0">
                        <Border.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="0" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Border.RenderTransform>
                    </Border>
                    <Border Height="4.994" Background="RoyalBlue" CornerRadius="1,1,0,0" RenderTransformOrigin="0.496,1.001" Margin="0.705,0,0.714,-8.058" x:Name="border1" VerticalAlignment="Bottom">
                        <Border.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                <SkewTransform AngleX="0" AngleY="0" />
                                <RotateTransform Angle="0" />
                                <TranslateTransform X="0" Y="0" />
                            </TransformGroup>
                        </Border.RenderTransform>
                    </Border>
                </Grid>
            </Viewbox>
    
            <Label Name="lbTip" Content="加载中...." FontWeight="Bold" FontSize="15" BorderThickness="0" BorderBrush="{x:Null}"  HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Background="{x:Null}" Foreground="RoyalBlue"  Opacity="0.5"></Label>
        </Grid>
    </Window>
    

    后台CS代码如下

    using System.Windows.Shapes;
    
    namespace LovelyWpf.BaseView
    {
        /// <summary>
        /// LoadingDialog.xaml 的交互逻辑
        /// </summary>
        public partial class LoadingDialog : Window
        {
            public LoadingDialog()
            {
                InitializeComponent();
            }
    
            /// <summary>
            /// 设置提示文字
            /// </summary>
            public void SetTipText(string msg)
            {
                this.lbTip.Content = msg;
            }
        }
    }
  3. 添加View层基类 BaseWindow 和 BaseUserControl,其中BaseWindow是窗体基类,BaseUserControl为控件基类。其中在两者的构造函数中,我们为注册了View的Loaded事件,并在IDisposable的实现方法Dispose()方法中反注册了此事件。在Loaded方法中,我们判断此View的DataContext是否继承自BaseViewModel,如果是,我们便实现了BaseViewModel的两个委托。具体实现请查看代码。

    BaseWindow 定义如下,继承自Window类,实现了IDisposable接口。
     
    public class BaseWindow : Window, IDisposable
        {
            private LoadingDialog m_loadingTipDialog;
    
            public BaseWindow()
            {
                this.Loaded += BaseWindow_Loaded;
            }
    
    
            private void BaseWindow_Loaded(object sender, RoutedEventArgs e)
            {
                if (this.DataContext is BaseViewModel)
                {
                    BaseViewModel vm = this.DataContext as BaseViewModel;
                    vm.ShowLodingEvent = BaseShowLoading;
                    vm.CloseLoadingEvent = BaseCloseLoading;
                }
            }
    
            private void BaseCloseLoading()
            {
                this.IsEnabled = true;
                if (m_loadingTipDialog != null)
                {
                    m_loadingTipDialog.Close();
                    m_loadingTipDialog = null;
                }
            }
    
            private void BaseShowLoading(string msg)
            {
                BaseShowLoading(msg, WindowStartupLocation.CenterOwner);
            }
    
            private void BaseShowLoading(string msg, WindowStartupLocation location)
            {
                if (m_loadingTipDialog == null)
                    m_loadingTipDialog = new LoadingDialog();
    
    
                //设置当前控件不可再被点击
                this.IsEnabled = false;
                //设置Loading窗口在底部导航栏不显示小窗体
                m_loadingTipDialog.ShowInTaskbar = false;
                //获取Window对象
                var win = Window.GetWindow(this);
                //m_loadingTipDialog.Width = win.ActualWidth;
                //m_loadingTipDialog.Height = win.ActualHeight;
                switch (location)
                {
                    case WindowStartupLocation.CenterOwner://窗体在window的正中央显示
                        m_loadingTipDialog.WindowStartupLocation = WindowStartupLocation.CenterOwner;
    
                        m_loadingTipDialog.Owner = win;
                        m_loadingTipDialog.SetTipText(msg);
                        break;
                }
                m_loadingTipDialog.Show();
            }
    
            public void Dispose()
            {
                this.Loaded -= BaseWindow_Loaded;
            }
        }

    BaseUserControl 定义如下,继承自UserControl类,也实现了IDisposable接口。
     

     public class BaseUserControl : UserControl, IDisposable
        {
            public BaseUserControl()
            {
                FindViewModel();
                this.Loaded += BaseUserControl_Loaded;
            }
    
            private void BaseUserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
            {
                if (this.DataContext is BaseViewModel)
                {
                    BaseViewModel vm = this.DataContext as BaseViewModel;
                    vm.ShowLodingEvent = BaseShowLoading;
                    vm.CloseLoadingEvent = BaseCloseLoading;
                }
            }
    
    
            #region 进度条
            private LoadingDialog m_loadingTipDialog;
            private void BaseShowLoading(string msg)
            {
                BaseShowLoading(msg, WindowStartupLocation.CenterOwner);
            }
    
            private void BaseShowLoading(string msg, WindowStartupLocation location)
            {
                if (m_loadingTipDialog == null)
                    m_loadingTipDialog = new LoadingDialog();
    
    
                //设置当前控件不可再被点击
                this.IsEnabled = false;
                //设置Loading窗口在底部导航栏不显示小窗体
                m_loadingTipDialog.ShowInTaskbar = false;
                //获取Window对象
                var win = Window.GetWindow(this);
                //m_loadingTipDialog.Width = win.ActualWidth;
                //m_loadingTipDialog.Height = win.ActualHeight;
                switch (location)
                {
                    case WindowStartupLocation.CenterOwner://窗体在window的正中央显示
                        m_loadingTipDialog.WindowStartupLocation = WindowStartupLocation.CenterOwner;
    
                        m_loadingTipDialog.Owner = win;
                        m_loadingTipDialog.SetTipText(msg);
                        break;
                }
                m_loadingTipDialog.Show();
            }
    
            private void BaseCloseLoading()
            {
                this.IsEnabled = true;
                if (m_loadingTipDialog != null)
                {
                    m_loadingTipDialog.Close();
                    m_loadingTipDialog = null;
                }
            }
    
            #endregion
            public void Dispose()
            {
                this.Loaded -= BaseUserControl_Loaded;
                if (m_loadingTipDialog != null)
                {
                    m_loadingTipDialog.Close();
                    m_loadingTipDialog = null;
                }
            }
    
            public void FindViewModel()
            {
                object obj = Caliburn.Micro.ViewModelLocator.LocateForView(this);
                if (obj != null)
                {
                    Caliburn.Micro.ViewModelBinder.Bind(obj, this, null);
                }
            }
    
            /// <summary>
            /// 用于界面刷新,待续。。
            /// </summary>
            public virtual void ReloadData() { }
            
        }
  4. 使用教程
    View层代码
     
     <Button   cm:Message.Attach="LoadingData()">显示进度条</Button>

    ViewMdeol层代码

      public async void LoadingData()
            {
                ShowLodingEvent("加载中.....");
                string str = await Task.Run<string>(() =>
                   {
                       Thread.Sleep(5000);
                       return "Hello World";
                   });
                CloseLoadingEvent();
                Msg = str;
            }

    显示效果如下:

猜你喜欢

转载自blog.csdn.net/war3ismylove/article/details/85091797