WPF Getting Started Tutorial series 21--datagrid Example (i)

We learned about the use of the ListView control in the previous example, and today we will learn about the DataGrid. It is mentioned that the DataGrid is frequently used either in ASP. NET Web page development or WinForm application development. It allows us to flexibly display various data between rows and columns. This article will learn about the DataGrid-related features in WPF.

First, let's look at the types of columns in the DataGrid.

DataGrid Type of column

By default, when we set the Itemsource property for the DataGrid control, the DataGrid automatically generates the corresponding columns based on the data type, and 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 data that displays the enumeration data with the other drop-down boxes that need to be selected.	Enum,string
Datagridtextcolumn	Using display text	String
Datagridcheckboxcolumn	Using Display Boolean data	Bool

You can add custom columns by using the AutoGenerateColumns property to set whether the columns are automatically generated when you create the DataGrid. If both auto-generate columns and user-defined columns are included in the DataGrid, create a user-defined column first. Such as.

Second: Let's do an example to learn how to use the DataGrid.

Interface for making a DataGrid sample

1) Follow the steps in the previous article to create a Windowgrid interface using Visual Studio 2013. Such as.

2) in the Toolbox in Visual Studio 2013, locate the DataGrid control, and then double-click. Add the DataGrid control to the form interface. such as 1, Figure 2. Note that the small box labeled in the Red box in Figure 2 is the DataGrid control, which is not quite the same as the DataGrid in Windowform.

Figure 1

Figure 2

3) Add columns to the DataGrid. Click the left mouse button to select the Small box in the form interface, then tap the Properties tab at the far right of Visual Studio 2013, and then Visual Studio 2013 will pop up the properties edit window. Such as.

4) in the left mouse button click on the columns that row of buttons. As in the red box, then a dialog box pops up, such as.

4) in the, select the appropriate column type, and then click the "Add" button to add the column. Such as.

5) According to the actual situation of my example, I have added 5 columns of Datagridtextcolumn, and a column of datagridcomboboxcolumn as needed. After the add is complete, such as. Looks like the DataGrid in Windowform.

6) The following is the actual XAML code after all is done.

<window x:class= "Wpfapp1.windowgrid" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" XM        lns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" title= "Grid example" height= "All" width= ">" <Grid> <Grid.RowDefinitions> <rowdefinition height= "*"/> <rowdefinition height= "Auto"/&            Gt <rowdefinition height= "/>" </Grid.RowDefinitions> <datagrid x:name= "gridcitys" grid.row= "0                 "Horizontalalignment=" left "verticalalignment=" Top "autogeneratecolumns=" False "> <DataGrid.Columns>                <datagridtextcolumn binding= "{Binding Cityid}" clipboardcontentbinding= "{x:null}" header= "Cityid"/> <datagridtextcolumn binding= "{Binding cityname}" clipboardcontentbinding= "{x:null}" header= "CityName"/&gt                ;       <datagridtextcolumn binding= "{Binding ZipCode}" clipboardcontentbinding= "{x:null}" header= "ZipCode"/>         <datagridcomboboxcolumn x:name= "Cboprovince" clipboardcontentbinding= "{x:null}" header= "ProvinceID" SelectedVa  Luepath= "Provinceid" selectedvaluebinding= "{Binding path=provinceid,updatesourcetrigger=propertychanged}"                Displaymemberpath= "Provincename" selecteditembinding= "{x:null}" > </DataGridComboBoxColumn> <datagridtextcolumn binding= "{Binding DateCreated}" clipboardcontentbinding= "{x:null}" header= "DateCreated"/&                Gt <datagridtextcolumn binding= "{Binding dateupdated}" clipboardcontentbinding= "{x:null}" header= "DateUpdated"/ > </DataGrid.Columns> </DataGrid> <stackpanel grid.row= "1" orientation= "Horizo Ntal "horizontalalignment=" right "> <textblock text=" Show Information "textalignment=" Center "/> <t Extbox name= "txtmsg" isreadonly= "True" text= "" width= "" "textalignment=" Center "/> </ Stackpanel> <wrappAnel grid.row= "2" orientation= "horizontal" horizontalalignment= "right" > <button horizontalalignment= "Rig            HT "Name=" Btnrefresh "height=" "verticalalignment=" Top "width=" "click=" "Btnrefresh_click" > Refresh </Button> <button horizontalalignment= "Right" name= "Btnupdate" height= "verticalalignment=" "Top" width= "Click=" btnUp Date_click "> Updates </Button> </WrapPanel> </Grid></Window>

WPF Getting Started Tutorial series 21--datagrid Example (i)