How to set row height of Xamarin DataGrid?
Environment
Product Version | R3 2021 |
Product | DataGrid for Xamarin |
Description
It's a common requirement to define explicitly the height of the DataGrid rows as well as the height of the column headers. DataGrid does not expose direct API, still, there are means for setting the row heights through the TextMargin
property of the CellContentStyle and HeaderStyle properties of the columns.
Solution
Let's have the following simple DataGrid definition:
<telerikDataGrid:RadDataGrid x:Name="DataGrid"/>
Add a simple ItemsSource:
this.DataGrid.ItemsSource = new List<Data>
{
new Data { Country = "India", Capital = "New Delhi"},
new Data { Country = "South Africa", Capital = "Cape Town"},
new Data { Country = "Nigeria", Capital = "Abuja" },
new Data { Country = "Singapore", Capital = "Singapore" }
};
where Data
object is defined like this:
public class Data
{
public string Country { get; set; }
public string Capital { get; set; }
}
To apply different height, define manually the needed columns and set their CellContentStyle
property to a DataGridTextCellStyle with TextMargin
and HeaderStyle
property to a DataGridColumnHeaderStyle again with TextMargin
:
<telerikDataGrid:RadDataGrid x:Name="DataGrid"
AutoGenerateColumns="False">
<telerikDataGrid:RadDataGrid.Columns>
<telerikDataGrid:DataGridTextColumn PropertyName="Country" HeaderText="Country">
<telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridColumnHeaderStyle TextFontSize="18"
TextMargin="20" />
</telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridTextColumn.CellContentStyle>
<telerikDataGrid:DataGridTextCellStyle FontSize="18"
TextMargin="20"
TextColor="DarkGreen" />
</telerikDataGrid:DataGridTextColumn.CellContentStyle>
</telerikDataGrid:DataGridTextColumn>
<telerikDataGrid:DataGridTextColumn PropertyName="Capital" HeaderText="Capital">
<telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridColumnHeaderStyle TextFontSize="18"
TextMargin="20" />
</telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridTextColumn.CellContentStyle>
<telerikDataGrid:DataGridTextCellStyle FontSize="18"
TextMargin="20" />
</telerikDataGrid:DataGridTextColumn.CellContentStyle>
</telerikDataGrid:DataGridTextColumn>
</telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>
Check the result on Android emulator below: