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

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

10-6-2011 10-00-13 PM

 

没有提问的MessageBox效果:

10-6-2011 9-59-12 PM

 

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

10-6-2011 9-16-36 PM

 

在Xaml.cs控制其打开:

10-6-2011 9-16-03 PM


 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)

 

1using System;
   2using System.Windows;
   3using System.Windows.Controls;
   4using System.Windows.Input;
   5using System.Windows.Media.Imaging;
   6:  
   7namespace 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#

posted @ 2011-10-08 09:57  海底的鱼  阅读(915)  评论(0编辑  收藏  举报