WPF 加载启动屏幕

• 下载演示 - 46.16 KB
• 下载演示应用程序 - 26.67 KB

引言

在最新版本的 MSN Messenger 中，当您登录帐户时，您会注意到简单的动画文本加载。我尝试做类似的事情，使应用程序加载看起来更专业。

分步指南

创建启动画面窗口

将新窗口添加到您的 WPF 应用程序。您可以将其命名为Splashwindow。为了使窗口无边框并置于最顶层，您需要添加一些属性，如下所示：通过在窗口标记中添加到 XAML 或使用属性面板。

WindowStyle="None" WindowStartupLocation="CenterScreen" 
	ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True"

更改背景

默认情况下，新窗口内容包含一个网格。我们可以通过添加以下代码，使用线性渐变画笔更改网格背景

 <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB9BBFF" Offset="0" />
                <GradientStop Color="White" Offset="1" />
                <GradientStop Color="White" Offset="0.72" />
            </LinearGradientBrush>
        </Grid.Background>

它将如下所示

添加不透明度遮罩

为了产生淡入淡出的效果，我们需要创建第二个网格来覆盖窗口的下半部分，并应用不透明度遮罩。这将导致淡入淡出效果，当文本从边框移动到网格中心时，遮罩在第二个网格的下部和上部将是透明的，并将文本添加到网格以显示加载消息，显示顺序是从下到中间，显示新文本，然后移动到顶部以隐藏。

以下 XAML 代码创建带有文本框的遮罩网格

 <Grid VerticalAlignment="Bottom" HorizontalAlignment="Stretch" 
	Height="150" Background="#00FFFFFF">
            <Grid.OpacityMask>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#00000000" Offset="0.283"/>
                    <GradientStop Color="#00000000" Offset="0.778"/>
                    <GradientStop Color="White" Offset="0.491"/>
                </LinearGradientBrush>
            </Grid.OpacityMask>
            <TextBlock x:Name="txtLoading" TextAlignment="Left" 
		FontSize="16" FontWeight="Normal"  Foreground="#FF052045"  
		Text="Beta 0.9"  TextWrapping="Wrap" VerticalAlignment="Bottom" 
		HorizontalAlignment="Right" Width="421" >
            <TextBlock.Effect>
     <DropShadowEffect BlurRadius="6" Color="#FF797979" Direction="201" 
		Opacity="0.68" ShadowDepth="3" />
                </TextBlock.Effect>
            </TextBlock>            
        </Grid>

grid的背景值为=#00FFFFFF，即完全透明。我们不需要显示grid，但如果没有背景，遮罩将无法工作。您可以在之前的 XAML 中注意到textblock具有阴影效果。

在设计视图中，它将看起来像这样

创建动画

在 WPF 中，您可以定义动画。您无需自己编写。在 Microsoft Blend 中，只需添加一个新的storyboard并定义关键帧，然后进行更改，就像 Flash 一样，但 WPF 将生成可读的动画格式。动画将在窗口资源标记中定义，并通过键访问。以下代码显示了两个故事板，每个故事板的持续时间为一秒钟，只需更改textblock的底部边距即可根据不透明度遮罩从隐藏区域移动到可见区域，反之亦然。

<Window.Resources>
        <Storyboard x:Key="showStoryBoard">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty=
		"(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading">
                <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,0"/>
                <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,70"/>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
        
        <Storyboard x:Key="HideStoryBoard">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty=
		"(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading">
                <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,70"/>
                <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,150"/>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

使用代码隐藏

现在我们已经在 XAML 中创建了我们需要的内容。在代码隐藏中，我们将创建一个线程来执行加载工作并制作文本动画，首先我们需要访问动画，定义两个storyboard对象来访问窗口资源storyBoards。

 Storyboard Showboard;
 Storyboard Hideboard;

要通过以下代码访问窗口资源，只需在调用InitializeComponent()之后

Showboard = this.Resources["showStoryBoard"] as Storyboard;
Hideboard = this.Resources["HideStoryBoard"] as Storyboard;

创建两个函数 - 一个用于显示文本，一个用于隐藏文本，如下所示

  private void showText(string txt)
        {
            txtLoading.Text = txt;
            BeginStoryboard(Showboard);
        }
 private void hideText()
        {
            BeginStoryboard(Hideboard);
        }

我们需要为每个函数创建一个委托，以启用从加载线程的调用，如下所示

  private void load()
        {
            Thread.Sleep(1000);
            this.Dispatcher.Invoke(showDelegate, "first data to loading");
            Thread.Sleep(2000);
            //do some loading work
            this.Dispatcher.Invoke(hideDelegate);

            Thread.Sleep(2000);
            this.Dispatcher.Invoke(showDelegate, "second data loading");
            Thread.Sleep(2000);
            //do some loading work
            this.Dispatcher.Invoke(hideDelegate);

            Thread.Sleep(2000);
            this.Dispatcher.Invoke(showDelegate, "last data loading");
            Thread.Sleep(2000);
             //do some loading work 
            this.Dispatcher.Invoke(hideDelegate);
            
            //close the window
            Thread.Sleep(2000);
            this.Dispatcher.Invoke(DispatcherPriority.Normal,
		(Action)delegate() { Close(); });
        }

显示启动画面

有很多方法可以显示启动画面，但我认为最简单的方法是在主窗口的InitializeComponent之后添加以下代码

 new SplashWindow().ShowDialog();

我希望您觉得这有用。

关注点

关键点是使用不透明度遮罩和从代码隐藏访问故事板，以及 WPF 中动画的强大功能。

历史

• 2010 年 10 月 10 日：首次发布