[Silverlight]Silverlight2中打造SplashScreen 1

何谓SplashScreen?在SL中，SplashScreen就是初始化屏幕，也就是说我们可以通过一个SplashScreen来实现自定义的Loading效果代替SL中默认的“小点点绕圈圈”。

这篇文章中我们主要实现动画部分，下一篇文章将说明如何将这次将的动画制作成SplashScreen

不说废话，先看下效果

正如你所看到的，我们这里要实现效果就是用颜色填充这个Logo(广告时间：该logo就是俺设计的4mvc小组的logo,对mvc有爱的同学欢迎访问:http://www.51mvc.com)。

ps:我这里的实现办法可能有些笨，还望高手指点。

首先我们要准备两张图片

分别命名为logo1和logo2并将其导入至工程中

然后进行XMAL的编写，代码如下

<UserControl x:Class="SilverlightDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >
    <Border BorderBrush="DarkRed" BorderThickness="2" Width="300" Height="300" CornerRadius="25">
        <Border.Background>
            <LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
                <GradientStop Color="DarkRed" Offset="0"/>
                <GradientStop Color="Transparent" Offset="0.4"/>
            </LinearGradientBrush>
        </Border.Background>
        <Canvas x:Name="LayoutRoot">
            <Image Canvas.ZIndex="1" x:Name="imgLogo1" Canvas.Left="20" Canvas.Top="30" Source="Image/logo1.jpg">
                <Image.Clip>
                    <RectangleGeometry x:Name="rg" Rect="0,0,135,0">
                    </RectangleGeometry>
                </Image.Clip>
            </Image>
            <TextBlock Canvas.Top="80" Canvas.Left="160">
                <Run x:Name="txtPercent" Text="0"/>
                <Run Text="%"/>
            </TextBlock>
            <Image  Canvas.ZIndex="0" x:Name="imgLogo2" Canvas.Left="20" Canvas.Top="30" Source="Image/logo2.jpg">
            </Image>
            <Button Content="开 始" Height="30" Width="80" Canvas.Top="100" Canvas.Left="160" x:Name="Button" Click="Button_Click"/>
        </Canvas>
    </Border>
</UserControl>

通过XAML可以看出，我实现这个效果的方式是用有颜色的logo覆盖无颜色的logo，通过使用Image.Clip中的RectangleGeometry实现置前图片的显示大小。注意这里的图片前后放置顺序使用了Canvas.ZIndex.

然后就好办了，在后台我们可以通过System.Windows.Threading.DispatcherTimer进行进度的模拟。请看代码

        private System.Windows.Threading.DispatcherTimer timer;
        private Rect rect;
        private double i = 1;
        public Page()
        {
            InitializeComponent();
            timer = new System.Windows.Threading.DispatcherTimer();
            rect = new Rect(0, 0, 135, 0);
            timer.Interval = new TimeSpan(0, 0, 0, 0, 20);
            timer.Tick += new EventHandler(timer_Tick);
        }

        void timer_Tick(object sender, EventArgs e)
        {
            if (i < imgLogo2.ActualHeight)
            {
                rect.Height = ++i;
                rg.Rect = rect;
                imgLogo1.Clip = rg;
                txtPercent.Text = (i / imgLogo2.ActualHeight * 100).ToString();
            }
            else
            {
                timer.Stop();
                MessageBoxResult result = MessageBox.Show("是否重新开始", "载入完毕", MessageBoxButton.OKCancel);
                if (result == MessageBoxResult.OK)
                {
                    i = 0;
                    rect.Height = 0;
                    imgLogo1.Clip = rg;
                    timer.Start();
                }
            }
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            timer.Start();
        }

代码很好懂，这里就不做过多的解释了。需要说明的是，Silverlight中提供了封装好的MessageBox类以及静态的Show()方法，它的返回值是MessageBoxResult枚举，定义如下

成员名称	说明
None	当前未使用此值。
OK	用户单击了"确定"按钮。
Cancel	用户单击了"取消"按钮或按下了 ESC。
Yes	当前未使用此值。
No	当前未使用此值。

 

这是十分方便的，在以往的版本中我们只能通过System.Windows.Browser.HtmlPage.Window.Alert以及System.Windows.Browser.HtmlPage.Window.Confirm来实现。值得注意的是System.Windows.Browser.HtmlPage.Window.Prompt并未在MessageBox中提供实现。