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