WPF4.5 Introduction to the 24, "DataGrid Control Part 2"

refs:

http://blog.okazuki.jp/entry/20130224/1361693816

Available columns in a DataGrid

In DataGrid, but you can display the data easily by using the customization of the auto-generation features and events of the column, the corresponding and to a simple case, to develop a display function of the general-purpose data using the attribute other than the case, will now be introduced, how to define a column by yourself is common. The following the typical things in the available column in the DataGrid.

Class name	Description
DataGridTextBoxColumn	It displays the data specified in the Binding property as text. In edit mode, to display the text box.
DataGridCheckBoxColumn	It displays the data specified in the Binding property as a check box.
DataGridComboBoxColumn	The combo box to display the collection set to ItemsSource property as a choice and then displayed in the cell. And properties to be displayed in the combo box in the DisplayMemberPath properties and SelectedValuePath property to set the property to be treated as the selected value. Data to be displayed, you can correspondence with those from the selected element in the collection set in the ItemsSource property in SelectedValueBinding property value of the property specified in the SelectedValuePath, being selected by the collection set to ItemsSource property in SelectedItemBinding property.
DataGridTemplateColumn	You can freely customize the display content using DataTemplate. You can customize the display of the most flexible cells in the column that can be specified in the DataGrid.

Column of the DataGrid, you can customize the contents of the header by using the following properties.

Property	Description
object Header {get; set;}	Gets or sets the value of the column header.
DataTemplate HeaderTemplate {get; set;}	Gets or sets the template for displaying the value of the column header.
Style HeaderStyle {get; set;}	Gets or sets the style that is used to display the header of the column. Type to apply the style is DataGridHeaderColumn class.

Example of the use of DataGrid column

Using the columns of the DataGrid to display the data in the DataGrid. First, place the DataGrid on the screen. Because this time you do not want to use auto-generated columns of the DataGrid, you have to disable the auto-generation function to the AutoGeneratedColumns property to False.

  <Window x: Class = "DataGridSample03.MainWindow "
          xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns: local = "clr-namespace : DataGridSample03"
          Title = "MainWindow"    Height = "350"    Width = "525">
     <Grid>
         <DataGrid Name = "dataGrid"    AutoGenerateColumns = "False">
         </ DataGrid>
     </ Grid>
 </ Window>

Then, you define a class to be displayed in the DataGrid. Create a Person class with an enumerated type and the type bool property of the string type as follows.

  // Enum representing the gender
 public enum Gender
 {
     None,
     Men,
     Women
 }
 
 // Data to be displayed in the DataGrid
 public class Person
 {
     // name
     public string Name {get; set; }
     // sex
     public Gender Gender {get; set; }
     // Whether the authenticated user
     public bool AuthMember {get; set; }
 }

In the constructor of MainWindow, and set the list of Person class to DataGrid ItemsSource property of.

  // Generate review appropriate data 100
 var data = new ObservableCollection <Person> (
     Enumerable.Range (1, 100) .Select ( i => new Person
     {
         Name = "Taro Tanaka" + i,
         Gender = i% 2 == 0 Gender.Men :? Gender.Women,
         AuthMember = i% 5 == 0
     }));
 // Set to DataGrid
 this .dataGrid.ItemsSource = data;

Now that was ready to display data will continue to display the data to define the column.

Use of DataGridTextBoxColumn and DataGridCheckBoxColumn

You define a column to the DataGrid. Column in the DataGrid, set the Columns property. The DtaGridTextColumn the Name property to bind the DataGridCheckBoxColumn to AuthMembe property.

  <DataGrid Name = "dataGrid"    AutoGenerateColumns = "False">
     <DataGrid. Columns>
         <DataGridTextColumn Header = "name"    Binding = "{Binding Name}" />
         <DataGridCheckBoxColumn Header = "authenticated"    Binding = "{Binding AuthMember}" />
     </ DataGrid. Columns>
 </ DataGrid>

