Changing font size RadNavigationView menu items

1 Answer 67 Views
NavigationView (Hamburger Menu)
Neil N
Top achievements
Rank 2
Iron
Iron
Veteran
Neil N asked on 09 Jul 2024, 04:20 PM

The RadNavigationView menu items don't seem to respect font size palatte settings. That is,

        FluentPalette.Palette.FontSize = FontSize;
        FluentPalette.Palette.FontSizeS = FontSizeSmall;
        FluentPalette.Palette.FontSizeL = FontSizeLarge;

will change the font sizes in grids, buttons, regular menus, etc., but not navigation menu items.  How can we get this working? XAML code:


    <Window.Resources>
        <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
            <Style TargetType="telerik:RadNavigationViewItem">
                <Setter Property="Content" Value="{Binding Title}" />
                <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
                <Setter Property="Icon" Value="{Binding IconGlyph}" />
                <Setter Property="IconTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" Font="fas" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </Window.Resources>

        <telerik:RadNavigationView Grid.Row="1"
            x:Name="NavigationView" ItemsSource="{Binding MenuItems}"
                                   AutoChangeDisplayMode="False"
                                   DisplayMode="Expanded"
                                   AllowMultipleExpandedItems="True"
                                   SubItemsIndentation="15"
                                   telerik:AnimationManager.IsAnimationEnabled="True"
                                   SelectionChanged="OnNavigationViewSelectionChanged">
            <telerik:RadNavigationView.Content>
                <Frame
                                Background="#00000000"
                                NavigationUIVisibility="Hidden"
                                Content="{Binding ContentPage}"/>
            </telerik:RadNavigationView.Content>
            <telerik:RadNavigationView.PaneFooter>
                <telerik:RadNavigationViewItem Content="Settings" 
                                               Command="{Binding NavigateItemSelectedCommand}"
                                               CommandParameter="Settings"
                                               IconTemplate="{x:Null}">
                    <telerik:RadNavigationViewItem.Icon>
                        <telerik:RadGlyph Glyph="&#xf013;" Font="fas" />
                    </telerik:RadNavigationViewItem.Icon>
                </telerik:RadNavigationViewItem>
            </telerik:RadNavigationView.PaneFooter>
        </telerik:RadNavigationView>

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Masha
Telerik team
answered on 11 Jul 2024, 06:05 AM

Hi Neil,

Thank you for the provided information.

I can confirm that this is a bug in RadNavigationViewItems. I have created the following bug report in our feedback portal, which can be found at the following link: NavigationViewItem: Setting the font size through the palette is not respected in the Fluent theme (telerik.com)

I have also updated your Telerik points as a token of gratitude for bringing this to our attention.

To work around this issue, you can set the FontSize property in the RadNavigationViewItem style:

<Style TargetType="telerik:RadNavigationViewItem">
    <Setter Property="FontSize" Value="{telerik:FluentResource ResourceKey=FontSize}" />
    <Setter Property="Content" Value="{Binding Title}" />
    <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
    <Setter Property="Icon" Value="{Binding IconGlyph}" />
    <Setter Property="IconTemplate">
        <Setter.Value>
            <DataTemplate>
                <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" Font="fas" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Regards,
Masha
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Neil N
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 14 Jul 2024, 03:50 PM

Thanks Masha!
Tags
NavigationView (Hamburger Menu)
Asked by
Neil N
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Masha
Telerik team
Share this question
or