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

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

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

相关推荐
九鼎科技-Leo5 小时前
什么是 WPF 中的依赖属性？有什么作用？
windows·c#·.net·wpf
麻花201315 小时前
C#之WPF的C1FlexGrid空间的行加载事件和列事件变更处理动态加载的枚举值
开发语言·c#·wpf
lcintj15 小时前
【WPF】Prism学习（九）
学习·wpf·prism
界面开发小八哥15 小时前
界面控件DevExpress WPF中文教程：网格视图数据布局的列和卡片字段
wpf·界面控件·devexpress·ui开发·用户界面
△曉風殘月〆15 小时前
如何在WPF中嵌入其它程序
wpf
Crazy Struggle15 小时前
功能齐全的 WPF 自定义控件资源库（收藏版）
.net·wpf·ui控件库
shepherd枸杞泡茶1 天前
WPF动画
c#·.net·wpf
lcintj1 天前
【WPF】Prism学习（十）
学习·wpf·prism
wyh要好好学习1 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing1 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作