WPF设置欢迎屏幕，程序启动过度动画

小白2024-07-21 18:52

当主窗体加载时间过长，这时候基本都会想添加一个等待操作来响应用户点击，提高用户体验。下面我记录两个方法，一点拙见，仅供参考。

方法1:在App类中使用SplashScreen类。

protected override void OnStartup(StartupEventArgs e)
{
    // 显示启动画面
    ShowSplashScreen();
    base.OnStartup(e);
}

private void ShowSplashScreen()
{
    // 这里要注意的点就是aa.jpg 属性的生成的操作要设置为资源(Resource).
    SplashScreen splash = new SplashScreen(/Images/aa.jpg);
    /*
     * 第一个参数表示是否自动关闭
     * 第二个参数表示启动画面窗口是否会被置于顶层,即使有其他程序的窗口处于活动状态,
     * 启动画面也会显示在它们之上.
     * 如果设置为false,表示遵循正常的窗口焦点规则,如果用户切换到其他程序,
     * 启动画面可能会被其他窗口遮挡.
     * 如果设置为true,保证用户一直能够看到它.
     */
    splash.Show(true, true);
    // 这里执行一些数据初始化的代码
    //Task.Run(() =>
    //{
    //    // 模拟耗时操作
    //    Thread.Sleep(1000);

    //    // 在UI线程上关闭启动画面
    //    Dispatcher.Invoke(() =>
    //    {
    //        // 这里会有一个淡淡渐渐消失的效果
    //        splash.Close(TimeSpan.FromSeconds(2));
    //    });
    //});
}

也可以直接设置图片的属性-生成的操作一栏为SplashScreen。这样就不用写上面的代码。

方法1缺点:仅能展示图片，gif图片也仅展示第一帧，如有办法展示完整gif请给个传送门。

方法2：自定义窗体作为欢迎屏幕

参考窗体代码(后台无操作，故仅贴前台代码，带加载动画的哦):我命名为:Splash

<Window x:Class="SmartHome.Splash"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    Title="Splash" Width="640" Height="480" Background="#FF1D2128"  ResizeMode="NoResize"
 ShowInTaskbar="False"
 SnapsToDevicePixels="True"
 TextOptions.TextFormattingMode="Display"
 UseLayoutRounding="True"
 WindowStartupLocation="CenterScreen"
 WindowStyle="None" Foreground="{x:Null}">
    <Grid>
        <Rectangle HorizontalAlignment="Left" Height="60" Margin="173,117,0,0" Stroke="Black" VerticalAlignment="Top" Width="60" Fill="#FF2573DC" RadiusX="10" RadiusY="10"/>
        <Rectangle Fill="#FF1D2128" HorizontalAlignment="Left" Height="43" Margin="185.332,125.671,0,0" RadiusY="5" RadiusX="5" Stroke="#FF1D2128" VerticalAlignment="Top" Width="10"/>
        <Rectangle Fill="#FF1D2128" HorizontalAlignment="Left" Height="27.046" Margin="210.749,141.625,0,0" RadiusY="5" RadiusX="5" Stroke="#FF1D2128" VerticalAlignment="Top" Width="10"/>
        <Rectangle Fill="#FF1D2128" HorizontalAlignment="Left" Height="10" Margin="189.25,141.625,0,0" RadiusY="5" RadiusX="5" Stroke="#FF1D2128" VerticalAlignment="Top" Width="31.499"/>
        <Ellipse Fill="#FF1D2128" HorizontalAlignment="Left" Height="11" Margin="209.749,125.671,0,0" Stroke="#FF1D2128" VerticalAlignment="Top" Width="11"/>
        <Path Data="M244,102 L244,187.2115" Fill="#FF2573DC" HorizontalAlignment="Left" Height="60" Margin="250,117,0,0" Stretch="Fill" Stroke="#FF2573DC" VerticalAlignment="Top" Width="3" StrokeThickness="3"/>
        <Label Content="HAHAHAHA" Height="60" Margin="259,115,169,0" VerticalAlignment="Top" Foreground="#FF2573DC" FontSize="48" FontFamily="French Script MT" FontWeight="Bold"/>
        <Path Data="M1.5000012,1.5 L14.500009,14.500008 M14.500005,12.39 L1.5,25.390005" Fill="#FF2573DC" HorizontalAlignment="Left" Margin="205.167,230.25,0,222.86" Stretch="Fill" Stroke="#FF2573DC" StrokeThickness="3" Width="16"/>
        <Label Content="程序名称" Margin="230.749,221,204,222.86" FontSize="24" Foreground="White"/>
        <Label Content="即将进入" Margin="278.749,0,277,182.86" FontSize="16" Foreground="White" Height="36.14" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        <Grid Background="#FF1D2128"  HorizontalAlignment="Left" Margin="249,301,0,99">
            <Grid.Resources>
                <Style x:Key="rec" TargetType="Rectangle">
                    <Setter Property="Width" Value="10"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="Fill" Value="#FF2573DC"/>
                </Style>
                <PowerEase x:Key="powerEase" Power="3" EasingMode="EaseInOut"/>
            </Grid.Resources>
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="Height">
                            <DoubleAnimation Storyboard.TargetName="rec1" To="50" BeginTime="0:0:0.0" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec2" To="50" BeginTime="0:0:0.1" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec3" To="50" BeginTime="0:0:0.2" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec4" To="50" BeginTime="0:0:0.3" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec5" To="50" BeginTime="0:0:0.4" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec6" To="50" BeginTime="0:0:0.5" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec7" To="50" BeginTime="0:0:0.6" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec8" To="50" BeginTime="0:0:0.7" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec9" To="50" BeginTime="0:0:0.8" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                            <DoubleAnimation Storyboard.TargetName="rec10" To="50" BeginTime="0:0:0.9" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="15"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Label Content="Loading..."
                   Grid.Row="1"
           FontSize="18"
           FontFamily="Times New Roman"
           FontWeight="Bold"
           Grid.ColumnSpan="10"
           VerticalContentAlignment="Center"
           HorizontalContentAlignment="Center"/>
            <Rectangle Name="rec1" Grid.Column="0" Style="{StaticResource rec}"/>
            <Rectangle Name="rec2" Grid.Column="1" Style="{StaticResource rec}"/>
            <Rectangle Name="rec3" Grid.Column="2" Style="{StaticResource rec}"/>
            <Rectangle Name="rec4" Grid.Column="3" Style="{StaticResource rec}"/>
            <Rectangle Name="rec5" Grid.Column="4" Style="{StaticResource rec}"/>
            <Rectangle Name="rec6" Grid.Column="5" Style="{StaticResource rec}"/>
            <Rectangle Name="rec7" Grid.Column="6" Style="{StaticResource rec}"/>
            <Rectangle Name="rec8" Grid.Column="7" Style="{StaticResource rec}"/>
            <Rectangle Name="rec9" Grid.Column="8" Style="{StaticResource rec}"/>
            <Rectangle Name="rec10" Grid.Column="9" Style="{StaticResource rec}"/>
        </Grid>
    </Grid>
