实现wpf中模式对话框
系统环境
本程序基于.net4.0，引入了mvvmlight轻量级框架。
Dialog类库
Dialog类库中包含3个文件
1.DialogView:
DialogView是一个自定义用户控件，在一个Grid中包含了2个Border：
第一个Border用于遮罩modal Dialog后面的地方
第二个Border是显示内容的地方将配置
VerticalAlignment="Center" HorizontalAlignment="Center"
使得显示内容居中在此Border中通过2层border实现了Dialog的圆角效果。
在内层Border内定义一个Grid，Grid拆分成2个Row，第一个Row中设置Title及关闭按钮；第二个Row显示被设置的窗体内容。
窗体内容为一个ContentControl通过DataBind来显示填充窗体内容。具体代码如下：
<Grid Visibility="{Binding Visibility}">
<Border Background="White" Opacity="{Binding Opcity}"></Border>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Border BorderThickness="1" BorderBrush="#34629E" Width="{Binding Width}" Height="{Binding Height}" CornerRadius="3">
<Border BorderThickness="1" BorderBrush="#9ACAFF" Background="#DAE7FA" CornerRadius="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<DockPanel Background="#057ABB" Grid.Row="0">
<Button DockPanel.Dock="Right" Margin="0,-8, 10, 0" Command="{Binding CloseCommand}">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Resources/Images/Dialog_Base_Close_Over.png"
Width="46" Height="19" DockPanel.Dock="Right" >
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style></Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Resources/Images/Dialog_Base_Close_Normal.png"
Width="46" Height="19" DockPanel.Dock="Right" >
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Border VerticalAlignment="Center" DockPanel.Dock="Left">
<Image Source="/Resources/Images/Dialog_Title.png" Width="18" Height="13" Margin="5,0"></Image>
</Border>
<Border DockPanel.Dock="Left" VerticalAlignment="Center">
<TextBlock Text="{Binding Title}" Foreground="White" FontSize="13"></TextBlock>
</Border>
</DockPanel>
<Grid Grid.Row="1">
<ContentControl Content="{Binding Content}"></ContentControl>
</Grid>
</Grid>
</Border>
</Border>
</Border>
</Grid>
2.DialogParam:
DialogParam中定义了窗体的5个基本属性
Opcity：控制透明度（0.0-1.0之间）
Title：窗体标题
Width：窗体宽度
Height：窗体高度
Content：窗体内容，为自定义ViewModel
public class DialogParam
{
public double Opcity { get; set; }
public string Title { get; set; }
public object Content { get; set; }
public int Height { get; set; }
public int Width { get; set; }
}
3.DialogViewModel:
DialogViewModel包含了DialogParam中的窗体的基本属性，用于Dialog中的绑定
Visibility：控制是否显示窗体
在DialogViewModel中使用了MvvmLight中的消息机制。注册了2个消息用token “Dialog_Open” 和 “Dialog_Close” 区分。
打开窗口消息：传入DialogParam对象，设置窗口属性及内容。
关闭窗口消息：通知消息，设置窗体不可用，并将窗体正文dispose。
代码如下：
public class DialogViewModel : ViewModelBase, IDisposable
{
#region Properties
private string _visibility = "Collapsed";
public string Visibility
{
set { _visibility = value; RaisePropertyChanged("Visibility"); }
get { return _visibility; }
}
private double _opcity;
private double _defaultOpcity = 0.5;
public double Opcity
{
set { _opcity = value; RaisePropertyChanged("Opcity"); }
get { return _opcity; }
}
private string _title { get; set; }
public string Title
{
set { _title = value; RaisePropertyChanged("Title"); }
get { return _title; }
}
private int _defaultWidth = 500;
private int _defaultHeight = 300;
private int _width;
public int Width
{
set { _width = value; RaisePropertyChanged("Width"); }
get { return _width; }
}
private int _height;
public int Height
{
set { _height = value; RaisePropertyChanged("Height"); }
get { return _height; }
}
private object _content { get; set; }
public object Content
{
get { return _content; }
set { _content = value; RaisePropertyChanged("Content"); }
}
#endregion
public RelayCommand OKCommand { get; set; }
public RelayCommand CloseCommand { get; set; }
/// <summary>
/// Initializes a new instance of the DialogViewModel class.
/// </summary>
public DialogViewModel()
{
//Messenger.Default.Send(
Messenger.Default.Register<DialogParam>(this, Constants.Dialog_Open, m =>
{
Visibility = "Visible";
Opcity = m.Opcity != 0 ? m.Opcity : _defaultOpcity;
Height = m.Height != 0 ? m.Height : _defaultHeight;
Width = m.Width != 0 ? m.Width : _defaultWidth;
Title = m.Title;
Content = m.Content;
});
Messenger.Default.Register<NotificationMessage>(this, Constants.Dialog_Close, m =>
{
Visibility = "Collapsed";
((ViewModelBase)Content).Dispose();
});
CloseCommand = new RelayCommand(() =>
{
Visibility = "Collapsed";
((ViewModelBase)Content).Dispose();
});
}
public void Dispose()
{
Messenger.Default.Unregister<NotificationMessage>(this);
Messenger.Default.Unregister<DialogParam>(this);
}
}
测试窗体
1.主窗体
模式窗体处在窗口的最前面并遮罩其后面的所有内容，所以需要再主窗体MainWindow中增加DialogView并为其绑定DialogViewModel
<Grid>
<vw:BoardView DataContext="{Binding Board}"></vw:BoardView>
<dialogvw:DialogView DataContext="{Binding Dialog}"></dialogvw:DialogView>
</Grid>
在MainViewModel中创建一个DialogViewModel对象，用于绑定DialogView及接收窗口消息。
2.两个测试窗体
定义两个测试窗口ADialogView和BDialogView，在其对应的ViewModel中定义保存和取消命令的响应方法，在保存命令的响应方法中触发保存事件并发出关闭按钮。而取消命令只发送保存按钮。
public class ADialogViewModel : ViewModelBase
{
public delegate void SaveHandler();
public event SaveHandler SaveEvent;
public RelayCommand SaveCommand { get; set; }
public RelayCommand CancelCommand { get; set; }
/// <summary>
/// Initializes a new instance of the ADialogViewModel class.
/// </summary>
public ADialogViewModel()
{
SaveCommand = new RelayCommand(() =>
{
if (SaveEvent != null)
{
SaveEvent();
}
Messenger.Default.Send<NotificationMessage>(new NotificationMessage(this, ""), Constants.Dialog_Close);
});
CancelCommand = new RelayCommand(() =>
{
Messenger.Default.Send<NotificationMessage>(new NotificationMessage(this, ""), Constants.Dialog_Close);
});
}
}
在资源文件中定义2个DataTemplate，DataType为ADialogViewModel和BDialogView，其内容分别为ADialog和BDialog：
<DataTemplate DataType="{x:Type dialogvm:ADialogViewModel}">
<dialogvw:ADialogView></dialogvw:ADialogView>
</DataTemplate>
<DataTemplate DataType="{x:Type dialogvm:BDialogViewModel}">
<dialogvw:BDialogView></dialogvw:BDialogView>
</DataTemplate>
3.主界面
BoardView是程序主界面内容，包含于主窗体中，其内定义了2个Button用于触发打开窗口的消息，在其对应的BoardViewModel中定义了两个RelayCommand，在其响应事件中设置DialogParam并发送打开窗口的消息。
如下代码所示，在响应事件中注册了SaveEvent事件的方法并配置了窗体的显示参数，最后发出打开窗口的消息。
ShowACommand = new RelayCommand(() =>
{
ADialogViewModel a = new ADialogViewModel();
a.SaveEvent += refreshBoardAfterA;
DialogParam param = new DialogParam();
param.Content = a;
param.Title = "A";
param.Height = 200;
param.Width = 200;
param.Opcity = 0.8;
Messenger.Default.Send<DialogParam>(param, Constants.Dialog_Open);
});
源码下载：
