MVVM下DataGrid的简单应用

基于MVVM模式下DataGrid的简单应用，本实例将实现一个用户列表的展示和一些数据操作功能，如图1。



图1

实例要求：

（1）实现用户列表的绑定。

（2）绑定性别属性时，使用Converter对性别属性的转化。

（3）绑定日期时，对日期格式的转换。

（4）点击“编辑”按钮能够获取用户信息。

（5）点击“删除”按钮能够获取用户编号。

1、实体层

在实体层中创建用户信息实体类（UserModel.cs）。

/// <summary>
/// 用户信息实体类
/// </summary>
public class UserModel : INotifyPropertyChanged
{
private int _id;
/// <summary>
/// 编号
/// </summary>
public int Id
{
get { return _id; }
set
{
_id = value;
this.NotifyPropertyChanged("Id");
}
}

private string _name;
/// <summary>
/// 姓名
/// </summary>
public string Name
{
get { return _name; }
set
{
_name = value;
this.NotifyPropertyChanged("Name");
}
}

private int _sex;
/// <summary>
/// 性别(0：男，1：女)
/// </summary>
public int Sex
{
get { return _sex; }
set
{
_sex = value;
this.NotifyPropertyChanged("Sex");
}
}

private DateTime? _jobDate;
/// <summary>
/// 入职时间
/// </summary>
public DateTime? JobDate
{
get { return _jobDate; }
set
{
_jobDate = value;
this.NotifyPropertyChanged("JobDate");
}
}

public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

2、ViewModel层

在ViewModel层中创建用户列表ViewModel类（UserListViewModel.cs）。

/// <summary>
/// 用户列表ViewModel类
/// </summary>
public class UserListViewModel : INotifyPropertyChanged
{
public List<UserModel> _userList = new List<UserModel>();
/// <summary>
/// 用户列表
/// </summary>
public List<UserModel> UserList
{
get
{
return this._userList;
}
set
{
this._userList = value;
this.RaisePropertyChanged("_userList");
}
}

/// <summary>
/// 初始化
/// </summary>
public UserListViewModel()
{
//加载数据
UserList = new List<UserModel>(){
new UserModel(){Id=1,Name="张三",Sex=0,JobDate=DateTime.Now},
new UserModel(){Id=2,Name="李四",Sex=1,JobDate=DateTime.Now},
new UserModel(){Id=3,Name="王五",Sex=0,JobDate=DateTime.Now},
new UserModel(){Id=4,Name="孙六",Sex=0,JobDate=DateTime.Now},
new UserModel(){Id=5,Name="黄七",Sex=1,JobDate=DateTime.Now},
};
}

//属性改变事件
public event PropertyChangedEventHandler PropertyChanged;

//当属性改变的时候，调用该方法来发起一个消息，通知View中绑定了propertyName的元素做出调整
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

/// <summary>
/// 编辑命令
/// </summary>
public class EditCommand : ICommand
{
public bool CanExecute(object parameter)
{
return true;
}

public event EventHandler CanExecuteChanged;

public void Execute(object parameter)
{
UserModel userInfo = parameter as UserModel;
if(userInfo!=null)
{
//执行编辑
}
}
}

/// <summary>
/// 删除命令
/// </summary>
public class DeleteCommand : ICommand
{
public bool CanExecute(object parameter)
{
return true;
}

public event EventHandler CanExecuteChanged;

public void Execute(object parameter)
{
int id = (int)parameter;
if (id > 0)
{
//执行删除
}
}
}

3、表现层

在表现层中创建Converter目录，并创建SexConverter.cs，用于对性别属性的转换。

public class SexConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string result = "";
string sex = value.ToString();
if (sex == "0")
{
result = "男";
}
else if (sex == "1")
{
result = "女";
}
return result;
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

创建用户列表窗体（UserList.xaml）。

前台代码：

<Window x:Class="Simple.Calculator.WinForm.UserList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Simple.Calculator.ViewModel;assembly=Simple.Calculator.ViewModel"
xmlns:conv="clr-namespace:Simple.Calculator.WinForm.Converter"
Title="用户列表" Height="260" Width="400">
<Window.Resources>
<!--DataGrid样式-->
<Style TargetType="{x:Type DataGrid}" x:Key="gDataGrid">
<Setter Property="Margin" Value="0,10,0,10"/>
<Setter Property="HorizontalGridLinesBrush" Value="#c5cfd8"/>
<Setter Property="VerticalGridLinesBrush" Value="#c5cfd8"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="CanUserSortColumns" Value="False"/>
<Setter Property="IsReadOnly" Value="True"/>
</Style>
<Style TargetType="DataGridRow">
<Setter Property="Height" Value="32"/>
<Setter Property="FontSize" Value="12" />
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="Foreground" Value="#667a95" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
BorderBrush="#e6dbba"
Width="Auto">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0"
VerticalAlignment="Center" RenderTransformOrigin="1,1" />
<Rectangle Width="1" Fill="#c5cfd8" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="30"/>
</Style>

<!--命令-->
<vm:EditCommand x:Key="EditCommand"/>
<vm:DeleteCommand x:Key="DeleteCommand"/>

<!--Converter-->
<conv:SexConverter x:Key="SexConverter"/>
</Window.Resources>

<!--列表-->
<DataGrid Grid.Row="1" Margin="10" Style="{StaticResource gDataGrid}" ItemsSource="{Binding UserList, Mode=TwoWay}">
<DataGrid.Columns>
<DataGridTextColumn Header="姓名" Width="90" Binding="{Binding Name}"/>
<DataGridTextColumn Header="性别" Width="90" Binding="{Binding Sex,Converter={StaticResource SexConverter}}"/>
<DataGridTextColumn Header="入职时间" Width="*" Binding="{Binding JobDate,StringFormat=yyyy-MM-dd}"/>
<DataGridTemplateColumn Header="操作" Width="90">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="详情" Margin="10,0" Command="{StaticResource EditCommand}" CommandParameter="{Binding}" />
<Button Content="删除" Command="{StaticResource DeleteCommand}" CommandParameter="{Binding Id}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Window>

后台代码：

/// <summary>
/// UserList.xaml 的交互逻辑
/// </summary>
public partial class UserList : Window
{
public UserList()
{
InitializeComponent();
this.DataContext = new UserListViewModel();
}
}