WPF: Set the normal style and edit style of the datagridcolumn in the DataGrid

 

Directory

• 0: inheritance tree of the datagridcolumn type
• 1: Set datagridboundcolumn
• 2: Set datagridcomboboxcolumn
• 3: Set datagridtemplatecolumn

 

 

Returned directory

0: inheritance tree of the datagridcolumn type

Derived class of datagridcolumn:

In general, the datagridboundcolumn and datagridcomboboxcolumn types are sufficient to meet the needs of multiple series styles. If you need to customize the column Styles, you can use the datagridtemplatecolumn type.

 

Before setting the column editing style, we first create a simple DataGrid to display the name (use the default datagridtextcolumn), and the score (use the datagridtemplatecolumn to define a custom template: A progressbar ):

<DataGrid name = "DataGrid" autogeneratecolumns = "false">

<DataGrid. Columns>

<Datagridtextcolumn header = "name"

Binding = "{binding name }"

Width = "*">

</Datagridtextcolumn>

<Datagridtemplatecolumn header = "score"

Width = "2 *">

<Datagridtemplatecolumn. celltemplate>

<Datatemplate>

<Progressbar value = "{binding score}"/>

</Datatemplate>

</Datagridtemplatecolumn. celltemplate>

</Datagridtemplatecolumn>

</DataGrid. Columns>

</DataGrid>

 

The data code is as follows:

DataGrid. itemssource = new people []

{

New people () {name = "Wang", score = 100 },

New people () {name = "Liu", score = 30 },

New people () {name = "Li", score = 86 },

New people () {name = "Zhao", score = 50}

};

// The People class is no longer needed. There are two attributes: Name and score.

 

The result is:

 

The first column can be edited by default (because the default datagridtextcolumn is used), while the second column only defines the displayed template and cannot be edited.

 

 

Returned directory

1: Set datagridboundcolumn

From the above type tree, we can see that the datagridboundcolumn is the parent class of the datagridtextcolumn, datagridhyperlinkcolumn, and datagridcheckboxcolumn. As a parent class, datagridboundcolumn defines two attributes to set common styles and edit styles for these subclasses. They are elementstyle and editingelementstyle. They are all style objects (styles in WPF ). The targettype of this style varies according to the column type. For example, the normal style of the datagridtextcolumn is for textblock. The editing style should be for textbox. The normal style and edit style of the datagridcheckboxcolumn should be specific to the checkbox.

 

Set the first column in the above XAML as follows:

<Datagridtextcolumn header = "name"

Binding = "{binding name }"

Width = "*">

<Datagridtextcolumn. elementstyle>

<Style targettype = "textblock">

<Setter property = "foreground" value = "red"/>

<Setter property = "textalignment" value = "center"/>

</Style>

</Datagridtextcolumn. elementstyle>

<Datagridtextcolumn. editingelementstyle>

<Style targettype = "textbox">

<Setter property = "foreground" value = "white"/>

<Setter property = "background" value = "gray"/>

<Setter property = "borderbrush" value = "Navy"/>

<Setter property = "borderthickness" value = "2"/>

</Style>

</Datagridtextcolumn. editingelementstyle>

</Datagridtextcolumn>

 

Result:

 

 

Returned directory

2: Set datagridcomboboxcolumn

OK. Although the datagridcomboboxcolumn does not inherit from the datagridboundcolumn, it also has the attributes of elementstyle and editingelementstyle like the datagridboundcolumn. Of course, for the datagridcomboboxcolumn, it is clear that the style must be for the ComboBox. The usage is the same as the above.

 

 

Returned directory

3: Set datagridtemplatecolumn

For the datagridtemplatecolumn, it is clear that celltemplate is the normal display style of the column. You can use the editingcelltemplate attribute to edit a style.

 

Then redefine the XAML:

<Datagridtemplatecolumn header = "score"

Width = "2 *">

<Datagridtemplatecolumn. celltemplate>

<Datatemplate>

<Progressbar value = "{binding score}"/>

</Datatemplate>

</Datagridtemplatecolumn. celltemplate>

<Datagridtemplatecolumn. celleditingtemplate>

<Datatemplate>

<Stackpanel>

<Textblock text = "{binding score }"

Textalignment = "center"/>

<Slider value = "{binding score, updatesourcetrigger = propertychanged }"

Maximum = "100"/>

</Stackpanel>

</Datatemplate>

</Datagridtemplatecolumn. celleditingtemplate>

</Datagridtemplatecolumn>

 

Result:

Slider to edit the score of the corresponding column.