WPF - 请求等待动画--Loading

最新推荐文章于 2023-12-27 15:05:43 发布

------------`

最新推荐文章于 2023-12-27 15:05:43 发布

阅读量283

点赞数

分类专栏： WPF C# 文章标签： wpf

本文链接：https://blog.csdn.net/qq_44920920/article/details/134381003

版权

C# 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

WPF

8 篇文章 0 订阅

订阅专栏

仅作参考
XAML页面
Loading.XAML
这里创建的是Window窗体，并不是用户控件。
可以将背景设置为透明色，需要给Window标签写入AllowsTransparency=“True” background=“Transparent”
以上两句，或自行设置其它颜色。

    <Grid Width="65" Height="90" HorizontalAlignment="Center" VerticalAlignment="Center"  Loaded="Grid_Loaded">
        <Grid.Resources>
            <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="Black">
                        <GeometryDrawing.Geometry>
                            <EllipseGeometry RadiusX="8" RadiusY="8"/>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Grid.Resources>

        <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="30"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="60"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="90"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="120"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="150"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="180"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="210"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="240"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="270"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="300"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="330"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Border x:Name="border"/>
        <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>

在这里插入图片描述
没有做成GIF图，此处为全部，需要在Loading.XAML.cs中的构造函数中设置

public class Loading:Window
{
	public Loading()
	{
		InitializeComponent();
		//不显示标题栏和边框
	 	this.WindowStyle = System.Windows.WindowStyle.None;
		//设置窗口为最大化
     	this.WindowState = System.Windows.WindowState.Maximized;
     	//设置窗口显示的位置
     	WindowStartupLocation = WindowStartupLocation.CenterScreen;
	}
	//计时器队列
	DispatcherTimer t = new DispatcherTimer();
		//当对元素进行布局，呈现时触发
	 private void Grid_Loaded(object sender, RoutedEventArgs e)
        {
            t.Interval = TimeSpan.FromMilliseconds(30);
            t.Tick += T_Tick;
            t.Start();
        }
        // 此处使用的是Opacity当透明度小于0.3时自动关闭
         private void T_Tick(object sender, EventArgs e)
        {

            border.Opacity -= 0.008;

            if (border.Opacity < 0.3)
            {
                t.Stop();
                this.Close();
            }
        }

}