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"
designWidth="640" 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();
自己能力有限,大家可以发挥自己的才智,可以把它做的更好