在Silverlight中使用对话框(Dialog)

在SL中经常会用到一些对话框,这里介绍几种常用的对话框及制作方法。

 

1. 利用MessageBox显示对话框

dialog_1

优点:简单,只要调用MessageBox.Show方法就可以显示出来。

缺点:单调,不够友好,只能用于一般的信息提示。

说明:没什么好说的。:)

代码:

MessageBox.Show("This is a MessageBox dialog.", "MessageBox", MessageBoxButton.OK);

 

2. 利用Window.Alert或JS显示对话框

dialog_2

优点:和MessageBox一样,简单易用,还可以同JS进行交互,显示Confirm对话框等。

缺点:也和MessageBox一样,不够专业。 :)

说明:其实是借助JS来显示对话框,这种用法的优势,还是在于同JS的交互,如果只是显示Message,不如用MessageBox来的方便。

代码:

HtmlPage.Window.Alert("This is a Alert dialog");

 

3. 利用Popup显示自制对话框

dialog_3

优点:自定义,可以同SL的APP结合的非常好。

缺点:稍显复杂,不利于分开维护

说明:利用Popup来显示对画框,这里使用代码的方式动态创建一个Border控件,并通过改变Popup.IsOpen来显示和隐藏对话框。

代码:

        // create a Border instance for message show

        private Border CreateMessageBox(string message, RoutedEventHandler clickHandler)

        {

            Border border = new Border();

            border.Width = 175;

            border.Height = 120;

            border.CornerRadius = new CornerRadius(5);

            border.BorderThickness = new Thickness(1.5);

            border.BorderBrush = new SolidColorBrush(Colors.DarkGray);

            border.Background = new SolidColorBrush(Colors.LightGray);



            Grid grid = new Grid();

            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(60) });

            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(60) });



            TextBlock tb = new TextBlock()

            {

                Text = message,

                VerticalAlignment = VerticalAlignment.Center,

                HorizontalAlignment = HorizontalAlignment.Center

            };

            Grid.SetRow(tb, 0);

            grid.Children.Add(tb);



            Button bn = new Button()

            {

                Content = "OK",

                Width = 75,

                Height = 25,

                HorizontalAlignment = HorizontalAlignment.Center,

                VerticalAlignment = VerticalAlignment.Center

            };

            Grid.SetRow(bn, 1);

            bn.Click += clickHandler;

            grid.Children.Add(bn);



            border.Child = grid;



            return border;

        }



        // use Popup to show a message

        Popup popup = new Popup();

        Border border = this.CreateMessageBox("This is a Popup dialog.", (m, n) => popup.IsOpen = false);

        popup.Child = border;

        popup.IsOpen = true;

 

4. 使用ChildWindow作为对话框

dialog_4

优点:简单易用,效果很好,可以自定义,在单独的文件中利用维护。

缺点:需要设计合理的和重复利用的ChildWindow,用于减少文件的增加。

说明:推荐使用的对话框模式,无论是显示效果,还是开发过程,以及后期的维护,都是很有优势的一种模式。这里没有什么要说的,新建一个ChildWindow,增加一个TextBlock用于显示Message。这里就不把ChildWindow的代码贴出来了,大家可以下载源代码。

代码:

ChildWindow1 cw = new ChildWindow1();

cw.Show();

 

5. 利用控件的Visibility达到对话框的效果

这里就不贴图了,和Popup的那个图一样。

优点:支持大部分控件。

缺点:不太好用,应该算是一种Workaround。

说明:这种做法在SL2的时候很常用,在SL3后,有了ChildWindow,基本就废弃了吧。不过,如果在一个Canvas中做一个可以随意的Dialog,还是一个很不错的选择。这里使用Popup中创建的Border,并加载到Grid中。

            UIElement elem = this.LayoutRoot.Children.FirstOrDefault((m) => m is Border);

            if (elem == null)

            {

                Border border = null;

                border = this.CreateMessageBox("This is a Custom dialog.", (m, n) =>

                    {

                        border.Visibility = Visibility.Collapsed;  // close dialog

                    });

                Grid.SetRow(border, 2);

                Grid.SetColumn(border, 0);

                Grid.SetColumnSpan(border, 3);

                this.LayoutRoot.Children.Add(border);

                elem = border;

            }

            elem.Visibility = Visibility.Visible;  // show dialog

 

完结。

下载源代码:DialogDemo.zip

你可能感兴趣的:(silverlight)