WindowsPhone开发如何创建动态启动界面

来源：互联网发布：淘宝立即购买灰色编辑：程序博客网时间：2024/04/25 21:57

本文采用WindowsPhone 8 SDK，vs 2013，此方法同样适用于wp7，wp8.1.
一般的wp8应用程序在创建时，项目目录中会默认提供一张在程序启动时显示的一张图片，名字叫SplashScreenImage.jpg。这是因为在程序启动时可能会耗费一定的时间来加载首界面，这时这张图片就会先出现。如果你要改变启动画面，使用自己定义好的另外的图片替换它就可以。但是如果，要在启动画面上显示动态的效果呢？下面就来说一下。
为了要在程序启动时显示动态界面，就要将一个页面在MainPage之前显示。也就是说，要把之前的默认的启动画面去掉。为了实现这个效果，需要先把SplashScreenImage.jpg删除掉。创建一个UserControl来显示动态效果，在MianPage显示之前，先显示该UserControl.同时控制其显示的时间，这个时间我们也是可以控制的。这里还要用到BackgroundWorker线程。
使用BackgroundWorker类，你在一个单独的后台线程进行操作，而让wp的渲染线程和UI线程继续执行不受影响。当线程中的事务处理完后可以反馈到ui线程上。
注意：在DoWork事件处理函数中不要操作任何用户界面对象。当然ProgressChanged和RunWorkerCompleted事件回调函数中，你能操作用户界面。具体的使用在后面的代码中，有详细说明。

首先，创建一个UserControl，如下图：

添加新建项
这里写图片描述
创建好了之后，要将其宽高改为height =800 ，weight = 480，不然覆盖不了整个屏幕。
下面是该control的xmal的代码，代码中有注释。

<UserControl x:Class="LoadingPage.LoadingControl"    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"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    d:DesignHeight="800"  d:DesignWidth="480"> <!--设置宽高-->    <!--控件动画资源定义-->    <UserControl.Resources>        <!--使用故事板-->        <Storyboard x:Key="LoadAnimation">            <DoubleAnimation From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever"                             Storyboard.TargetName="VisualTransform"                             Storyboard.TargetProperty="Angle"/>        </Storyboard>    </UserControl.Resources>    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}">        <!--使用 * 可以平均分配布局-->        <Grid.RowDefinitions>            <RowDefinition Height="*"/>            <RowDefinition Height="*"/>            <RowDefinition Height="*"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <TextBlock Text="正在加载，请稍后。。。" Grid.Row="1" VerticalAlignment="Center"                   HorizontalAlignment="Center"/>        <!-- grid里，使用path画一个圈，而动画以该grid为单位-->        <Grid  x:Name="Visual" Margin="0,30,0,0" RenderTransformOrigin="0.5,0.5" Grid.Row="2"              VerticalAlignment="Center" HorizontalAlignment="Center">            <Grid.RenderTransform>                <TransformGroup>                    <RotateTransform x:Name="VisualTransform"/>                </TransformGroup>            </Grid.RenderTransform>            <Path Width="50" Height="50" Stretch="Fill"                  StrokeThickness="5"                  StrokeStartLineCap="Round" Data="M1,0 A1,2,90,1,1,0,0">                <Path.Stroke>                    <LinearGradientBrush StartPoint="1,0.8" EndPoint="0.3,0.1">                        <GradientStop Color="White" Offset="0"/>                        <GradientStop Color="Transparent" Offset="1"/>                    </LinearGradientBrush>                </Path.Stroke>            </Path>        </Grid>    </Grid></UserControl>

其cs 代码如下：

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Navigation;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;using System.Windows.Media.Animation;namespace LoadingPage{    public partial class LoadingControl : UserControl    {        public LoadingControl()        {            InitializeComponent();            //设置根grid布局宽高为实际设备屏幕的宽高            LayoutRoot.Height = App.Current.Host.Content.ActualHeight;            LayoutRoot.Width = App.Current.Host.Content.ActualWidth;            //在loaded和unloaded时，添加路由事件，开始和停止动画            this.Loaded += new RoutedEventHandler(LoadingScreenControl_Loaded);            this.Unloaded += new RoutedEventHandler(LoadingScreenControl_Unloaded);        }        void LoadingScreenControl_Unloaded(object sender, RoutedEventArgs e)        {            //加载动画资源            Storyboard sb = this.Resources["LoadAnimation"] as Storyboard;            //停止动画            sb.Stop();        }        void LoadingScreenControl_Loaded(object sender, RoutedEventArgs e)        {            //加载动画资源            Storyboard sb = this.Resources["LoadAnimation"] as Storyboard;            //开始动画            sb.Begin();        }    }}

接下来，将要在MainPage中加入要处理的代码
1、添加以下命名空间，在MainPage.xaml.cs文件中：
using System.Threading;
using System.Windows.Controls.Primitives;
2、使用Popup类，将UserControl添加到Popup中，使其显示。
3、使用BackgroundWorker，进行计时（也可以做其他的初始化操作），让开始界面显示一定时间。
4、结束，取消显示popup

下面是MainPage.xaml.cs代码

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Navigation;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;using LoadingPage.Resources;using System.Windows.Controls.Primitives;using System.ComponentModel;using System.Threading;namespace LoadingPage{    public partial class MainPage : PhoneApplicationPage    {        // 构造函数        public MainPage()        {            InitializeComponent();            //在主页初始化后调用动态加载界面            LoadWelcomePage(2000);            // 用于本地化 ApplicationBar 的示例代码            //BuildLocalizedApplicationBar();        }        void LoadWelcomePage(int time)        {            //使用popup，将用户控件LoadingControl作为其孩子            Popup popup = new Popup();            LoadingControl loadingcontrol = new LoadingControl();            popup.Child = loadingcontrol;            popup.IsOpen = true;//设置为true 才会显示            //新建后台线程            BackgroundWorker bkw = new BackgroundWorker();            //需要在后台线程中做的工作，注意不能操作与UI线程相关内容            bkw.DoWork += ( (s,e) =>             {                Thread.Sleep(time);            });            //后台线程工作执行完后所要做的事情            bkw.RunWorkerCompleted += ( (s,e) =>             {                this.Dispatcher.BeginInvoke(() =>                 {                    popup.IsOpen = false                 });            });            //执行后台线程            bkw.RunWorkerAsync();        }        // 用于生成本地化 ApplicationBar 的示例代码        //private void BuildLocalizedApplicationBar()        //{        //    // 将页面的 ApplicationBar 设置为 ApplicationBar 的新实例。        //    ApplicationBar = new ApplicationBar();        //    // 创建新按钮并将文本值设置为 AppResources 中的本地化字符串。        //    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));        //    appBarButton.Text = AppResources.AppBarButtonText;        //    ApplicationBar.Buttons.Add(appBarButton);        //    // 使用 AppResources 中的本地化字符串创建新菜单项。        //    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);        //    ApplicationBar.MenuItems.Add(appBarMenuItem);        //}    }}

Thread.Sleep()方法在using System.Threading;命名空间中
BackgroundWorker在using System.Windows.Controls.Primitives;命名空间中

最后

如果不使用popup和usercontrol，而创建一个新的page，设置其为首页，是不是也可以。但是这样就会被页面堆栈记录，当进行返回操作时，就会返回到该也页面上来，就失去了起意义了。当然也可以管理页面堆栈，删除其记录，但是这样，就显得麻烦了。。

源码在这里

0 0