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()));
    }
}

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

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

相关推荐
月落.4 小时前
WPF的＜ContentControl＞控件
wpf
就是有点傻4 小时前
WPF中的依赖属性
开发语言·wpf
wangnaisheng4 小时前
【WPF】把一个Window放在左上角/右上角顶格显示
wpf
WineMonk4 小时前
.NET WPF CommunityToolkit.Mvvm框架
.net·wpf·mvvm
月落.4 小时前
WPF中的INotifyPropertyChanged接口
wpf
界面开发小八哥5 小时前
界面控件DevExpress WPF中文教程：Data Grid——卡片视图设置
.net·wpf·界面控件·devexpress·ui开发
平凡シンプル5 小时前
WPF 打包
wpf
VickyJames5 小时前
基于XAML框架和跨平台项目架构设计的深入技术分析
wpf·开源分享·unoplatform·winui3·项目架构
冷眼Σ(-᷅_-᷄๑)8 小时前
WPF缩放动画和平移动画叠加后会发生什么?
wpf·动画
△曉風殘月〆10 小时前
WPF MVVM入门系列教程（二、依赖属性）
c#·wpf·mvvm
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解