Filter apply button font

[Frans]

Hi,

I recently discovered that the font family of the filter apply button is set to Segoe MDL2 Assets (by using the visual tree explorer). Possibly this is an error in the original resources file from Telerik. I also thought I had made a mistake with the localization, but even a brand new VS solution does not fix the issue.

So I decided to change it using 

<telerik:RadDataGrid.Resources>
    <Style TargetType="gridPrimitives:DataGridFilteringFlyoutApplyFilterButton">
        <Setter Property="FontFamily" Value="Segoe UI"/>
    </Style>
</telerik:RadDataGrid.Resources>

 

but this doesn't change the font family at all.

Please indicate me a way to reverse the apply button font family to Segoe UI (default font).

Thanks.

[Ivaylo Gergov]

Hi Frans,

I can see in our source code that the FontFamily of this control is the MS SymbolThemeFontFamily which is Segoe UI Symbol.
Could you please try to download our latest binaries and see if the problem still exists?

Regards,
Ivaylo Gergov
Telerik by Progress

[Frans]

Hi,

Thanks for your response.Unfortunately, this didn't help.My Telereik reference is now set to C:\Program Files (x86)\Telerik\UI for Windows Universal R3 2016\SDKs\Windows 8.1\Telerik UI for Windows Universal\Telerik UI For Windows 8.1 version 2016.3.1013.45.

Note that this particular font is not used anywhere in my project.

Any other clue ?

Why does using the setter in my initial post doesn't change the font ? what if I did want to change the font ?

Thanks

[Ves]

Hi Frans,

Here's how you can set the apply filtering button's font family:

<telerik:RadDataGrid x:Name="grid1" Grid.Row="1">
            <telerik:RadDataGrid.Resources>
                <Style TargetType="telerikPrimitives:DataGridFilteringFlyout">
                    <Setter Property="FilterButtonStyle">
                        <Setter.Value>
                            <Style TargetType="telerikPrimitives:DataGridFilteringFlyoutApplyFilterButton">
                                <Setter Property="FontFamily" Value="Segoe UI" />
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadDataGrid.Resources>
        </telerik:RadDataGrid>

where xml namespaces are defined like this:

xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"

Best regards,
Ves
Telerik by Progress

[Frans]

Thank you, that did the trick !

[Frans]

I have yet 2 other similar questions:

1. What is the localization key for the "Apply" button ?

2. how to change the font of the filtering up and down arrows (same issue as original post)

Thanks

[Ves]

Hi Frans,

Onto your questions:

1. It's "FilterButton"

2. Do you mean the filtering expand/collapse button? As the symbol is within an image, it would not be possible to update the font directly. However, you can use your own image and take advantage of  UserThemeResources extension. Here is how to achieve it:
 - Add the image to your Assets folder e.g. ExpandCollapse.png
 - Add a page named ThemeResources.xaml in the Themes folder in your app. The page content should look like this:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <BitmapImage x:Key="TelerikGridFilterFlyoutExpanderIcon" UriSource="ms-appx:///Assets/ExpandCollapse.png"/>
</ResourceDictionary>

- Add the following resources to your App.xaml:

<Application.Resources>
        <ResourceDictionary>
            <telerik:UserThemeResources x:Key="themeResourceInitializer"
                                        LightResourcesPath="ms-appx:///Themes/ThemeResources.xaml"
                                        DarkResourcesPath="ms-appx:///Themes/ThemeResources.xaml">
            </telerik:UserThemeResources>

            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="ms-appx:///Telerik.UI.Xaml.Grid.UWP/Themes/ThemeResourcesDark.xaml"/>
                        <ResourceDictionary Source="{CustomResource DarkResourcesPath}"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="ms-appx:///Telerik.UI.Xaml.Grid.UWP/Themes/ThemeResourcesLight.xaml"/>
                        <ResourceDictionary Source="{CustomResource LightResourcesPath}"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Note, that the above example uses the same file with the same image for light and dark themes. You might want to extend it to include another image and another theme resources file in order to have different appearance in dark and light themes.

Best regards,
Ves
Telerik by Progress

[Frans]

Hi Ves.

1. Thanks for your quick response. 'FilterButton' localization key did it.

2. No, I meant the up/down sorting arrows next to the column name in the header of the grid (see previous post attached file).

It's the same story as my original post: the font is set to Segoe MDL2 Assets instead of Segoe UI.

Frans.

[Ves]

Hi Frans,

You can add the following line to your app's resources:

<FontFamily x:Key="SymbolThemeFontFamily">Segoe UI</FontFamily>

This will change the font of the symbols within the grid. Note, however, that Segoe UI does not feature the same symbols with the same codes ("\uEB11" and "\uEB0F", so the results would not be as expected.

Best regards,
Ves
Telerik by Progress