When you run, it will be as follows.

Press the F2 key to select the cell, you can cell editing by clicking on the cell in the selection. The figure below is the image you are editing a column name.

Use of DataGridComboBoxColumn

It then displayed using the DataGridComboBoxColumn the Gender property. In auto-generated, since the value of the enum has been displayed as it is, here is to be able to display a Japanese label. First, create a class with the data to be displayed on the ComboBox. And string for the label, is a simple class that has the value of the corresponding Gender.

  namespace DataGridSample03
 {
     // Class to display the Gender in ComboBox
     public class GenderComboBoxItem
     {
         // Label for display
         public string Label {get; set; }
         // value
         public Gender Value {get; set; }
     }
 }

Set the Label and Value to set the sequence of this class to the ItemsSource property of DataGridComboBoxColumn DisplayMemberPath and SelectedValuePath. We want association string the Gender property values ​​and the Person class of the selected element to set the binding of the Gender in SelectedValueBinding property.
So far in the non-appearance of the x: Array tag is intended to be defined in XAML an array of those specified in the Type attribute.

  <DataGridComboBoxColumn Header = "gender"  
                          SelectedValueBinding = "{Binding Gender}"
                          DisplayMemberPath = "Label"  
                          SelectedValuePath = "Value">
     <DataGridComboBoxColumn. ItemsSource>
         <X: Array Type = "{ x: Type local: GenderComboBoxItem}">
             <Local: GenderComboBoxItem Label = "unselected"    Value = "None" />
             <Local: GenderComboBoxItem Label = "man"    Value = "Men" />
             <Local: GenderComboBoxItem Label = "F"    Value = "Women" />
         </ X: Array>
     </ DataGridComboBoxColumn. ItemsSource>
 </ DataGridComboBoxColumn>

The display of the DataGrid you add this definition is shown below. And display data, you can see that the data in the drop-down in the editing is in Japanese.

Use of DataGridTemplateColumn

Then, use the DataGridTemplateColumn that you can freely customize the display of the cell. Using the StackPanel to the template of the header and the cell displays a plurality of items. The display contents specified in HeaderTemplate using HeaderStyle has been specified in the horizontal direction full. Without this setting, the display of the header will become a left-justified. The display is in CellTemplate, and set the UI for editing the CellEditingTemplate. Which templates are also set to display a vertical as well as multiple elements in the StackPanel. Between each element has to display the borders with the Separator control.

  <DataGridTemplateColumn>
     <DataGridTemplateColumn. HeaderStyle>
         <Style TargetType = "DataGridColumnHeader">
             <Setter Property = "HorizontalContentAlignment"    Value = "Stretch" />
         </ Style>
     </ DataGridTemplateColumn. HeaderStyle>
     <DataGridTemplateColumn. HeaderTemplate>
         <DataTemplate>
             <StackPanel>
                 <TextBlock Text = "name" />
                 <Separator />
                 <TextBlock Text = "authenticated" />
             </ StackPanel>
         </ DataTemplate>
     </ DataGridTemplateColumn. HeaderTemplate>
     <DataGridTemplateColumn. CellTemplate>
         <DataTemplate>
             <StackPanel>
                 <TextBlock Text = "{Binding Name }" />
                 <Separator />
                 <CheckBox IsEnabled = "False"    IsChecked = "{Binding AuthMember}" />
             </ StackPanel>
         </ DataTemplate>
     </ DataGridTemplateColumn. CellTemplate>
     <DataGridTemplateColumn. CellEditingTemplate>
         <DataTemplate>
             <StackPanel>
                 <TextBox Text = "{Binding Name }" />
                 <Separator />
                 <CheckBox IsChecked = "{Binding AuthMember }" />
             </ StackPanel>
         </ DataTemplate>
     </ DataGridTemplateColumn. CellEditingTemplate>
 </ DataGridTemplateColumn>

Run the results will be as follows. You can see that you are able to display two lines of data in a single cell by using the template.