當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

WPF 蒙罩层 LoadingPage

發布時間：2023/12/10 asp.net 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 WPF 蒙罩层 LoadingPage 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

WPF 蒙罩層 LoadingPage 原文:WPF 蒙罩層 LoadingPage

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。

　　這樣就形成了一個圈，然后為了實現目標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下載

posted on 2018-09-22 01:18 NET未來之路閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/9689225.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的WPF 蒙罩层 LoadingPage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【数据库学习笔记】——cursor游标对
下一篇：数控直流电压源的设计与制作【keil5