WPF 蒙罩層 LoadingPage

 

前言

　　無論是在PC客戶端，移動端，網站，在遇到長時間處理的時候都會需要用到蒙罩層，讓用戶有更好的體現。今天上網逛了一下各位前輩網友的蒙罩層的實現方式，覺得有很多都搞復雜了（利用前台代碼+后台代碼+數學計算），無疑增加了維護的難度。然而，本人參考了各位前輩的實現以后，自己實現了一個可重用LoadingPage控件，歡迎各位下載使用。

 

需求

　　需求先行是必須的，我的目標是做成怎樣一個效果呢？

　　　　1.是一個控件，可以在.NET各環境中得以重用。

　　　　2.可配置，例如顏色，大小，提醒字符串等等的屬性，用戶可以自定義，以滿足用戶所在情況的需求。

　　　　3.大小比例自適應，不同大小的窗口載體，能自動改變自身大小比例。

　　　　4.效果全部xaml實現，全部集中於xaml可控制難度不會大，維護起來方便，用戶拷貝xaml也方便。

 

解決方法

　　　　1.新建WPF用戶控件庫進行開發。

　　　　2.使用依賴項屬性，然后前台xaml使用屬性綁定來實現。

　　　　3.使用ViewBox控件（該控件能夠自動縮放內容）。

　　　　4.在xaml中的寫動畫代碼。

結果展示

　　

 

制作過程

　　一：新建一個"WPF用戶控件庫"工程，新建一個WPF控件。（這步不解釋）

　　二：為了實現蒙罩效果，我們把控件的背景弄成黑色背景，並且透明度為0.2。

<UserControl.Background>
    <SolidColorBrush Color="Black" Opacity="0.2" ></SolidColorBrush>
</UserControl.Background>

　　三：然后就是先利用Canvas作為背景，在其上畫一個由小圓圈構成的大圈，使用控件Ellipse。

<Canvas RenderTransformOrigin="0.5,0.5" 
                    HorizontalAlignment="Center"  x:Name="loadCancas"
                    VerticalAlignment="Center" Width="120"  
                    Height="120" >
                <Canvas.Resources>
                    <Style TargetType="Ellipse">
                        <Setter Property="Width" Value="10" ></Setter>
                        <Setter Property="Height" Value="10" ></Setter>
                        <Setter Property="Canvas.Left" Value="30"></Setter>
                        <Setter Property="Canvas.Top" Value="30"></Setter>
                        <Setter Property="Stretch" Value="Fill"></Setter>
                        <Setter Property="Fill" Value="Blue"></Setter>
                        <Setter Property="RenderTransformOrigin" Value="3,3"></Setter>
                    </Style>
                </Canvas.Resources>
                <Ellipse >
                </Ellipse>
                <Ellipse Opacity="0.9">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="36"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.8">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="72"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.7">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="108"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.6">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="144"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.5">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="180"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.4">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="216"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.3">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="252"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.2">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="288"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse Opacity="0.1" >
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="324"/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="SpinnerRotate"  
                         Angle="0" />
                    </TransformGroup>
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>

　　這樣就形成了一個圈，然后為了實現目標3(內容能自動改變大小)，使用一個viewBox作為容器，包住這個Canvas。（不貼代碼了）

 

四：旋轉動畫編寫。

　　因為我在Canvas畫了一個圈，然而我只需無限旋轉Canvas便可實現像小圓圈在動一樣。下面看一下Canvas的觸發器，在觸發器中實現動畫的編寫。

<Canvas.Triggers>
　　<EventTrigger RoutedEvent="Loaded">
　　　　<BeginStoryboard Name="loadAnimation">
　　　　　　<Storyboard>
　　　　　　　　<DoubleAnimation Storyboard.TargetName="loadCancas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" From="360" To="0" RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation>
          </Storyboard>
       </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Unloaded">
　　　　<StopStoryboard BeginStoryboardName="loadAnimation"></StopStoryboard>
    </EventTrigger>
</Canvas.Triggers>

 

五：屬性可配置，使用依賴屬性，並且在xaml中寫綁定，下面先看后台代碼中的依賴項屬性的定義，然后前台綁定就補貼了，統一在附件中可以看到。

public partial class LoadingPage : UserControl
    {
        public LoadingPage()
        {
            InitializeComponent();
        }

        #region 加載圓圈的margin
        [DescriptionAttribute("加載圓圈的margin"), CategoryAttribute("擴展"), DefaultValueAttribute(0)]
        public string LoadCirclesMargin
        {
            get { return (string)GetValue(LoadCirclesMarginProperty); }
            set { SetValue(LoadCirclesMarginProperty, value); }
        }


        public static readonly DependencyProperty LoadCirclesMarginProperty =
            DependencyProperty.Register("LoadCirclesMargin", typeof(string), typeof(LoadingPage),
            new FrameworkPropertyMetadata("50"));
        #endregion

        #region 加載中的提示
        [DescriptionAttribute("加載中的提示"), CategoryAttribute("擴展"), DefaultValueAttribute(0)]
        public string LoadingText
        {
            get { return (string)GetValue(LoadingTextProperty); }
            set { SetValue(LoadingTextProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextProperty =
            DependencyProperty.Register("LoadingText", typeof(string), typeof(LoadingPage),
            new FrameworkPropertyMetadata("加載中"));
        #endregion

        #region 加載中的提示的字體大小
        [DescriptionAttribute("加載中的提示的字體大小"), CategoryAttribute("擴展"), DefaultValueAttribute(0)]
        public int LoadingTextFontSize
        {
            get { return (int)GetValue(LoadingTextFontSizeProperty); }
            set { SetValue(LoadingTextFontSizeProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextFontSizeProperty =
            DependencyProperty.Register("LoadingTextFontSize", typeof(int), typeof(LoadingPage),
            new FrameworkPropertyMetadata(12));
        #endregion

        #region 圓圈的顏色
        [DescriptionAttribute("圓圈的顏色"), CategoryAttribute("擴展"), DefaultValueAttribute(0)]
        public Brush CirclesBrush
        {
            get { return (Brush)GetValue(CirclesBrushProperty); }
            set { SetValue(CirclesBrushProperty, value); }
        }


        public static readonly DependencyProperty CirclesBrushProperty =
            DependencyProperty.Register("CirclesBrush", typeof(Brush), typeof(LoadingPage),
            new FrameworkPropertyMetadata(Brushes.Black));
        #endregion

        #region 加載中的提示的字體顏色
        [DescriptionAttribute("加載中的提示的字體顏色"), CategoryAttribute("擴展"), DefaultValueAttribute(0)]
        public Brush LoadingTextForeground
        {
            get { return (Brush)GetValue(LoadingTextForegroundProperty); }
            set { SetValue(LoadingTextForegroundProperty, value); }
        }


        public static readonly DependencyProperty LoadingTextForegroundProperty =
            DependencyProperty.Register("LoadingTextForeground", typeof(Brush), typeof(LoadingPage),
            new FrameworkPropertyMetadata(Brushes.DarkSlateGray));
        #endregion
    }

 

大功告成！！！！上面的代碼都是為了展示原理而分拆出來的零碎代碼，如果想使用該控件，可以點下面的下載

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　完整Demo下載