WPF+MVVM學習總結 DataGrid簡單案例

一、WPF概要

WPF（Windows Presentation Foundation）是微軟推出的基於Windows 的用戶界面框架，屬於.NET Framework 3.0的一部分。它提供了統一的編程模型、語言和框架，真正做到了分離界面設計人員與開發人員的工作；同時它提供了全新的多媒體交互用戶圖形界面。

1.1、 MVVM簡介

 　 在WPF中，MVVM(View-ViewModel-Model)開發模型用的很多，它具有低耦合，可重用行，相對獨立的設計和邏輯。所以備受廣大開發者的喜愛。View 說白了就是前台界面，ViewModel 是連接層(類似於MVC中的Controller），他將Model 層和View層結合起來，並封裝好命令，供View層綁定，Model層提供類的對象，供ViewModel可以輕松的訪問數據庫。MVVM是典型的WPF設計模式，view通過命令將所有用戶的輸入傳遞給viewmodel。view通過數據綁定從viewmodel中獲得數據。model不了解viewmodel的情況，viewmodel不了解view的情況

 

二、簡單案例DataGrid Binding顯示數據

1.Model:Model就是一個class，是對現實中事物的抽象，開發過程中涉及到的事物都可以抽象為Model，例如客戶，客戶的姓名、編號、電話、住址等屬性也對應了class中的Property，客戶的下訂單、付款等行為對應了class中的方法。

2. View:View很好理解，就是視圖界面。

3. ViewModel:上面說過Model抽象，那么ViewModel就是對View的抽象。顯示的數據對應着ViewMode中的Property，執行的命令對應着ViewModel中的Command。

（通過一個例子來解釋MVVM 讓我使用MVVM創建一個簡單的用戶管理應用程序。按部就班我們必須首先定義Model(模式)，然后定義ViewModel，最后定義View。）

2.1、創建Model

public class User
    {
        /// <summary>
        /// 編號
        /// </summary>
        public int ID { get; set; }
        /// <summary>
        /// 姓名
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 年齡
        /// </summary>
        public int Age { get; set; }

        /// <summary>
        /// 性別
        /// </summary>
        public string Sex { get; set; }
        /// <summary>
        /// 備注
        /// </summary>
        public string Remarks { get; set; }
    }

2.2、創建ViewModel

字面上看，ViewModel的意思是“視圖 模型”，也可以被認為是view的抽象，但是它也是一個特殊化的模式，並且其view可以使用數據綁定。最新的角色，ViewModel包含了一個數據傳送器，即將Model中的數據傳送到View中。ViewModel中同樣包含了一些命令，這樣可以使得View可以與Model進行交互。

public class UserViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string propertyName)
        {
            if (propertyName != null)
            {
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

在ViewModel中增加一個類UserViewModel ，這個類用來實現INotifyPropertyChanged接口。

public class ShowDataViewModel : UserViewModel
    {
        //數據源
        ObservableCollection<User> _mylist = new ObservableCollection<User>();
        public ObservableCollection<User> mylist
        {

            get { return _mylist; }
            set
            {
                _mylist = value;
                RaisePropertyChanged("mylist");
            }
        }
　　　　　//構造函數
        public ShowDataViewModel()
        {
            mylist.Add(new User() { ID = 1, Name = "張三", Age = 20, Sex = "女", Remarks = "無" });
            mylist.Add(new User() { ID = 2, Name = "李四", Age = 21, Sex = "女", Remarks = "無" });
            mylist.Add(new User() { ID = 3, Name = "王五", Age = 22, Sex = "女", Remarks = "無" });
            mylist.Add(new User() { ID = 4, Name = "趙六", Age = 24, Sex = "女", Remarks = "無" });
        }
        
    }

在創建一個類ShowDataViewModel，繼承UserViewModel 添加測試數據

2.3、創建View

View在MAML中定義的，並且在后台不用寫代碼，View不應該含有任何的邏輯。它僅僅通過數據綁定就能達到顯示。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
        Title="MainWindow" Height="350" Width="413">
    <Window.DataContext>
        <vm:ShowDataViewModel/>
    </Window.DataContext>
    <Grid Margin="0,0,2,0">
        <DataGrid x:Name="dataGrid" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding mylist}">
            <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding ID}" Header="編號"/>
            <DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
            <DataGridTextColumn Binding="{Binding Age}" Header="年齡"/>
            <DataGridTextColumn Binding="{Binding Sex}" Header="性別" Width="60"/>
            <DataGridTextColumn Binding="{Binding Remarks}" Header="備注" Width="172"/>
        </DataGrid.Columns>
          </DataGrid>
    </Grid>
