Silverlight数据加载时,等待图标显示与隐藏(Loading)

在我们开发SilverLight时,在加载大的数据时,需要很长时间,为了给用户一个好的印象,我们给一个正在加载的提示,下面我就把简单的程序贴出来,希望对大家有帮助

waiting.xaml
<UserControl x:Class="Example.Portal.Common.Waiting"
    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"
    d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">
        <Grid Background="Black" Opacity="0.2"></Grid>
        <Canvas Width="320" Height="50">
            <Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Fill="#19000000" Height="49" Width="316" Canvas.Left="6" Canvas.Top="3"/>
            <Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Fill="#19000000" Height="48" Width="316" Canvas.Left="5" Canvas.Top="3"/>
            <Border Height="50" Width="320" Background="#FFFFFFFF" BorderBrush="#FFACACAC" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
                <Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Margin="1,1,1,1">
                    <Rectangle.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFFFFFFF"/>
                            <GradientStop Color="#FFE9E9E9" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Border>
        </Canvas>
        <Grid Width="320" Height="50" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*" />
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="80*" />
                <ColumnDefinition Width="5*" />
            </Grid.ColumnDefinitions>
           <!--waiting.png自己可以找一个图片-->
            <Image Stretch="None" Source="../Resources/Image/waiting.png" Grid.Column="1" Opacity="0.3" />
            <Image x:Name="WaitingImage" Stretch="None" Source="../Resources/Image/waiting.png" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="0"></RotateTransform>
                </Image.RenderTransform>
            </Image>
            <TextBlock x:Name="titleText" FontFamily="Calibri" FontSize="13" Foreground="#FF000000" HorizontalAlignment="Left" Grid.Column="3"/>
            <TextBlock Text="Waiting..." x:Name="waitingText"
       FontFamily="Verdana" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="2"/>
        </Grid>
    </Grid>
    <UserControl.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="WaitingImage"  Duration="0:0:0.7" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).RotateTransform.Angle" RepeatBehavior="Forever"></DoubleAnimation>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="waitingText" Storyboard.TargetProperty="Opacity" RepeatBehavior="Forever">
                <SplineDoubleKeyFrame KeyTime="00:00:0.0" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:1.0" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
</UserControl>

waiting.cs

using System.Windows.Controls;
namespace Example.Portal.Common
{
    public partial class Waiting : UserControl
    {
        public Waiting()
        {
            InitializeComponent();
            this.storyboard.Begin();
        }
        /// <summary>
        /// 标题
        /// </summary>
        public string Title
        {
            get { return this.titleText.Text; }
            set { this.titleText.Text = value; }
        }
        public void SetLoadingText(string text)
        {
            this.waitingText.Text = text;
        }
        public void SetLoadingText()
        {
            this.waitingText.Text = "正在处理,请稍候......";
        }
    }
}

下面咱们再定义一个类,对外接口,以后直接调用下这个类就可以了
window.cs
using System;
using System.Windows;
using System.Windows.Controls;
namespace Example.Portal.Common
{
    public class Windows
    {
        private static Waiting waiting;
        private static string waitingName = "waiting";
        static Windows()
        {
            if (waiting == null)
            {
                //取得主要应用程序界面
                UserControl rootPage =Application.Current.RootVisual as UserControl;
                if (rootPage != null)
                {
                    //取得应用程序界面中waiting节点
                    waiting = rootPage.FindName(waitingName) as Waiting;
                }
            }
        }
        /// <summary>
        /// 显示等待信息
        /// </summary>
        /// <param name="message"></param>
        public static void ShowWaiting(string message)
        {
            try
            {
                if (waiting != null)
                {
                    waiting.Dispatcher.BeginInvoke(() =>
                    {
                        waiting.Visibility = Visibility.Visible;
                        waiting.SetLoadingText(message);
                    });
                }
            }
            catch(Exception e)
            {
                string str = e.Message.ToString();
            }
        }
        /// <summary>
        /// 显示等待信息
        /// </summary>
        public static void ShowWaiting()
        {
            try
            {
                if (waiting != null)
                {
                    waiting.Dispatcher.BeginInvoke(() =>
                    {
                        waiting.Visibility = Visibility.Visible;
                        waiting.SetLoadingText();
                    });
                }
            }
            catch (Exception e)
            {
                string str = e.Message.ToString();
            }
        }
        /// <summary>
        /// 隐藏等待信息
        /// </summary>
        public static void HideWaiting()
        {
            if (waiting != null)
                waiting.Dispatcher.BeginInvoke(() => waiting.Visibility = Visibility.Collapsed);
        }
    }
}

写好上面之后,还不能直接使用,现在使用的话,还不能显示等待信息,还要在程序集中加入一下代码(一般是index.xaml中)
xmlns:local="clr-namespace:HIEG2.Portal.Common;assembly=HIEG2.Portal.Common"

<Grid x:Name="loadingGrid">
        <local:Waiting x:Name="waiting" Visibility="Collapsed"/>
    </Grid>

设置上面之后,基本上已经可以了,下面就可以直接使用了,比如要加载一个数据,比较大,那么直接可以用,如下
Windows.ShowWaiting();
//写加载的代码,如果你使用异步加载,那么隐藏时要注意一下,要等待加载完数据之后再隐藏
Windows.HideWaiting();

自己能力有限,大家可以发挥自己的才智,可以把它做的更好

posted @ 2010-08-17 17:51  天神一  阅读(4192)  评论(3编辑  收藏  举报