首先,创建一个用户控件实现动画Loading的功能:
<UserControl x:Class="K.Controls.Controls.LoadingControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:K.Controls.Controls" mc:Ignorable="d" x:Name="Self" Height="{Binding HeightControl,ElementName=Self}" Width="{Binding WidthControl,ElementName=Self}"> <UserControl.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="load" RepeatBehavior="Forever"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:0.25" Value="90"/> <EasingDoubleKeyFrame KeyTime="00:00:0.5" Value="180"/> <EasingDoubleKeyFrame KeyTime="00:00:0.75" Value="270"/> <EasingDoubleKeyFrame KeyTime="00:00:1" Value="360"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </UserControl.Triggers> <local:SimplePanel> <Ellipse x:Name="load" StrokeThickness="{Binding StrokeThicknessControl,ElementName=Self}" StrokeDashCap="Round" RenderTransformOrigin="0.5,0.5"> <Ellipse.Stroke> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="{Binding LoadingBrush,ElementName=Self}" Offset="0"/> <GradientStop Color="{Binding LoadingOpBrush,ElementName=Self}" Offset="0.8"/> </LinearGradientBrush> </Ellipse.Stroke> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform /> <TranslateTransform/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> <local:SimpleStackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="40,0"> <TextBlock Text="{Binding LoadStr,ElementName=Self}" FontSize="32" Foreground="{DynamicResource RechargeDetailFontBackBrush}" TextWrapping="Wrap" MaxHeight="130" TextTrimming="CharacterEllipsis" TextAlignment="Center"/> <TextBlock Text="{Binding LoadSeconds,ElementName=Self,StringFormat=0S}" Visibility="{Binding SecondVisible,ElementName=Self}" FontSize="32" Foreground="{DynamicResource RechargeDetailFontBackBrush}" TextWrapping="Wrap" TextAlignment="Center"/> </local:SimpleStackPanel> </local:SimplePanel> </UserControl>
2、使用依赖属性,来增加一些属性,供引用该该空间的页面,设置对应的需求值
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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 K.Controls.Controls { /// <summary> /// LoadingControl.xaml 的交互逻辑 /// </summary> public partial class LoadingControl : UserControl { public LoadingControl() { InitializeComponent(); } public double WidthControl { get { return (double)GetValue(WidthControlProperty); } set { SetValue(WidthControlProperty, value); } } public static readonly DependencyProperty WidthControlProperty = DependencyProperty.Register("WidthControl", typeof(double), typeof(LoadingControl), new PropertyMetadata(300.0)); public double HeightControl { get { return (double)GetValue(HeightControlProperty); } set { SetValue(HeightControlProperty, value); } } public static readonly DependencyProperty HeightControlProperty = DependencyProperty.Register("HeightControl", typeof(double), typeof(LoadingControl), new PropertyMetadata(300.0)); public double StrokeThicknessControl { get { return (double)GetValue(StrokeThicknessControlProperty); } set { SetValue(StrokeThicknessControlProperty, value); } } public static readonly DependencyProperty StrokeThicknessControlProperty = DependencyProperty.Register("StrokeThicknessControl", typeof(double), typeof(LoadingControl), new PropertyMetadata(24.0)); public Color LoadingBrush { get { return (Color)GetValue(LoadingBrushProperty); } set { SetValue(LoadingBrushProperty, value); } } public static readonly DependencyProperty LoadingBrushProperty = DependencyProperty.Register("LoadingBrush", typeof(Color), typeof(LoadingControl), new PropertyMetadata((Color)ColorConverter.ConvertFromString(Application.Current.Resources["RechargeLoadingFontBrush"].ToString()))); public Color LoadingOpBrush { get { return (Color)GetValue(LoadingOpBrushProperty); } set { SetValue(LoadingOpBrushProperty, value); } } public static readonly DependencyProperty LoadingOpBrushProperty = DependencyProperty.Register("LoadingOpBrush", typeof(Color), typeof(LoadingControl), new PropertyMetadata((Color)ColorConverter.ConvertFromString(Application.Current.Resources["RechargeLoadingOpBrush"].ToString()))); public string LoadStr { get { return (string)GetValue(LoadStrProperty); } set { SetValue(LoadStrProperty, value); } } public static readonly DependencyProperty LoadStrProperty = DependencyProperty.Register("LoadStr", typeof(string), typeof(LoadingControl), new PropertyMetadata()); public int LoadSeconds { get { return (int)GetValue(LoadSecondsProperty); } set { SetValue(LoadSecondsProperty, value); } } public static readonly DependencyProperty LoadSecondsProperty = DependencyProperty.Register("LoadSeconds", typeof(int), typeof(LoadingControl), new PropertyMetadata(5)); public Visibility SecondVisible { get { return (Visibility)GetValue(SecondVisibleProperty); } set { SetValue(SecondVisibleProperty, value); } } public static readonly DependencyProperty SecondVisibleProperty = DependencyProperty.Register("SecondVisible", typeof(Visibility), typeof(LoadingControl), new PropertyMetadata(Visibility.Visible)); } }
3、在其他页面引用上面所创建的控件,实现loading功能
<StackPanel x:Name="loading" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="20"> <controls:LoadingControl StrokeThicknessControl="4" WidthControl="38" HeightControl="38" LoadingBrush="{DynamicResource CashierLoadingBrush}" LoadingOpBrush="{DynamicResource CashierLoadingOpBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="正在为您加载商品" FontSize="40" Foreground="{DynamicResource QueryItemSelectForBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0,0,0"/> </StackPanel>
4、资源文件里获取对应的颜色
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cal="clr-namespace:K.Controls.Controls" xmlns:o="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" <SolidColorBrush o:Freeze="True" x:Key="QueryItemSelectForBrush" Color="#FFFFFF"/> <Color x:Key="RechargeLoadingFontBrush">#ED7C32</Color> <Color x:Key="RechargeLoadingOpBrush">#00ED7C32</Color> <Color x:Key="CashierLoadingBrush">#FFFFFF</Color> <Color x:Key="CashierLoadingOpBrush">#00FFFFFF</Color>
<!--资源文件中添加图片-->
<BitmapImage x:Key="LoadingWaitEIcon" UriSource="/K.Controls;component/Images/Black/ic_loading2.png"></BitmapImage> </ResourceDictionary >