Silverlight中的WattingDialog

Silverlight中用经常有耗时操作，此时就要用WattingDialog改善用户体验

主要思想有二个。

1．  用ChildWindow来作WattingDialog的载体。

2．  用一个线程来显示WattingDialog.

WattingDialog.xaml

原来的ChildWindow有标题和边框，并且显示时会有弹出动画。标题、边框和弹出动画都是没用的，应当删除。先用Blend=>edit a copy.把没用的东西删除。

<sdk:ChildWindow xmlns:my="clr-namespace:Controls.SL" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"      
         x:Class="Controls.SL.WattingDialog"
         Width="350" Height="80">
    <sdk:ChildWindow.Resources>
        <Style x:Key="ChildWindowStyle1" TargetType="sdk:ChildWindow">
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="TabNavigation" Value="Cycle"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="OverlayBrush" Value="#7F000000"/>
            <Setter Property="OverlayOpacity" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:ChildWindow">
                        <Grid x:Name="Root">
                            <Grid x:Name="Overlay" Background="{TemplateBinding OverlayBrush}" HorizontalAlignment="Stretch" Margin="0" Opacity="{TemplateBinding OverlayOpacity}" VerticalAlignment="Top"/>
                            <Grid x:Name="ContentRoot" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
                                <Border  CornerRadius="2">
                                    <Grid>
                                        <Border Background="{TemplateBinding Background}" >
                                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </sdk:ChildWindow.Resources>
    <sdk:ChildWindow.Style>
        <StaticResource ResourceKey="ChildWindowStyle1"/>
    </sdk:ChildWindow.Style>
    <Grid x:Name="LayoutRoot">
        <Canvas >
            <Rectangle RadiusX="10" RadiusY="10" Width="350" Height="80" >
                <Rectangle.Fill>
                    <SolidColorBrush Color="Silver"></SolidColorBrush>
                </Rectangle.Fill>
            </Rectangle>

            <TextBlock VerticalAlignment="Center" FontWeight="Thin" FontSize="30" Text="等一下吧。。。" Canvas.Left="72" Canvas.Top="20"></TextBlock>
        </Canvas>
    </Grid>
</sdk:ChildWindow>

WattingDialog.xaml.cs

namespace Controls.SL
{
    public partial class WattingDialog : ChildWindow
    {

        public WattingDialog()
        {
            InitializeComponent();
        }

        public void ShowWattingDialog()
        {
            this.Show();
        }
        public void CloseWattingDialog()
        {
            this.Close();
        }
    }

}

此外，由于WaittingDalog要在另外一个线程中显示。因此用了BackgroundWorker来建立显示线程。

WattingHelper.cs

    public class WattingHelper
    {
        private WattingDialog wattingDialog = null;
        private Action DoWorkAction = null;
        private FrameworkElement DependencyObj = null;

        public WattingHelper(FrameworkElement dObj, Action DoWork)
        {
            this.DependencyObj = dObj;
            this.DoWorkAction = DoWork;
            BackgroundWorker bw=new BackgroundWorker ();
            bw.DoWork += new DoWorkEventHandler(bw_DoWork);
            bw.RunWorkerCompleted += new RunWorkerCompletedEventHandler(bw_RunWorkerCompleted);
            bw.RunWorkerAsync();
        }

        void bw_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            DependencyObj.Dispatcher.BeginInvoke(new Action(() =>

{
    wattingDialog.CloseWattingDialog();

    wattingDialog = null;

}));
        }

        void bw_DoWork(object sender, DoWorkEventArgs e)
        {
            DependencyObj.Dispatcher.BeginInvoke(new Action(() =>
{
    wattingDialog = new WattingDialog();
    wattingDialog.ShowWattingDialog();
}));
            DoWorkAction();
        }

        public static void ShowWaittingDialog(FrameworkElement dObj,Action DoWork)
        {
            WattingHelper wattingHelper=new WattingHelper (dObj,DoWork);
        }
    }

调用方法。

            WattingHelper.ShowWaittingDialog(this, () =>
            {

                            //耗时操作。

          });

最后结果。