</Window>

xmlns:vm="clr-namespace:WpfApplication1.ViewModel"

<Window.DataContext>
        <vm:ShowDataViewModel/>
    </Window.DataContext>

引入一下命名空間完成上面綁定然后給DataGrid 綁定一下ItemsSource不用運行就能直接看到數據在控件上面顯示 

以上就完成了簡單的數據顯示 

三、DataGrid的增改刪功能

3.1、數據綁定

3.1.1、wpf中的數據綁定

在wpf中界面中綁定了數據源后，數據在界面上的修改能反映到綁定源

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
        Title="MainWindow" Height="337" Width="419">
    <Window.DataContext>
        <vm:ShowDataViewModel/>
    </Window.DataContext>
    <Grid Margin="0,0,2,182">
        <DataGrid x:Name="dataGrid" SelectionUnit="FullRow" IsReadOnly="True" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding mylist}" Height="135" Margin="1,0,0,-11">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding ID}" Header="編號"/>
                <DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
                <DataGridTextColumn Binding="{Binding Age}" Header="年齡"/>
                <DataGridTextColumn Binding="{Binding Sex}" Header="性別" Width="60"/>
                <DataGridTextColumn Binding="{Binding Remarks}" Header="備注" Width="172"/>
            </DataGrid.Columns>
        </DataGrid>
        <Label x:Name="labID" Content="編號：" HorizontalAlignment="Left" Margin="17,152,0,-53"/>
        <TextBox x:Name="txtID"  IsEnabled ="False"  Text="{Binding ID}" HorizontalAlignment="Left" Height="22" Margin="63,154,0,-52" TextWrapping="Wrap" Width="60"/>
        <Label x:Name="labName" Content="姓名：" HorizontalAlignment="Left" Margin="143,154,0,-55" />
        <TextBox x:Name="txtName" Text="{Binding Name}" HorizontalAlignment="Left" Height="22" Margin="189,152,0,-50" TextWrapping="Wrap" Width="62"/>
        <Label x:Name="labPAge" Content="年齡：" HorizontalAlignment="Left" Margin="273,152,0,-53" VerticalAlignment="Top" RenderTransformOrigin="-0.233,0.68"/>
        <TextBox x:Name="txtAge" Text="{Binding Age}" HorizontalAlignment="Left" Height="22" Margin="319,152,0,-50" TextWrapping="Wrap" Width="58"/>
        <Label x:Name="labSex" Content="性別：" HorizontalAlignment="Left" Margin="17,188,0,-89" RenderTransformOrigin="-0.233,0.68"/>
        <ComboBox Text="{Binding Sex}"  SelectedIndex="0" x:Name="comboBox" HorizontalAlignment="Left" Margin="63,191,0,-88" Width="61">
            <ComboBoxItem Tag="1" Content="男"/>
            <ComboBoxItem Tag="2" Content="女"/>
        </ComboBox>
        <Label x:Name="labRemarks" Content="備注：" HorizontalAlignment="Left" Margin="144,187,0,-88" VerticalAlignment="Top" RenderTransformOrigin="-0.233,0.68"/>
        <TextBox x:Name="txtRemarks" Text="{Binding Remarks}" HorizontalAlignment="Left" Height="22" Margin="189,184,0,-82" TextWrapping="Wrap" VerticalAlignment="Top" Width="188" RenderTransformOrigin="0.5,0.5"/>
        <Button x:Name="butSave" Command="{Binding AddCommand}" Content="新增" HorizontalAlignment="Left" Margin="70,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
        <Button x:Name="butUpdate" Command="{Binding UpdateCommand}" Content="修改" HorizontalAlignment="Left" Margin="160,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
        <Button x:Name="butDelete" Command="{Binding DeleteCommand}" Content="刪除" HorizontalAlignment="Left" Margin="250,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
    </Grid>
</Window>

3.2、命令綁定

在上面代碼我們給按鈕 Command 綁定了 Add Update Delete,接下來我們就開始實現功能

我們新建一個文件DelegateCommands.cs  實現接口ICommand