</Window>

使用方式:

在APP类下设置新的单线程打开窗体并赋值给全局变量方便关闭:

//定义一个静态的全局欢迎窗口
public static Splash Splash = new Splash();
protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    Thread t = new Thread(() =>
    {
        Splash splash = new Splash();
        //把实例赋值给全局变量
        Splash= splash;
        //用Show的话动画效果不流畅
        splash.ShowDialog();
    });
    t.Name = "HelloWindow";
    //设置为单线程。一定要设置
    t.SetApartmentState(ApartmentState.STA);
    t.Start();
}

主窗体启动成功后的关闭方法:

public MainWindow()
{
    InitializeComponent();
//耗时的操作，比如实例化控件，页面，初始化数据等
//...
//窗口内容呈现完成后的方法，用load方法也可以看自己
this.ContentRendered += MainWindow_ContentRendered;
}

private void MainWindow_ContentRendered(object sender, EventArgs e)
{
    if (App.Splash != null)
    {
        //在该线程上关闭
        App.Splash.Dispatcher.Invoke((Action)(() => App.Splash.Close()));
    }
}

一点拙见，还请指正。各位大佬有更好的方法还请留个传送门，或评论区展现一下风采!!!!

好记性不如烂笔头................................................................................................

相关推荐
晚安苏州8 小时前
WPF DataTemplate 数据模板
wpf
甜甜不吃芥末1 天前
WPF依赖属性详解
wpf
Hat_man_1 天前
WPF制作图片闪烁的自定义控件
wpf
晚安苏州3 天前
WPF Binding 绑定
wpf·wpf binding·wpf 绑定
wangnaisheng3 天前
【WPF】RenderTargetBitmap的使用
wpf
dotent·3 天前
WPF 完美解决改变指示灯的颜色
wpf
orangapple5 天前
WPF 用Vlc.DotNet.Wpf实现视频播放、停止、暂停功能
wpf·音视频
ysdysyn5 天前
wpf mvvm 数据绑定数据（按钮文字表头都可以），根据长度进行换行，并把换行的文字居中
c#·wpf·mvvm
orangapple5 天前
WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
wpf
晚安苏州5 天前
WPF ControlTemplate 控件模板
wpf
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程