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();
    }
}