public class DelegateCommands : ICommand
    {
        public Action<object> ExecuteCommand = null;

        public Func<object, bool> CanExecuteCommand = null;

        //當命令可執行狀態發生改變時，應當被激發
        public event EventHandler CanExecuteChanged;

        //用於判斷命令是否可以執行
        public bool CanExecute(object parameter)
        {
            if (CanExecuteCommand != null)
            {
                return this.CanExecuteCommand(parameter);
            }
            else
            {
                return true;
            }
        }
        //命令執行
        public void Execute(object parameter)
        {
            if (this.ExecuteCommand != null) this.ExecuteCommand(parameter);
        }
    
    }

回到ShowDataViewModel.cs 定義下面命令

 public DelegateCommands AddCommand { get; set; }
 public DelegateCommands UpdateCommand { get; set; }
 public DelegateCommands DeleteCommand { get; set; } 

把操作對應的方法寫好

#region 方法
        private void Binding()
        {
            ShowList.Clear();
            mylist.ToList().ForEach(p => ShowList.Add(p));
        }
        public void addStudent(object parameter)
        {
            int id = mylist[mylist.Count-1].ID;
            mylist.Add(new User() { ID= id + 1, Name=Name,Age=Age,Sex=Sex,Remarks=Remarks});
            Binding();
        }
        public void updateStudent(object parameter)
        {
            if (ID == 0)
            {
                MessageBox.Show("請選擇修改項");
                return;
            }
            foreach (var item in mylist)
            {
                if (item.ID==user.ID)
                {
                    item.ID =ID;
                    item.Name = Name;
                    item.Sex = Sex;
                    item.Remarks = Remarks;
                    item.Age = Age;
                    break;
                }
            }
            Binding();
        }
        public void deleteStudent(object parameter)
        {
            if (ID == 0)
            {
                MessageBox.Show("請選擇刪除項");
                return;
            }
            User user1 = mylist.Single(p => p.ID == ID);
            mylist.Remove(user1);
            Binding();
        }
        #endregion

在進行綁定一下這樣我們就能實現增刪改了

 public ShowDataViewModel()
        {
            AddCommand = new DelegateCommands();
            AddCommand.ExecuteCommand = new Action<object>(addStudent);

            UpdateCommand = new DelegateCommands();
            UpdateCommand.ExecuteCommand = new Action<object>(updateStudent);//修改方法

            DeleteCommand = new DelegateCommands();
            DeleteCommand.ExecuteCommand = new Action<object>(deleteStudent);//修改方法

                mylist.Add(new User() { ID = 1, Name = "張三", Age = 20, Sex = "女", Remarks = "無" });
                mylist.Add(new User() { ID = 2, Name = "李四", Age = 21, Sex = "女", Remarks = "無" });
                mylist.Add(new User() { ID = 3, Name = "王五", Age = 22, Sex = "女", Remarks = "無" });
                mylist.Add(new User() { ID = 4, Name = "趙六", Age = 24, Sex = "女", Remarks = "無" });

            Binding();
        }

 

3.3、事件綁定

如果我們想點擊控件里面的一行，下面對應的文本框就顯示我們該怎么樣呢？

回到View給DataGrid綁定事件 首先我們需要給項目添加引用：System.Windows.Interactivity 並且給頁面引用命名空間

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

<DataGrid  SelectionUnit="FullRow" AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding ShowList,Mode=TwoWay}" x:Name="dataGrid" VerticalAlignment="Top" Height="182" HorizontalAlignment="Left" Width="408">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged" >
                    <i:InvokeCommandAction Command="{Binding SelectionChangedCommand}" CommandParameter="{Binding ElementName=dataGrid}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding ID}" Header="編號"/>
                <DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
                <DataGridTextColumn Binding="{Binding Age}" Header="年齡"/>
                <DataGridTextColumn Binding="{Binding Sex}" Header="性別" Width="60"/>
                <DataGridTextColumn Binding="{Binding Remarks}" Header="備注" Width="172"/>
            </DataGrid.Columns>
        </DataGrid>

我們在這里CommandParameter參數傳的是控件dataGrid

然后我們去ViewModel  ShowDataViewModel.cs

public ICommand SelectionChangedCommand
        {
            get
            {
                return new DelegateCommand<DataGrid>((datagrid) =>
                {
                    if (datagrid.SelectedItems.Count > 0)
                    {
                        user =(User)datagrid.SelectedItems[0];
                        ID = user.ID;
                        Name = user.Name;
                        Age = user.Age;
                        Sex = user.Sex;
                        Remarks = user.Remarks;
                }
                });
        }
        }

上一步 需添加引用 Microsoft.Practices.Prism.dll 這樣就完成了

這樣一個小案例就完成了。