WPF getting started tutorial Series 21 -- DataGrid example (1), wpfdatagrid

WPF getting started tutorial Series 21 -- DataGrid example (1), wpfdatagrid

We have learned how to use the ListView control. Today we will learn about the DataGrid. It is mentioned that DataGrid is frequently used in both web development and WinForm application development in Asp. Net. With it, we can flexibly display various data between rows and columns. This article will learn about the DataGrid functions in WPF.

First, we will introduce the types of columns in the DataGrid.

DataGridColumn Type

By default, after the ItemSource attribute is set for the DataGrid Control, the DataGrid automatically generates columns based on the data type. The following table lists the four columns supported by the DataGrid and their data types.

The following table lists the four column types provided by the DataGrid.

Column Type	Show data	Data Type
DataGridHyperlinkColumn	Use the display URI data.	URI
DataGridComboBoxColumn	Use the show enumerated data and other data to be selected from the drop-down list.	Enum, String
DataGridTextColumn	Use show text	String
DataGridCheckBoxColumn	Use show boolean data	Bool

You can useAutoGenerateColumnsAttribute Sets whether columns are automatically generated to add custom columns. If the DataGrid contains both "auto-generated columns" and "user-defined columns", create "user-defined columns" first ". For example.

 

Next: Let's take an example to learn how to use the DataGrid.

Interface for creating the DataGrid sample

1) follow the steps in the previous article to create a WindowGrid interface using Visual Studio 2013. For example.

 

2) in the toolbox in Visual studio 2013, find the DataGrid Control and double-click it. Add the DataGrid Control to the form interface. For example, 1, Figure 2. Note: the small box marked by the red box in Figure 2 is the DataGrid Control. Is it very different from the DataGrid in WindowForm.

 

Figure 1

 

Figure 2

3) add columns to the DataGrid. Select a small square in the form interface with the left mouse click, and then click the "attribute" tab on the rightmost side of Visual Studio 2013. Then, the "attribute" editing window is displayed in Visual Studio 2013. For example.

 

4) click the button on the Columns line with the left mouse button. In the red box, a dialog box is displayed, as shown in.

 

4) In, select the corresponding column type, and click "add" to add the column. For example.

 

5) based on the actual situation in this example, I have added five columns of DataGridTextColumn and one column of DataGridComboBoxColumn as needed. After adding, as shown in. It looks like the DataGrid in WindowForm.

 

6) The following is the actual XAML code after completion.

 

<Window x: Class = "WpfApp1.WindowGrid" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Title =" Grid example "Height =" 400 "Width =" 600 "> <Grid. rowDefinitions> <RowDefinition Height = "*"/> <RowDefinition Height = "auto"/> <RowDefinition Height = "22"/> </Grid. rowDefinitions> <DataGrid x: Name = "gridCitys" Grid. row = "0" HorizontalAlignment = "Left" VerticalAlignment = "Top" AutoGenerateColumns = "False"> <DataGrid. columns> <maid Binding = "{Binding CityID}" ClipboardContentBinding = "{x: null} "Header =" CityID "/> <DataGridTextColumn Binding =" {Binding CityName} "ClipboardContentBinding =" {x: null} "Header =" CityName "/> <maid Binding =" {Binding ZipCode} "ClipboardContentBinding =" {x: Null} "Header =" ZipCode "/> <maid column x: name = "cboProvince" ClipboardContentBinding = "{x: Null}" Header = "ProvinceID" SelectedValuePath = "ProvinceID" SelectedValueBinding = "{Binding Path = ProvinceID, updateSourceTrigger = PropertyChanged} "DisplayMemberPath =" ProvinceName "SelectedItemBinding =" {x: Null} "> </DataGridComboBoxColumn> <DataGridTextColumn Binding =" {Binding DateCreated} "comment =" {x: null} "Header =" DateCreated "/> <maid Binding =" {Binding DateUpdated} "ClipboardContentBinding =" {x: Null} "Header =" DateUpdated "/> </DataGrid. columns> </DataGrid> <StackPanel Grid. row = "1" Orientation = "Horizontal" HorizontalAlignment = "Right"> <TextBlock Text = "display information" TextAlignment = "Center"/> <TextBox Name = "txtMsg" IsReadOnly = "True" Text = "" Width = "320" TextAlignment = "Center"/> </StackPanel> <WrapPanel Grid. row = "2" Orientation = "Horizontal" HorizontalAlignment = "Right"> <Button HorizontalAlignment = "Right" Name = "btnRefresh" Height = "22" VerticalAlignment = "Top" Width = "65" Click = "btnRefresh_Click"> refresh </Button> <Button HorizontalAlignment = "Right" Name = "btnUpdate" Height = "22" verticalignment = "Top" Width = "65 "Click =" btnUpdate_Click "> Update </Button> </WrapPanel> </Grid> </Window>