WPF: Setting normal and editing styles for datagridcolumn columns in the DataGrid

WPF: Setting normal and editing styles for datagridcolumn columns in the DataGrid Time:2012-02-01 20:28 Source:Blog Park Author:Liu Yuan Yuan Click:1570 times derived classes of the inheritance tree DataGridColumn of the 0:datagridcolumn type: generally datagridboundcolumn and datagridcomboboxcolumn are sufficient to satisfy the style of most columns, If you need to customize column styles, you can use the Datagridtemplatecolumn type. Before setting the column editing style, let's create a simple datagrid that shows the name (with the default datagridtextcolumn), and the score (using Dat

0:datagridcolumn type of inheritance tree

Derived classes for DataGridColumn:

　　

In general, Datagridboundcolumn and Datagridcomboboxcolumn are sufficient for most column styles, and you can use the Datagridtemplatecolumn type if you need to customize the column style.

Before setting the column editing style, we first create a simple datagrid that displays the name (with the default datagridtextcolumn), and the score ( Use 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= ">"

<DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<progressbar value= "{Binding score}"/>

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

</DataGrid.Columns>

</DataGrid>

The data behind the code is this:

Datagrid.itemssource = new people[]

{

New people () {Name = "King", score = 100},

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

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

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

};

The people class doesn't have to be said again, two properties: Name and score

The result is:

　　

The first column is editable by default (due to the use of the default Datagridtextcolumn), while the second column defines only the displayed template and cannot be edited.

1: Set Datagridboundcolumn

As you can see from the above type tree, Datagridboundcolumn is the parent class of Datagridtextcolumn,datagridhyperlinkcolumn and Datagridcheckboxcolumn. As a parent class, Datagridboundcolumn defines two properties to set the Normal style and editing style for these subclasses. Elementstyle and Editingelementstyle, respectively. They are all style objects (styles in WPF). The targettype of this style varies depending on the type of column. For example Datagridtextcolumn, the Normal style is for TextBlock. The edit style should be for the textbox. The normal and edit styles of datagridcheckboxcolumn should be for the checkbox.

So set the first column in the XAML above:

<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>

Results:

　　

2: Set Datagridcomboboxcolumn

OK, although Datagridcomboboxcolumn does not inherit with Datagridboundcolumn, but it is like Datagridboundcolumn, There are also two properties, Elementstyle and Editingelementstyle. Of course, for the datagridcomboboxcolumn, obviously the style is to the ComboBox, the use of the same as the above mentioned.

3: Set Datagridtemplatecolumn

For Datagridtemplatecolumn, it is obvious that celltemplate is the normal display style for the column. For edit styles, you can use the Editingcelltemplate property.

Then redefine the following XAML:

<datagridtemplatecolumn header= "Score"

Width= ">"

<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= "/>"

</StackPanel>

</DataTemplate>

</DataGridTemplateColumn.CellEditingTemplate>

</DataGridTemplateColumn>

Results:

　　

Slide the slider to edit the score for the corresponding column.

This article from Liu Yuan's blog, the original address: http://www.cnblogs.com/mgen/archive/2012/02/01/2334648.html

　　

WPF: Setting normal and editing styles for datagridcolumn columns in the DataGrid