65.9K
CodeProject 正在变化。 阅读更多。
Home

简单的灵活 Silverlight 启动屏幕

李松博士
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.15/5 (8投票s)

2009年12月13日

CPOL

4分钟阅读

viewsIcon

49029

downloadIcon

1009

本文介绍了一种创建 Silverlight 启动画面的简单而灵活的方法。

引言

本文介绍了一种创建 Silverlight 应用程序启动画面的简单而灵活的方法。

背景

我的一项项目是将一个 Windows Forms 应用程序迁移到 Silverlight。业务部门希望在其中包含一个启动画面。在网上搜索，我找到了 Nipun Tomar 的文章《Silverlight 2 中 XAML 页面之间的导航和值传递》，讨论了如何在 Silverlight 中导航 XAML 页面。基于这种导航方法，可以轻松实现启动画面。下面将一步一步介绍如何为 Silverlight 应用程序添加一个简单而灵活的启动画面。

创建一个空的 Silverlight 项目

在 Visual Studio 2008 中，按照 Microsoft 的说明，使用《创建新的 Silverlight 项目》来创建一个空的 Silverlight 应用程序，并带有一个托管 Silverlight 应用程序的网站，将 Silverlight 项目命名为 "SplashDemoApplication"。默认情况下，会创建一个名为 "SplashDemoApplication" 的解决方案。在此解决方案中，向导会创建两个项目。一个是 Silverlight 项目，另一个是名为 "SplashDemoApplicationWeb" 的托管网站项目。

默认情况下，"SplashDemoApplicationWeb" 项目被设置为 Visual Studio 在调试模式下运行的启动项目。为了在 Visual Studio 环境中通过网页在调试模式下运行 Silverlight 应用程序，我们可以右键单击解决方案资源管理器中的 "SplashDemoApplicationTestPage.aspx" 文件，并将其设置为启动页。

现在，如果在调试模式下运行 Silverlight 应用程序，将会启动一个网页浏览器窗口，显示一个空白屏幕，因为我们还没有向 Silverlight 应用程序添加任何内容。

添加启动画面 XAML 文件和内容

Solution Explorer

由于本文不打算讨论 WPF 和 XAML 的编程，因此除了 Visual Studio 创建的默认文件之外，我们将向项目中添加一个名为 "Splash.xaml" 的新 XAML 文件，这将是演示中的启动画面。Visual Studio 2008 默认添加的 "MainPage.xaml" 将作为演示目的的主 Silverlight 应用程序页面。

在向 "Splash.xaml" 文件添加了 "images" 文件夹后，我们将其中放入两张图片 "NiagaraFalls.jpg" 和 "Dock.jpg"。每张图片将嵌入到一个 XAML 页面中。

修改 XAML 文件以包含图片

为了让 XAML 页面显示一些内容，我们将在其中添加一张图片。我们需要编辑这两个 XAML 文件。我们首先在 "Splash.xaml" 文件中添加 "NiagaraFalls.jpg"。

<UserControl x:Class="SplashDemoApplication.Splash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Cursor="Wait">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Image Source="images/NiagaraFalls.jpg" 
                Width="750" />
    </Grid>
</UserControl>

然后，在 "MainPage.xaml" 中添加 "Dock.jpg" 和一些文本。

<UserControl x:Class="SplashDemoApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Grid x:Name="LayoutRoot" Margin="10, 50, 10, 50">
       <Grid.RowDefinitions>
           <RowDefinition Height="60"/>
           <RowDefinition Height="42"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
 
        <TextBlock Grid.Row="0" 
          Text="A Simplex Silverlight Splash Screen Demonstration" 
          HorizontalAlignment="Center" 
          FontFamily="Verdana" FontSize="25" 
          FontWeight="Bold" Foreground="Brown" />
        <TextBlock Grid.Row="1" 
           Text="This is the main Silverlight user control 
                  displayed after the splash screen" 
           HorizontalAlignment="Center" 
           FontFamily="Verdana" FontSize="20" 
           Foreground="Green" VerticalAlignment="Top" />
        <Image Grid.Row="2" 
           Source="images/Dock.jpg" 
           HorizontalAlignment="Stretch" />
  </Grid>
</UserControl>

修改 App.xaml 的代码隐藏文件

Silverlight 应用程序的起点是 "App.axml" 的代码隐藏文件。我们将修改默认的 "App.xaml.cs"，以便 Silverlight 首先加载 "Splash.axml"，然后在短暂延迟后切换到 "MainPage.axml"，从而实现启动效果。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SplashDemoApplication
{
    public partial class App : Application
    {
        private Grid root;
 
        public void Navigate(UserControl NewPage)
        {
            root.Children.Clear();
            root.Children.Add(NewPage);
        }
 
        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;
 
            InitializeComponent();
        }
 
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            root = new Grid();
            root.Children.Add(new Splash());
            this.RootVisual = root;
  
            System.Threading.Thread Worker = 
               new System.Threading.Thread(
               new System.Threading.ThreadStart(BackgroundWork));
            Worker.Start();
        }
 
        private void BackgroundWork()
        {
            System.Threading.Thread.Sleep(2000);
            Deployment.Current.Dispatcher.BeginInvoke(() => Navigate(new MainPage()));
        }
  
    }
}

在上面的 C# 代码中，我们在 "App" 类中添加了一个类型为 "Grid" 的私有变量 "root" 和一个名为 "Navigate" 的方法。在 "Application_Startup" 方法中，我们没有像 Visual Studio 默认创建的那样直接将启动 XAML 页添加到 "RootVisual" 中，而是先将其添加到 "root" Grid 中，然后再将 Grid 添加到 "RootVisual" 中。通过这样做，我们可以通过简单地调用 "Navigate" 方法在不同的 XAML 页面之间导航。有关此导航方法的更多详细信息，请参阅《Silverlight 2 中 XAML 页面之间的导航和值传递》。

当 Silverlight 应用程序运行时，"Splash.xaml" 将首先加载并显示在浏览器中。然后，应用程序将启动一个后台线程来调用 BackgroundWork 方法。在此演示项目中，我只是让该线程休眠一段时间，然后调用 "Navigate" 来加载 "MainPage.xaml"，以实现启动画面的效果。

运行应用程序

编译并运行应用程序。我们可以看到 "Splash.xaml" 页面首先加载，然后在线程休眠时间结束后，应用程序切换到 "MainPage.xaml"。这样就实现了启动效果。

Splash

MainPage

关注点

除了 Nipun Tomar 介绍的导航方法之外，还有两点值得关注。

  1. 在 "Application_Startup" 方法完成之前，Silverlight 应用程序中将不会显示任何可见的组件。我们需要在应用程序主线程的 "Application_Startup" 中加载 "Splash.xaml"，并启动另一个线程来加载 "MainPage.xaml"。
  2. 在加载 "MainPage.xaml" 的线程中，我只是让它休眠以实现启动效果。在实际的 Silverlight 应用程序中，我们应该利用这段时间执行一些实际的后台工作，例如初始化 WCF 对象、加载一些初始设置数据等。

历史

这是本文的第一个版本。

© . All rights reserved.