Use of DataGrid in WPF

DataGrid is the data display control in WPF, which is equivalent to the windview in winform. However, there are some differences in usage between the two. In this document, if you use the differences between the two to better describe the use of the DataGrid, I will use this method. Now let's take a look at how to specify a data source for the DataGrid!

We know that the data source of the datagridview in winform can be able, dataview, list <t>, but the data source of the DataGrid in WPF cannot be a datatable directly. The object used as the data source of the DataGrid must implement the ienumerable interface. Do you suspect that the data source of the DataGrid cannot be directly specified as a datatable? You 'd better try it yourself. This is the case for knowledge. I tried it! If you really want to assign the datatable to the DataGrid. You can use the following method: This. DataGrid. itemsource
= DT. defaultview; here, DT is the datatable object you created. Have you noticed this? Previously, the data display controls such as the datagridview, ComboBox, and Web data display controls were used to specify the data source object for the datasource attribute of the data source. However, the DataGrid in WPF is not like this. When I started to contact him, I searched for the datasource attribute in my own way of thinking, but it was not successful! The itemsource attribute is available only after you view the information. So please note!

When using the DataGrid Control, we can directly specify the data source object to the itemsource attribute of the DataGrid. In this case, the data is displayed according to the data structure of the data source. If you need to display data in a defined manner, you need to define the style by using the code! The overall appearance of the DataGrid can be reflected by setting the properties of the DataGrid, or by style. For example, you can use the headersvisibility of the DataGrid to set whether the header or column is displayed. This attribute has three values, which indicate that none indicates that the column header and row header are not displayed; all indicates that both the column header and row header are displayed; row indicates that the row header is displayed;
Column indicates that the column header is displayed, and the row background color is set using the rowbackgroud attribute of the DataGrid. You can also set the DataGrid style to control the appearance style of the DataGrid. For example, you can use DataGrid. columnheaderstyle to set the display style of the column header of the DataGrid. The sample code is as follows:

<DataGrid. columnheaderstyle>
<Style targettype = "maid">
<Setter property = "background">
<Setter. value>
<Lineargradientbrush startpoint = "0, 0" endpoint = "0, 1">
<Gradientstop color = "white" offset = "0"/>
<Gradientstop color = "yellow" offset = "0.5"/>
<Gradientstop color = "white" offset = "1"/>
</Lineargradientbrush>
</Setter. value>
</Setter>
<Setter property = "foreground" value = "black"/>
<Setter property = "fontsize" value = "13"/>
</Style>
</DataGrid. columnheaderstyle>

The above Code sets the background color, foreground color, and font of the column header of the DataGrid. When setting the background color, lineargradientbrush is used to make the background color gradient.

Use DataGrid. rowheaderstyle to set the row header display style of the DataGrid. The sample code is as follows:

<DataGrid. rowheaderstyle>
<Style targettype = "maid">
<Setter property = "content" value = "• character"/>
<Setter property = "width" value = "10"/>
<Setter property = "background">
<Setter. value>
<Lineargradientbrush startpoint = "0, 0" endpoint = "1, 1">
<Gradientstop color = "white" offset = "0"/>
<Gradientstop color = "skyblue" offset = "1"/>
</Lineargradientbrush>
</Setter. value>
</Setter>
<Style. triggers>
<Trigger property = "ismouseover" value = "true">
<Setter property = "tooltip" value = "select this row"/>
</Trigger>
</Style. triggers>
</Style>
</DataGrid. rowheaderstyle>

Looking at the code, it is similar to the code of columnheaderstyle. Here I want to talk about the style. Trigger node, which can be understood as a trigger as its name suggests. In the code above, when you move the cursor over the line header, the message "select this line" is displayed"

In the style definition of the column header, the above method defines all columns globally. If you want to display a column in a special position as a special style, you can define a separate style for the column as follows:

<Maid header = "no." binding = "{binding Path = ID}">
<Datagridcolumn. headerstyle>
<Style targettype = "maid">
<Setter property = "background">
<Setter. value>
<Lineargradientbrush startpoint = "0, 0" endpoint = "0, 1">
<Gradientstop color = "white" offset = "0"/>
<Gradientstop color = "skyblue" offset = "0.5"/>
<Gradientstop color = "white" offset = "1"/>
</Lineargradientbrush>
</Setter. value>
</Setter>
<Setter property = "foreground" value = "black"/>
<Setter property = "fontsize" value = "13"/>
<Setter property = "width" value = "100"/>
<Style. triggers>
<Trigger property = "ismouseover" value = "true">
<Setter property = "tooltip" value = "sort by this column"/>
</Trigger>
</Style. triggers>
</Style>
</Datagridcolumn. headerstyle>
</Datagridtextcolumn>

In this section of code, datagridtextcolumn indicates that the column is displayed in text format, and the data displayed at the same time is the data of the field ID of the data source you specified. Here we mentioned that the content of the datagridtextcolumn is displayed in the text format. in WPF, four basic column display styles are provided:

The content displayed in the datagridtextcolumn text. The specified data type is string.

The content is displayed in the format of the datagridcheckboxcolumn check box. The specified data type is boolean.

The content is displayed in the datagridcomboboxcolumn drop-down list. The specified data type is enum.

The content is displayed as a hyperlink. The specified data type is Uri.

In actual development, the above four styles cannot fully meet our needs. At this time, we can use the datagridtemplatecolumn to customize the display style, as shown in the following example:

When using the datagridtemplatecolumn, we must first define the datatemplate:

<Window. Resource>

<Datatemplate X: Key = "birthtemplate">
<Stackpanel width = "200" Height = "20">
<Border background = "orange" borderbrush = "black" borderthickness = "1">
<Textblock text = "{binding birthday, stringformat ={}{ 0: Mm-dd }}"

Fontsize = "13" horizontalalignment = "center"/>
</Border>
<Border background = "white" borderbrush = "black" borderthickness = "1">
<Textblock text = "{binding birthday, stringformat ={}{ 0: yyyy }}"

Fontsize = "13" horizontalalignment = "center"/>
</Border>
</Stackpanel>
</Datatemplate>
<Datatemplate X: Key = "editingdatetemplate">
<Datepicker selecteddate = "{binding birthday}"/>
</Datatemplate>

</Window. Resource>

Use the above style:

<Datagridtemplatecolumn header = "Date of Birth" width = "100"
Celltemplate = "{staticresource birthtemplate }"
Celleditingtemplate = "{staticresource editingdatetemplate}"/>

Okay. Let's talk about this today. If there is an error, thank you for your correction. At the same time, we hope to provide some help to our peers!