[Silverlight入门系列]不用ChildWindow的自定义MessageBox及其MVVM实现(1)

Silverlight自身包含了MessageBox，但比较难看，网上有很多童鞋用Childwindow自定义实现了MessageBox，比如这篇。但个人不是很喜欢Childwindow，当然，ChildWindow深度自定义也是可以的，参考MSDN这篇文章，你还可以用Expression Blend来自定义它，参考这篇文章。今天我们不用Childwindow自定义实现MessageBox，最终效果如图（遮罩原界面+半透明边框+关闭按钮）：

 

没有提问的MessageBox效果：

 

调用方式如下：在任意页面Xaml底部加上该控件（默认是隐藏的）:

 

在Xaml.cs控制其打开：

 1: <UserControl x:Class="SLQueryTest.MessageboxExt"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   6:     mc:Ignorable="d" Visibility="Collapsed"   7:     d:DesignHeight="300" d:DesignWidth="400">

   8:     
   9:     <Grid x:Name="LayoutRoot" Background="Transparent">
  10:         <Grid Canvas.ZIndex="2" Margin="0" Background="#CC1D1D1D" >
  11:             <Border Background="#F5F5F5" Padding="10" Width="Auto" Height="Auto" CornerRadius="4"
  12:                     VerticalAlignment="Center" HorizontalAlignment="Center">
  13:                 <Grid>
  14:                     <Grid.RowDefinitions>
  15:                         <RowDefinition Height="Auto"/>
  16:                         <RowDefinition Height="*"/>
  17:                     </Grid.RowDefinitions>
  18:                     <Image Grid.Row="0" Source="/SLQueryTest;component/Assets/1317886528_cancel.png" Width="16" Height="16"
  19:                             MouseLeftButtonDown="Image_MouseLeftButtonDown"
  20:                                Margin="0,-20,-15,0" HorizontalAlignment="Right" Cursor="Hand">
  21:                         <Image.Effect>
  22:                             <DropShadowEffect Opacity=".8" BlurRadius="17" Color="White" ShadowDepth="0" />
  23:                         </Image.Effect>
  24:                     </Image>
  25:  
  26:                     <StackPanel Grid.Row="1" Margin="0" Orientation="Vertical" d:LayoutOverrides="Height" >
  27:                         <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
  28:                             <Image x:Name="icon" Source="/SLQueryTest;component/Assets/ok.png" Width="32" Height="32" VerticalAlignment="Top"/>
  29:                             <TextBlock x:Name="txtMsg" Foreground="#333" Height="50" Width="290" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,5,0,0"/>
  30:                         </StackPanel>
  31:                         
  32:                         <Border BorderThickness="0,1,0,0" BorderBrush="#DADADA" Height="1" Margin="0,5"/>
  33:                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0" VerticalAlignment="Top" >
  34:                             <Button x:Name="btnOK" Content="OK" Click="btnOK_Click" Style="{StaticResource BlueButton}"/>
  35:                             <Button x:Name="btnCancel" Content="No" Click="btnCancel_Click" Margin="10,0,0,0" Style="{StaticResource BlueButton}"/>
  36:                         </StackPanel>
  37:                     </StackPanel>
  38:                 </Grid>
  39:             </Border>
  40:         </Grid>
  41:  
  42:         <Border Background="White" Opacity="0.5" Canvas.ZIndex="1" 
  43:                 CornerRadius="6" BorderThickness="0" Width="380" Height="160"/>
  44:         
  45:     </Grid>
  46: </UserControl>
 

自定义Messagebox的代码（xaml）

 

