DataGrid component _ custom header Template

Silverlight powerful DataGrid component _ custom header template (headertemplate) Time: Source: Blog Author: Kinglee Click: In the development and design of DataGrid 1873 times, we often encounter different headers with different design styles to meet various requirements. The header template is used to display text, images, or bound data in the first line of the DataGrid Control. You can customize the DataGrid of the desired style by setting the correct template. This article describes how to customize the DataGrid header template. Specific steps: 1) in the usercontrol label of the XAML File

In the development and design of the DataGrid, we often encounter different headers with different design styles to meet various requirements. The header template is used to display text, images, or bound data in the first line of the DataGrid Control. You can customize the DataGrid of the desired style by setting the correct template. This article describes how to customize the DataGrid header template.

 

Procedure:

1) Add the following namespace to the usercontrol label in the XAML file:

Xmlns: datemedimitives = "CLR-namespace: system. Windows. Controls. primitives; Assembly = system. Windows. Controls. Data"

 

2) set the style of the rendering header TemplateHeaderstyleAttributes

 

3) stackpanel labels can be combined to orchestrate the positions of components added to the header template.

 

 

Instance:

You can use instances to understand the basic methods for creating a header template.

Let's take a look at the effect:

 

 

InCodeThe key steps of the operation are specified.

Mainpage. XAMLFile Code:

<Usercontrol

Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"

Xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006"

Xmlns: datemedimitives = "CLR-namespace: system. Windows. Controls. primitives; Assembly = system. Windows. Controls. Data"

MC: ignorable = "D" xmlns: Data = "CLR-namespace: system. windows. controls; Assembly = system. windows. controls. data "X: class =" silverlightclient. mainpage"

D: designwidth = "640" D: designheight = "320">

<Grid X: Name = "layoutroot" width = "640" Height = "320" background = "white">

<Data: DataGrid X: Name = "dgemployee" autogeneratecolumns = "false" margin = "8, 8, 36, 71" background = "# ffdef2f0" fontsize = "12">

<Data: DataGrid. Columns>

<Data: Maid width = "260">

<Data: datagridtemplatecolumn. headerstyle>

<Style targettype = "datatemitives: datagridcolumnheader">

<Setter property = "contenttemplate">

<Setter. value>

<Datatemplate>

<! -- Key to rendering -->

<Stackpanel orientation = "vertical">

<Stackpanel orientation = "horizontal">

<Textblock text = "" width = "80"/>

<Textblock text = "2009-07" width = "80"/>

<Textblock text = "" width = "100"/>

</Stackpanel>

<Stackpanel orientation = "horizontal">

<Textblock text = "unit price" width = "80"/>

<Textblock text = "quantity" width = "80"/>

<Textblock text = "Total" width = "100"/>

</Stackpanel>

</Stackpanel>

</Datatemplate>

</Setter. value>

</Setter>

</Style>

</Data: datagridtemplatecolumn. headerstyle>

<! -- The method I mentioned in the previous article is used here -->

<Data: datagridtemplatecolumn. celltemplate>

<Datatemplate>

<Stackpanel orientation = "horizontal">

<Textblock width = "80" text = "{binding quantity}"/>

<Textblock width = "80" text = "{binding price}"/>

<Textblock width = "100" text = "{binding total}"/>

</Stackpanel>

</Datatemplate>

</Data: datagridtemplatecolumn. celltemplate>

<Data: datagridtemplatecolumn. celleditingtemplate>

<Datatemplate>

<Stackpanel orientation = "horizontal">

<Textbox width = "80" text = "{binding quantity, mode = twoway}"/>

<Textbox width = "80" text = "{binding price, mode = twoway}"/>

<Textbox width = "100" text = "{binding total, mode = twoway}"/>

</Stackpanel>

</Datatemplate>

</Data: datagridtemplatecolumn. celleditingtemplate>

</Data: datagridtemplatecolumn>

</Data: DataGrid. Columns>

</Data: DataGrid>

</GRID>

</Usercontrol>

 

Mainpage. XAML. CSFile Code:

Using system;

Using system. Collections. Generic;

Using system. LINQ;

Using system. net;

Using system. windows;

Using system. Windows. controls;

Using system. Windows. documents;

Using system. Windows. input;

Using system. Windows. Media;

Using system. Windows. Media. animation;

Using system. Windows. shapes;

 

Namespace silverlightclient

{

Public class products

{

Public int quantity {Get; set ;}

Public int price {Get; set ;}

Public int total {Get; set ;}

}

 

Public partial class mainpage: usercontrol

{

Public mainpage ()

{

Initializecomponent ();

This. Loaded + = new routedeventhandler (mainpage_loaded );

}

 

Void mainpage_loaded (Object sender, routedeventargs E)

{

List <Products> Em1 = new list <Products> ();

Em1.add (New Products () {quantity = 20, price = 130, total = 2600 });

Em1.add (New Products () {quantity = 5, price = 800, total = 4000 });

Em1.add (New Products () {quantity = 10, price = 2000, total = 20000 });

Dgemployee. itemssource = Em1;

}

}

}