Windows 8 Metro development FAQ (5) -- DataGrid Control

 

The DataGrid Control is familiar with Silverlight development,The SDK of Win8 does not contain such controls and can only be customized.The DataGrid Control is a required control for developing enterprise applications. Enterprise applications mostly display data in the form of tables. Let's take a look at the end.

The DataGrid Control provides table data display, single-row data details display, and cell editing functions.

I will not explain the source code of the DataGrid Control. Just look at my source code.

Web development should be familiar with such table-class controls, including rows and columns. Each row corresponds to a piece of data in the data source, and each cell corresponds to a piece of data attribute, each cell can be edited. In the DataGrid, double-click the cell to edit it.

The following describes how to use the DataGrid Control.

The DataGrid Control has a columns attribute, which is a set and defines the table column style. The content is datagridtemplatecolumn, which can define the table column title, column title style, and column cell template, column cell editing status template.

  <  Gcontrols: DataGrid  Grid. Row  = "1"  X: Name  = "List" >              <  Gcontrols: DataGrid. Columns  >                  <  Gcontrols: maid  Header  = "Order No"  Width  = "200"  >                      <  Gcontrols: maid. celltemplate  >                          <  Datatemplate >                              <  Grid  >                                  <  Textblock  Text  ="  {Binding orderid}  "  Style  ="  {Staticresource textblockstyle}  "  />                              </  Grid >                          </  Datatemplate  >                      </  Gcontrols: maid. celltemplate  >                  </  Gcontrols: maid  >                  <  Gcontrols: maid  Header  = "Amount to be paid"  Width  = "400" >                      <  Gcontrols: maid. celltemplate  >                          <  Datatemplate  >                              <  Grid  >                                  <  Textblock  Text  ="  {Binding totalprice}  " Style  ="  {Staticresource textblockstyle}  "  />                              </  Grid  >                          </  Datatemplate  >                      </  Gcontrols: maid. celltemplate  >                  </  Gcontrols: maid >                  <  Gcontrols: maid  Header  = "Shipping warehouse (editable )"  >                      <  Gcontrols: maid. celltemplate  >                          <  Datatemplate  >                              <  Grid  >                                  < Textblock  Text  ="  {Binding storehouse}  "  Style  ="  {Staticresource textblockstyle}  "  />                              </  Grid  >                          </  Datatemplate  >                      </ Gcontrols: maid. celltemplate  >                      <  Gcontrols: datagridtemplatecolumn. celleditingtemplate  >                          <  Datatemplate  >                              <  Grid  >                                  <  Textbox  Text  =" {Binding storehouse, mode = twoway}  "  Keyup  = "Textbox_keyup"  />                              </  Grid  >                          </  Datatemplate  >                      </  Gcontrols: datagridtemplatecolumn. celleditingtemplate  >                  </ Gcontrols: maid  >                  <  Gcontrols: maid  Header  = "Estimated delivery time"  >                      <  Gcontrols: maid. celltemplate  >                          <  Datatemplate  >                              <  Textblock  Text ="  {Binding max}  "  Style  ="  {Staticresource textblockstyle}  "  />                          </  Datatemplate  >                      </  Gcontrols: maid. celltemplate  >                  </  Gcontrols: maid >                  <  Gcontrols: maid  Header  = "Delete"  >                      <  Gcontrols: maid. celltemplate  >                          <  Datatemplate  >                              <  Button  Content  = "Delete" Horizontalalignment  = "Stretch"  Click  = "Btndeleteclick"  />                          </  Datatemplate  >                      </  Gcontrols: maid. celltemplate  >                  </  Gcontrols: maid  >              </ Gcontrols: DataGrid. Columns  >              <  Gcontrols: DataGrid. rowdetailstemplate  >                  <  Datatemplate  >                      <  Grid  >                          <  Textblock  Text  ="  {Binding desciption} "  Textwrapping  = "Wrap"  Fontsize  = "25"  />                      </  Grid  >                  </  Datatemplate  >              </  Gcontrols: DataGrid. rowdetailstemplate  >          </ Gcontrols: DataGrid  > 

AboveCodeDefines the style of each column, where the third column is editable (Double-click a cell to enter the editing mode.The Fifth Column is used to delete rows. Because the DataGrid inherits from the listview, the data to be added and deleted is animated. Rowdetailstemplate is a template that defines data details.

There are two background codes. One is btndeleteclick, which is used to delete rows. The other is the textbox_keyup event, which is used to enter the editing mode when the cell enters the editing mode. When you press the Enter key, the user leaves the editing mode and enters the reading mode.

Current Running Interface

Some people may want to implement a different background function for forms on the Web. In fact, this function is very simple, no matter whether you have different parity rows, or three rows, four rows, or five lines, the principle is the same, that is, when the DataGrid loads data, it determines whether the data is in an odd or even row based on each data record to dynamically give the background.

Here, I am not going to modify the DataGrid code. to redefine a control, it is called datagrid1. Add the following code:

 Public    Class  Datagrid1: controls. DataGrid {  Protected  Override   Void Preparecontainerforitemoverride (Windows. UI. XAML. dependencyobject element, Object  ITEM) {control F = Element As  Control;  If (F! = Null  ){  VaR Index = This . Itemcontainergenerator. indexfromcontainer (element) % 3 ;  If (Index = 0  ) {F. Background = New  Solidcolorbrush (colors. aliceblue );}  Else   If (Index = 1  ) {F. Background = New  Solidcolorbrush (colors. Beige );}  Else  If (Index = 2  ) {F. Background = New  Solidcolorbrush (colors. lightsteelblue );}}  Base  . Preparecontainerforitemoverride (element, item );}} 

Then, replace the DataGrid Control used in the original XAML with the datagrid1 control, so that the background color of each three lines is different.
By changing the style, you can even implement the function of having different backgrounds for each column.

Source code download