1:  using System;
    2:  using System.Windows;
    3:  using System.Windows.Controls;
    4:  using System.Windows.Input;
    5:  using System.Windows.Media.Imaging;
    6:  
    7:  namespace SLQueryTest
    8: {
    9:      public  enum MessageBoxExecutionResults
   10:     {
   11:         Success, Fail
   12:     }
   13:      public  enum MessageBoxButtons
   14:     {
   15:         Ok, YesNo, OkCancel
   16:     }
   17:  
   18:      public  enum MessageBoxResults
   19:     {
   20:         Yes, No, Ok, Cancel, None
   21:     }
   22:  
   23:      public  partial  class MessageboxExt : UserControl
   24:     {
   25:          public MessageboxExt()
   26:         {
   27:             InitializeComponent();
   28:             Result = MessageBoxResults.None;
   29:         }
   30:  
   31:          private Action<MessageBoxResults> _dialogResultCallback;
   32:  
   33:          public  void Show( string text, MessageBoxExecutionResults resultType)
   34:         {
   35:             _dialogResultCallback =  null;
   36:             Result = MessageBoxResults.None;
   37:  
   38:              switch (resultType)
   39:             {
   40:                  case MessageBoxExecutionResults.Success:
   41:                     icon.Source =
   42:                          new BitmapImage( new Uri( " /SLQueryTest;component/Assets/ok.png ", UriKind.RelativeOrAbsolute));
   43:                      break;
   44:                  case MessageBoxExecutionResults.Fail:
   45:                     icon.Source =
   46:                          new BitmapImage( new Uri( " /SLQueryTest;component/Assets/warning.png ", UriKind.RelativeOrAbsolute));
   47:                      break;
   48:                  default:
   49:                      break;
   50:             }
   51:             btnCancel.Visibility = Visibility.Collapsed;
   52:             btnOK.Visibility = Visibility.Visible;
   53:             btnOK.Content =  " OK ";
   54:             txtMsg.Text = text;
   55:  
   56:             Visibility = Visibility.Visible;
   57:         }
   58:  
   59:          private MessageBoxResults _result;
   60:          public MessageBoxResults Result
   61:         {
   62:              get {  return _result; }
   63:              set
   64:             {
   65:                 _result = value;
   66:                  if (_dialogResultCallback !=  null)
   67:                     _dialogResultCallback(_result);
   68:             }
   69:         }
   70:  
   71:          public  void ShowPrompt(MessageBoxButtons style,  string promptText, Action<MessageBoxResults> dialogResultCallback)
   72:         {
   73:             Result = MessageBoxResults.None;
   74:              switch (style)
   75:             {
   76:                  case MessageBoxButtons.OkCancel:
   77:                     icon.Source =
   78:                          new BitmapImage( new Uri( " /SLQueryTest;component/Assets/question.png ", UriKind.RelativeOrAbsolute));
   79:                     btnCancel.Content =  " Cancel ";
   80:                     btnCancel.Visibility = Visibility.Visible;
   81:                     btnOK.Content =  " OK ";
   82:                     btnOK.Visibility = Visibility.Visible;
   83:                      break;
   84:                  case MessageBoxButtons.YesNo:
   85:                     icon.Source =
   86:                          new BitmapImage( new Uri( " /SLQueryTest;component/Assets/question.png ", UriKind.RelativeOrAbsolute));
   87:                     btnCancel.Content =  " No ";
   88:                     btnCancel.Visibility = Visibility.Visible;
   89:                     btnOK.Content =  " Yes ";
   90:                     btnOK.Visibility = Visibility.Visible;
   91:                      break;
   92:                  default:
   93:                      break;
   94:             }
   95:             txtMsg.Text = promptText;
   96:             _dialogResultCallback = dialogResultCallback;
   97:             Visibility = Visibility.Visible;
   98:         }
   99:  
  100:          public  void Hide()
  101:         {
  102:             Visibility = Visibility.Collapsed;
  103:         }
  104:  
  105:          private  void Image_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
  106:         {
  107:             Hide();
  108:         }
  109:  
  110:          private  void btnOK_Click( object sender, RoutedEventArgs e)
  111:         {
  112:             Result = MessageBoxResults.Yes;
  113:             Hide();
  114:         }
  115:  
  116:          private  void btnCancel_Click( object sender, RoutedEventArgs e)
  117:         {
  118:             Result = MessageBoxResults.Cancel;
  119:             Hide();
  120:         }
  121:     }

 122: } 

调用方法见上面的截图。但这不是MVVM模式兼容的。也就是说，如果你想在ViewModel中调用MessageBox，那么以上是不够的。下文讲如何用MVVM实现自定义MessageBox。 

 

 

原文出处： http://www.cnblogs.com/Mainz/archive/2011/10/06/2200199.html#

转载于:https://www.cnblogs.com/Caceolod/archive/2011/10/08/2201731.html