实现效果图:
1、创建一个用户控件,实现动画旋转:
<UserControl x:Class="K.Controls.Controls.LoadingWait" 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" > <UserControl.Background> <SolidColorBrush Color="Transparent"/> </UserControl.Background> <Grid Width="36" Height="36"> <Grid.Resources> <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top"> <DrawingBrush.Drawing> <GeometryDrawing Brush="{DynamicResource LoadingWaitBrush}"> <GeometryDrawing.Geometry> <EllipseGeometry RadiusX="2" RadiusY="7"/> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Grid.Resources> <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="0"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="30"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="60"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="90"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="120"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="150"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="180"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="210"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="240"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="270"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="300"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="330"/> </Rectangle.RenderTransform> </Rectangle> <Grid.Triggers> <EventTrigger RoutedEvent="Grid.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/> <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/> <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/> <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/> <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/> <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/> <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/> <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/> <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/> <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/> <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/> <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Grid.Triggers> </Grid> </UserControl>
2、资源文件中设置Loading的颜色------Brush="{DynamicResource LoadingWaitBrush}"
<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="LoadingWaitBrush" Color="#FFFFFF"/> </ResourceDictionary>
3、其他界面引用上述用户控件
<controls:PopupEx IsOpen="{Binding ShowLoading}" PlacementTarget="{Binding ElementName=bdMain}" Placement="Center" VerticalAlignment="Center" VerticalOffset="0" AllowsTransparency="True" StaysOpen="True"> <Grid Background="{DynamicResource PayVipCouponsLoadingBackground}" Width="{Binding ElementName=bdMain,Path=ActualWidth}" Height="{Binding ElementName=bdMain,Path=ActualHeight}" > <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"> <controls:LoadingWait Width="48" Height="48"/> <TextBlock FontSize="26" Foreground="{DynamicResource PayVipCouponsLoadingForBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="请稍等,正在为您计算优惠券" Margin="15,0,0,0"/> </StackPanel> </Grid> </controls:PopupEx>