Styling of datagrid using resources or css in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Styling of datagrid using resources or css

3 Answers 19 Views

DataGrid

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 04 Oct 2018, 04:56 PM

Hello Ole,

you can put an instance of that style in the App resources, for example:

<Application xmlns:dataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid" ...>

<Application.Resources>

<ResourceDictionary>

<dataGrid:DataGridColumnHeaderStyle

x:Key="MyColumnHeaderStyle"

BackgroundColor="Transparent"

FilterIndicatorFontAttributes="Bold"/>

</ResourceDictionary>

</Application.Resources>

</Application>

and then use it where you need to via StaticResource markup extension.

<dataGrid:RadDataGrid>

<dataGrid:RadDataGrid.Columns>

<dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MyColumnHeaderStyle}"/>

</dataGrid:RadDataGrid.Columns>

</dataGrid:RadDataGrid>

Important Note

Keep in mind that this resource is an instance of an object (a DataGridColumnHeaderStyle object) and not a template, so you can't reuse it across multiple columns at the same time. If you do need a style for multiple columns then you can use multiple style instances.

<Application xmlns:dataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid" ...>

<Application.Resources>

<ResourceDictionary>

<dataGrid:DataGridColumnHeaderStyle

x:Key="MyFirstColumnHeaderStyle"

BackgroundColor="Transparent"

FilterIndicatorFontAttributes="Bold"/>

<dataGrid:DataGridColumnHeaderStyle

x:Key="MySecondColumnHeaderStyle"

BackgroundColor="Transparent"

FilterIndicatorFontAttributes="Bold"/>

</ResourceDictionary>

</Application.Resources>

</Application>

<dataGrid:RadDataGrid>

<dataGrid:RadDataGrid.Columns>

<dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MyFirstColumnHeaderStyle}"/>

<dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MySecondColumnHeaderStyle}"/>

</dataGrid:RadDataGrid.Columns>

</dataGrid:RadDataGrid>

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Accepted

answered on 05 Oct 2018, 03:09 PM

Hi Ole,

If you wanted to use a single style definition for multiple columns, you can just reuse that key for many columns:

Lets say you have this in the App.xaml:

<Application.Resources>

<ResourceDictionary>

<dataGrid:DataGridColumnHeaderStyle x:Key="EveryColumnHeaderStyle"

BackgroundColor="DarkRed"

BorderColor="IndianRed"

BorderThickness="1,2,1,2"

TextColor="White"

IndicatorColor="White"

OptionsButtonTextColor="White"

FilterIndicatorTextColor="White"

FilterIndicatorFontAttributes="Bold" />

</ResourceDictionary>

</Application.Resources>

Then you can do this in the DataGrid:

<dataGrid:RadDataGrid x:Name="MyDataGrid" AutoGenerateColumns="False">

<dataGrid:RadDataGrid.Columns>

<dataGrid:DataGridTextColumn PropertyName="Name" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />

<dataGrid:DataGridNumericalColumn PropertyName="Age" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />

<dataGrid:DataGridDateColumn PropertyName="DateOfBirth" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />

</dataGrid:RadDataGrid.Columns>

</dataGrid:RadDataGrid>

Here's the result at runtime:

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik