WPF + MVVM learning summary DataGrid simple case, wpfmvvm

WPF + MVVM learning summary DataGrid simple case, wpfmvvm
1. Summary of WPF

Windows Presentation Foundation is a Windows-based user interface Framework launched by Microsoft and is part of. NET Framework 3.0. It provides a unified programming model, language, and framework that truly isolates the work of the interface designers and developers. It also provides a new graphic interface for multimedia interaction.

1.1, MVVM Introduction

In WPF, many MVVM (View-ViewModel-Model) development models are used. It has low coupling, reusable rows, and relatively independent design and logic. Therefore, it is favored by developers. The View is the front-end interface, and the ViewModel is the connection layer (similar to the Controller in MVC). It combines the Model layer and the View layer and encapsulates commands for binding to the View layer, the Model layer provides class objects for ViewModel to easily access the database. MVVM is a typical WPF design mode. view uses commands to pass all user input to viewmodel. View obtains data from viewmodel through data binding. The model does not understand the viewmodel and the viewmodel does not understand the view.

 

Ii. Simple case: DataGrid Binding displaying data

1. model: Model is a class that abstracts things in reality. All things involved in the development process can be abstracted as models, such as customers, the customer's name, number, phone number, address and other attributes also correspond to the Property in the class. The customer's order, payment, and other behaviors correspond to the method in the class.

2. View: View is a View interface.

3. ViewModel: The Model abstraction mentioned above, so ViewModel is the abstraction of View. The displayed data corresponds to the Property in ViewMode, And the executed Command corresponds to the Command in ViewModel.

(Using an example to explain MVVM allows me to create a simple user management application using MVVM. We must first define the Model, then define the ViewModel, and finally define the View .)

2.1 create a Model

Public class User {// <summary> /// No. /// </summary> public int ID {get; set ;} /// <summary> /// Name /// </summary> public string Name {get; set ;} /// <summary> /// Age /// </summary> public int Age {get; set ;} /// <summary> /// gender /// </summary> public string Sex {get; set ;} /// <summary> /// Remarks /// </summary> public string Remarks {get; set ;}}

2.2 create a ViewModel

Literally, ViewModel refers to "view model" and can also be considered as abstract view. However, ViewModel is also a special mode, and its view can be bound with data. The latest role, ViewModel contains a data transmitter, which transfers data in the Model to the View. ViewModel also contains some commands, so that the View can interact with the Model.

public class UserViewModel : INotifyPropertyChanged    {        public event PropertyChangedEventHandler PropertyChanged;        public void RaisePropertyChanged(string propertyName)        {            if (propertyName != null)            {                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));            }        }    }

Add a class UserViewModel to ViewModel to implement the INotifyPropertyChanged interface.

Public class ShowDataViewModel: UserViewModel {// data source ObservableCollection <User> _ mylist = new ObservableCollection <User> (); public ObservableCollection <User> mylist {get {return _ mylist ;} set {_ mylist = value; RaisePropertyChanged ("mylist") ;}}// constructor public ShowDataViewModel () {mylist. add (new User () {ID = 1, Name = "Zhang San", Age = 20, Sex = "female", 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 = ""});}}

Create a ShowDataViewModel class and inherit UserViewModel to add test data.

2.3 create a View

The View defined in MAML does not need to write code in the background, and the View should not contain any logic. It can be displayed only through data binding.

<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" verticalignment = "Top" ItemsSource = "{Binding mylist}"> <DataGrid. columns> <maid Binding = "{Binding ID}" Header = "no"/> <maid Binding = "{Binding Name}" Header = "Name" Width = "100 "/> <maid Binding = "{Binding Age}" Header = "Age"/> <maid Binding = "{Binding Sex}" Header = "gender" Width = "60"/> <DataGridTextColumn Binding = "{Binding Remarks}" Header = "Remarks" Width = "172"/> </DataGrid. columns> </DataGrid> </Grid> </Window>

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

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

Introduce the namespace and bind it to the DataGrid. The ItemsSource can be directly displayed on the control without running it.

The above completes simple data display.

III, Add, modify, and delete functions of the DataGrid3.1 Data Binding
3.1.1. Data Binding in wpf

After a data source is bound to the wpf interface, the changes to the data on the interface can be reflected in the binding source.

<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" verticalignment = "Top" ItemsSource = "{Binding mylist}" Height = ""135" Margin =, 0,-11 "> <DataGrid. columns> <maid Binding = "{Binding ID}" Header = "no"/> <maid Binding = "{Binding Name}" Header = "Name" Width = "100 "/> <maid Binding = "{Binding Age}" Header = "Age"/> <maid Binding = "{Binding Sex}" Header = "gender" Width = "60"/> <DataGridTextColumn Binding = "{Binding Remarks}" Header = "Remarks" Width = "172"/> </DataGrid. columns> </DataGrid> <Label x: Name = "labID" Content = "No.:" 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 =" Name: "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 =" age: "HorizontalAlignment =" Left "Margin =" 273,152, 0,-53 "verticalignment =" 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 =" Gender: "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 =" male "/> <ComboBoxItem Tag =" 2 "Content =" female "/> </ComboBox> <Label x: name = "labRemarks" Content = "Remarks:" HorizontalAlignment = "Left" Margin = "144,187, 0,-88" verticalignment = "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 = "added" HorizontalAlignment = "Left" Margin = "70,240, 0, -135 "verticalignment =" Top "Width =" 69 "Height =" 19 "RenderTransformOrigin =" 0.466, 0.941 "/> <Button x: name = "butUpdate" Command = "{Binding UpdateCommand}" Content = "modify" HorizontalAlignment = "Left" Margin = "160,240, 0, -135 "verticalignment =" Top "Width =" 69 "Height =" 19 "RenderTransformOrigin =" 0.466, 0.941 "/> <Button x: name = "butDelete" Command = "{Binding DeleteCommand}" Content = "delete" HorizontalAlignment = "Left" Margin = "250,240, 0, -135 "verticalignment =" Top "Width =" 69 "Height =" 19 "RenderTransformOrigin =" 0.466, 0.941 "/> </Grid> </Window>View Code3.1.2,

 

3.2 command binding 3.3 and event binding