Add FontAutoScalingEnabled for Items in .Net Maui Controls

[Gabriel]

I currently have a RadComboBox. I mainly want to use the default stylings (apart for some colors as you can see in the code), but I want to disable FontAutoScalingEnabled on every text/label items.

<telerik:RadComboBox Grid.Column="0" Grid.Row="0"
                     ItemsSource="{Binding MyItems}"
                     SelectionMode="Single"
                     Placeholder="{x:Static resx:Labels.ItemCategory}"
                     SelectedIndex="{Binding SelectedItemIndex, Mode=TwoWay}">
    <telerik:RadComboBox.Style>
        <Style TargetType="telerik:RadComboBox">
            <Setter Property="BackgroundColor" Value="{StaticResource White}"/>
            <Setter Property="TextColor" Value="{StaticResource Black}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedItem}" Value="True" TargetType="telerik:RadComboBox">
                    <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
                    <Setter Property="TextColor" Value="{StaticResource White}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </telerik:RadComboBox.Style>
</telerik:RadComboBox>

How can I set FontAutoScalingEnabled  for all labels in the ComboBox (selectable Items and selectedItem).

 

Thanks in advance!

[Didi]

Hi Gabrel,

You can use the Item and SelectedItem templates and set the FontAutoScalingEnabled to the Label inside the templates and for the input element, set the property to the TextInputStyle. Here is an example:

        <telerik:RadComboBox Grid.Column="0" Grid.Row="0"
                     ItemsSource="{Binding MyItems}"
                     SelectionMode="Single"
                     Placeholder="{x:Static resx:Labels.ItemCategory}"
                     SelectedIndex="{Binding SelectedItemIndex, Mode=TwoWay}">
            <telerik:RadComboBox.ItemTemplate>
                <DataTemplate>
                    <telerik:RadBorder BackgroundColor="LightYellow"
                               MinimumWidthRequest="300">
                        <Label Text="{Binding Name}" FontAutoScalingEnabled="False"
                       Padding="8, 7, 0, 7"
                       TextColor="Black"/>
                    </telerik:RadBorder>
                </DataTemplate>
            </telerik:RadComboBox.ItemTemplate>
            <telerik:RadComboBox.SelectedItemTemplate>
                <DataTemplate>
                    <telerik:RadBorder BackgroundColor="LightBlue"
                               MinimumWidthRequest="300">
                        <VerticalStackLayout>
                            <Label Text="{Binding Name}" FontAutoScalingEnabled="False"
                           Padding="8, 7, 0, 7"
                           TextColor="Black"/>
                            <Label Text="{Binding Population}" 
                           FontSize="12" FontAutoScalingEnabled="False"
                           Padding="8, 7, 0, 7"/>
                        </VerticalStackLayout>
                    </telerik:RadBorder>
                </DataTemplate>
            </telerik:RadComboBox.SelectedItemTemplate>
            <telerik:RadComboBox.TextInputStyle>
                <Style TargetType="telerik:RadTextInput">
                    <Setter Property="FontAutoScalingEnabled" Value="False"/>
                </Style>
            </telerik:RadComboBox.TextInputStyle>
        </telerik:RadComboBox>

Another approach is to disable the auto scaling on app level. Here is an example: https://learn.microsoft.com/en-us/answers/questions/1611437/how-can-i-prevent-the-device-font-size-effect-of-a   you can also search for different approaches. 

Regards,
Didi
Progress Telerik

[Gabriel]

@Didi

Thanks for your reply. In my case MyItems is a List of strings, how should I build the Binding in the Labels then?

 

ObservableItemCollection<string> MyItems

 

<telerik:RadComboBox.ItemTemplate>
                <DataTemplate>
                    <telerik:RadBorder BackgroundColor="LightYellow"
                               MinimumWidthRequest="300">
                        <Label Text="{Binding ?????}" FontAutoScalingEnabled="False"
                       Padding="8, 7, 0, 7"
                       TextColor="Black"/>
                    </telerik:RadBorder>
                </DataTemplate>

[Didi]

