We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Styling the XamDataGrid

This topic is designed to get you up and running as quickly as possible with customizing the visual appearance of the XamDataGrid Control, by describing the basic steps required for styling textual and associated elements of the XamDataGrid control.

In this topic

This topic contains the following sections

Required Background
Styling Rows
Styling Column Headers
Styling Column Content
Related Content

Required Background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
Getting Started With XamDataGrid	This topic provides basic steps required for adding the XamDataGrid control to your view and populating it with sample data.
Sample Sales Person	This resource topic provides implementation of sample data that you can use a data source for the XamDataGrid control.

Styling Rows

The XamDataGrid control exposes the following properties for styling row elements:

XamDataGrid Styling behavior	Property	Details
RowHeight	DataGrid.RowHeight	Allows you to set the height for all rows within the XamDataGrid control
RowSeparatorHeight	DataGrid.RowSeparatorHeight	Allows you to set the height of the separator bar which exists between individual rows
RowSeparatorStyle	DataGrid.RowSeparator	Allows you to obtain a reference to the exact RowSeparator instance or to provide your own that will be used by the XamDataGrid control; allowing you to modify any of its appearance properties

The following example will walk you through modifying all these styling behaviors to customize the high level appearance of the XamDataGrid control.

Add to the following code snippet to the main code file.

In XAML

<ig:XamDataGrid RowSeparatorHeight="4"
                RowHeight="50">
    <ig:XamDataGrid.RowSeparator>
        <ig:RowSeparator Background="Blue"/>
    </ig:XamDataGrid.RowSeparator>
</ig:XamDataGrid>

In C#:

DataGrid.RowSeparator = new RowSeparator();
DataGrid.RowSeparator.Background = new SolidColorBrush(Color.Blue);
DataGrid.RowSeparatorHeight = 5;
DataGrid.RowHeight = 50;

Save and run your application to verify the change in appearance. The RowSeparator will appear with a blue background with a height of five pixels.

Styling Column Header

The XamDataGrid control’s Header object exposes several methods for modifying the visual appearance of its Header as well as its text.

Header Styling behavior	Property	Details
Height	DataGrid.HeaderHeight	Allows you to set the height of the header row; this row encompasses all column headers present on the XamDataGrid control
Background Color	Header.Background	Allows you to set the background color of the Header element of the Column
Font Family	Header.FontFamily	Allows you to designate the font family used by text of the Column’s header
Font Size	Header.FontSize	Allows you to set the point size of the font used by the Column’s header
Font Style	Header.FontAttributes	Allows you to designate the style attribute of the font, for text within the Column’s header
Horizontal Alignment	Header.HorizontalAlignment	Allows you to set the alignment of the text within the Column’s header, along the horizontal plane
Vertical Alignment	Header.VerticalAlignment	Allows you to set the alignment of the text within the Column’s header, along the vertical plane
Text Color	Header.TextColor	Allows you to specific Brush color to text contained within the Column’s header
Text Line Break Mode	Header.LineBreakMode	Allows you to specific TextCellLineBreakMode enum to control how long text should be displayed within the Column’s header
Text Padding	Header.PaddingBottom Header.PaddingLeft Header.PaddingRight Header.PaddingTop	Allows you to specific padding around text contained within the Column’s header

The following example will walk you through a basic scenario for customizing the appearance for the XamDataGrid control’s Column headers, by utilizing several appearance methods for the header element and the headers text.

Add to the following code snippet to the main code file.

In C#:

TextColumn nameColumn = new TextColumn();
nameColumn.PropertyPath = "FirstName";
nameColumn.HeaderText = "FirstName";

NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
salesColumn.HeaderText = "Sales";

TextColumn territoryColumn = new TextColumn();
territoryColumn.PropertyPath = "Territory";
territoryColumn.HeaderText = "Territory";

DataGrid.Columns.Add(nameColumn);
DataGrid.Columns.Add(salesColumn);
DataGrid.Columns.Add(territoryColumn);

Create an instance of the TextHeader class with following properties:
- font size - 15
- background color - red
- text color - white

In C#:

var header = new TextHeader();
header.Background = new SolidColorBrush(Color.Red);
header.TextColor = new SolidColorBrush(Color.White);
header.FontSize = 15;
nameColumn.Header = header;

Alternatively, you could also get the exact instance of the Header object that represents the nameColumn, and modify that instance directly; all property changes using this approach will propagate to the XamDataGrid control’s UI; the following code snippet demonstrates this approach.

In C#:

var header = nameColumn.Header;
header.Background = new SolidColorBrush(Color.Red);
header.TextColor = new SolidColorBrush(Color.White);
header.FontSize = 15;

Save and run your application to verify the result, as demonstrated in the following screenshot.

Styling Column Content

The Column object also exposes several methods for modifying the visual components of its contained cells in aggregate, including the Column’s width, text alignment and text appearance.

Column Styling behavior	Property	* Details*
Content Opacity	Column.ContentOpacity	Allows you to adjust the level of transparency for content, (including text and images) within cells of the Column
Width	Column.Width	Allows you to adjust the width for the Column
Background Color	Column.Background	Allows you to set a specific color that will be used to fill cells within the Column
Selected Background Color	Column.SelectedBackground	Allows you to set a specific color for cells within a column, when that Column is selected
Font Family	Column.FontFamily	Allows you to designate the FontFamily used by text of the Column’s cells
Font Size	Column.FontSize	Allows you to set the point size of the font used by the Column’s cells
Font Style	Column.FontAttributes	Allows you to designate the style attribute of the font, for text within the Column’s header
Horizontal Alignment	Column.HorizontalAlignment	Allows you to set the alignment of the text within the Column’s cells, along the horizontal plane
Vertical Alignment	Column.VerticalAlignment	Allows you to set the alignment of the text within the Column’s cells, along the vertical plane
TextColor	Column.TextColor	Allows you to assign a specific Brush color to text contained within the Column’s cells
Text Line Break Mode	Column.LineBreakMode	Allows you to specific TextCellLineBreakMode enum to control how long text should be displayed within the Column’s cells
Text Padding	Column.PaddingBottom Column.PaddingLeft Column.PaddingRight Column.PaddingTop	Allows you to specific padding around text contained within the Column’s cells

This example walks through the customization of the appearance for columns within the XamDataGrid for column elements as well as the content contained within the column’s associated cells.

This example assumes you have created the SampleGridApp project as demonstrated in the Working with Columns topic.

Add to the following code snippet to the main code file.

In C#:

TextColumn nameColumn = new TextColumn();
nameColumn.PropertyPath = "FirstName";
nameColumn.HeaderText = "FirstName";

NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
salesColumn.HeaderText = "Sales";

TextColumn territoryColumn = new TextColumn();
territoryColumn.PropertyPath = "Territory";
territoryColumn.HeaderText = "Territory";

DataGrid.Columns.Add(nameColumn);
DataGrid.Columns.Add(salesColumn);
DataGrid.Columns.Add(territoryColumn);

Modify the style of the nameColumn’s Column by setting the following properties:
- background color - gray
- text color - white
- font style - bold
- font size - 15

In C#:

nameColumn.FontSize = 15;
nameColumn.FontAttributes = FontAttributes.Bold;
nameColumn.Background = new SolidColorBrush(Color.Gray);
nameColumn.TextColor = new SolidColorBrush(Color.White);

Save and run the SampleGridApp to verify the result.

Xamarin | Help Topics

Styling the XamDataGrid

In this topic

Required Background

Styling Rows

Styling Column Header

Styling Column Content

Related Content