Setting DataGridTextCellStyle in app.xaml

[Larry]

The code below worked fine in Xamarin Forms. However, it is not working in Maui. How do I fix this?

my-page.xaml

...
                    <telerik:DataGridNumericalColumn
                        CellContentStyle="{StaticResource CustomDataGridTextCellStyle}"
                        HeaderStyle="{StaticResource CustomDataGridColumnHeaderStyle}"
                        HeaderText="{x:Static resx:AppResources.Duration}"
                        PropertyName="Duration"
                        SizeMode="Stretch" />
...

App.xaml

    <Style x:Key="CustomDataGridTextCellStyle" TargetType="telerik:DataGridTextCellStyle">
        <Setter Property="HorizontalTextAlignment" Value="Start" />
        <Setter Property="SelectedTextColor" Value="{StaticResource PageBackgroundColor}" />
        <Setter Property="TextColor" Value="{StaticResource NormalTextColor}" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="FontSize">
            <Setter.Value>
                <x:OnIdiom>
                    <x:OnIdiom.Phone>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="Android">14</On>
                            <On Platform="iOS">12</On>
                        </OnPlatform>
                    </x:OnIdiom.Phone>
                    <x:OnIdiom.Tablet>20</x:OnIdiom.Tablet>
                    <x:OnIdiom.Desktop>20</x:OnIdiom.Desktop>
                </x:OnIdiom>
            </Setter.Value>
        </Setter>
        <Setter Property="TextMargin">
            <x:OnIdiom>
                <x:OnIdiom.Phone>
                    <OnPlatform>
                        <On Platform="Android">8</On>
                        <On Platform="iOS">6</On>
                    </OnPlatform>
                </x:OnIdiom.Phone>
                <x:OnIdiom.Tablet>12</x:OnIdiom.Tablet>
                <x:OnIdiom.Desktop>12</x:OnIdiom.Desktop>
            </x:OnIdiom>
        </Setter>
    </Style>

The code compiles fine but I get a run-time error that says:

Can't resolve HorizontalTextAlignmentProperty on DataGridTextCellStyle'

If I delete that line, then the next run says:

Can't resolve TextColorProperty on DataGridTextCellStyle'

And I assume that would continue with every property. Hopefully I'm missing something simple?

(by the way, this happens on other similar styles; I'm including this single example hoping there is a common solution to all these errors)

[Lance | Manager Technical Support]

Hi Larry, I just wanted to share a tip with you. If you enable XAML compilation, you don't have to wait until runtime to catch XAML errors.

This will also improve the overall performance of your project! Here are the primary XamlC benefits:

• It performs compile-time checking of XAML, notifying you of any errors. (you would have caught the fact that TextColor is not a BindableProperty, it is a standard Property)
• It removes some of the load and instantiation time for XAML elements.
• It helps to reduce the file size of the final assembly by no longer including .xaml files.

To learn more about XamlC, checkout this documentation XAML compilation - .NET MAUI | Microsoft Docs.

[Larry]

Thanks! I noticed this wasn't present and assumed it was folded in behind the scenes. I will definitely implement!

[Lance | Manager Technical Support]

I'd recommend add it as a global attribute in a class named AssemblyInfo.cs so that all XAML pages are compiled. (the "behind the scenes" approach 😎):

 

Before I send this, I wanted to touch on your original question in this thread => The reason why you cant use style Setters for the DataGridTextStyle's properties is because those properties are not BindableProperties. The members of the class are normal public properties. I have raised this to the development team to consider changing them to BindableProperties in the future... assuming there isn't a technical reason we haven't done it yet (can have a detrimental effect on performance).

[Larry]

Sounds great. From a code maintenance point of view, that would be a welcome change.

While you're giving out tips... any tips on how to 'convert' xamarin forms xaml to .net Maui xaml? That is, to get exactly the same layout? I expected there to be rework, but I'm a little dismayed to see that identical xaml gives quite different results.

Xamarin Forms:

Maui:

[Lance | Manager Technical Support]

That looks like some extra margin or padding was applied to the entire row. One thing to be aware of is MAUI projects have some default styling for free that didn't come with Xamarin.Forms. You can inspect these by going to Resources/Styles/Styles.xaml.

For example, if you're using a Grid for that layout, you might be getting some spacing and padding values from those global implicit styles.

As painful this might be during the initial transition, I believe it is a better final outcome. They took a lot of inspiration from the early days of UWP (when nice styling came out of the box) and you don't need to do everything yourself; such as tweaking every pixel per-platform. Now, as you can see in the Styles.xaml dictionary, there is already some per-platform tweaks ready to go.. including dark mode support and VisualStates.

Outside of that, I don't have much more to add.

[Larry]

Those are good clues. Thanks.

[Deyan]

Hello again,

The DataGridTextCellStyle is not a XAML style, but an instance object. Because of this it cannot be used implicitly.

Regards, Deyan Progress Telerik

[Deyan]

Hello Larry,

It is not working because the syntax has been changed. Now you don't need to specify TargetType for the style and separate setters for every property.

I am providing you with 2 examples of how to set the CellContentStype property:

One in App.xaml:

<Application.Resources>
    <telerik:DataGridTextCellStyle x:Key="CustomDataGridTextCellStyle"
                                    HorizontalTextAlignment="Start"
                                    SelectedTextColor="Blue"
                                    TextColor="DimGray"
                                    VerticalTextAlignment="Center"
                                    FontSize="{OnPlatform Default=20, Android=14, iOS=12}"
                                    TextMargin="{OnPlatform Default=12, Android=8, iOS=6}"/>
</Application.Resources>

And another in the MainPage.xaml:

<telerik:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Source}" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridNumericalColumn HeaderText="duration"
                                            PropertyName="Duration"
                                            SizeMode="Stretch" >
            <telerik:DataGridNumericalColumn.CellContentStyle>
                <telerik:DataGridTextCellStyle
                                    HorizontalTextAlignment="Start"
                                    SelectedTextColor="Blue"
                                    TextColor="DimGray"
                                    VerticalTextAlignment="Center"
                                    FontSize="{OnPlatform Default=20, Android=14, iOS=12}"
                                    TextMargin="{OnPlatform Default=12, Android=8, iOS=6}"/>
            </telerik:DataGridNumericalColumn.CellContentStyle>
        </telerik:DataGridNumericalColumn>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

If you're wondering how you can apply this to other styles in the DataGrid or for other controls, you can check out our documentation - https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/styling 

For any further inquiries feel free to let us know.

Regards, Deyan Progress Telerik

[Derrick]

Is there a way to do this implicitly, like we do with other controls, like buttons?

For example:

    <Style TargetType="Button">
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Tertiary}}" />
        <Setter Property="FontFamily" Value="RobotoRegular"/>
        <Setter Property="FontSize" Value="{StaticResource StandardFontSize}"/>
        <Setter Property="CornerRadius" Value="{StaticResource CornerRadius}"/>
...