Here is the xaml code:

    <VerticalStackLayout>
        <telerik:RadComboBox 
                     SelectionMode="Single">
            <telerik:RadComboBox.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>USA</x:String>
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>Canada</x:String>
                    <x:String>France</x:String>
                    <x:String>Italy</x:String>
                    <x:String>United Kingdom</x:String>
                    <x:String>China</x:String>
                    <x:String>Japan</x:String>
                </x:Array>
            </telerik:RadComboBox.ItemsSource>
            <telerik:RadComboBox.ItemTemplate>
                <DataTemplate>
                    <telerik:RadBorder BackgroundColor="LightYellow"
                               MinimumWidthRequest="300">
                        <Label Text="{Binding }" FontAutoScalingEnabled="False"
                       Padding="8, 7, 0, 7"
                       TextColor="Black"/>
                    </telerik:RadBorder>
                </DataTemplate>
            </telerik:RadComboBox.ItemTemplate>
            <telerik:RadComboBox.SelectedItemTemplate>
                <DataTemplate>
                    <telerik:RadBorder BackgroundColor="LightBlue"
                               MinimumWidthRequest="300">
                        <VerticalStackLayout>
                            <Label Text="{Binding }" FontAutoScalingEnabled="False"
                           Padding="8, 7, 0, 7"
                           TextColor="Black"/>
                        </VerticalStackLayout>
                    </telerik:RadBorder>
                </DataTemplate>
            </telerik:RadComboBox.SelectedItemTemplate>
            <telerik:RadComboBox.TextInputStyle>
                <Style TargetType="telerik:RadTextInput">
                    <Setter Property="FontAutoScalingEnabled" Value="False"/>
                </Style>
            </telerik:RadComboBox.TextInputStyle>
        </telerik:RadComboBox>
    </VerticalStackLayout>

 

More information about bindings in .NET MAUI can be found at the following link: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/?view=net-maui-9.0 

[Gabriel]

got it to work, thanks!

[Gabriel]

@Didi sorry to bother you again, but I noticed that it does not work on iOS like that.  I disabled the auto scaling on app level in Android. But this does not work for iOS (see https://learn.microsoft.com/en-us/answers/questions/1661536/how-can-i-prevent-the-device-font-size-effect-of-a).

I now defined a custom SelectedItemTemplate and custom ItemTemplate as you suggested. And there I set:

<Setter Property="FontAutoScalingEnabled" Value="False"/>

This works perfectly for the "selection dropdown". However this does not effect the Palceholder/selected text in the control box. How can I create custom styles there or access any underlying labels to set the auto scaling property?

What I have so far:

This is an example of my RadComboBox:

<telerik:RadComboBox
                     ItemsSource="{Binding MyItems}"
                     SelectionMode="Single"
                     Margin="2"
                     Placeholder="{x:Static resx:Labels.PlaceholderCombobox}"
                     SelectedIndex="{Binding MySelectedItemFilterIndex, Mode=TwoWay}"
                     BackgroundColor="{StaticResource White}"                                  
                     PlaceholderColor="{StaticResource Black}"
                     ItemTemplate="{StaticResource ComboBoxItemTemplate}"
                     SelectedItemTemplate="{StaticResource ComboBoxSelectedItemTemplate}">
</telerik:RadComboBox>

and these are my DataTemplates so far:

<!-- ItemTemplate for ComboBox -->
<DataTemplate x:Key="ComboBoxItemTemplate" x:DataType="x:String">
    <telerik:RadBorder BorderColor="DarkGray" BorderThickness="0,0,0,1" Padding="0, 8">
        <Label Text="{Binding .}"
               Padding="20, 0, 7, 0"
               TextColor="Black"
               FontAutoScalingEnabled="False" />
    </telerik:RadBorder>
</DataTemplate>

<!-- SelectedItemTemplate for ComboBox -->
<DataTemplate x:Key="ComboBoxSelectedItemTemplate" x:DataType="x:String">
    <telerik:RadBorder BackgroundColor="{StaticResource AccentDark}" BorderColor="DarkGray" BorderThickness="0,0,0,1" Padding="0, 8">
        <Label Text="{Binding .}"
               Padding="20, 0, 7, 0"
               TextColor="White"
               FontAutoScalingEnabled="False" />
    </telerik:RadBorder>
</DataTemplate>

I need a way to access the entry box itself (for both multiple and single selection boxes)

[Yana]

Hi Gabriel,

With the latest release of the Telerik UI for .NET MAUI (8.0.0) we introduced TextInputStyle property of the ComboBox which gives access to the inner entry element.  You can check how to use it here:

ComboBox Styling example

Please upgrade to 8.0.0 and give it a try. You can check the release notes here: Release History for Telerik UI for .NET MAUI Q4 2024.