Filter apply button font

9 posts, 0 answers
  1. Frans
    Frans avatar
    6 posts
    Member since:
    Mar 2016

    Posted 13 Oct Link to this post

    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.

  2. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 18 Oct Link to this post

    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
    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
  3. Frans
    Frans avatar
    6 posts
    Member since:
    Mar 2016

    Posted 19 Oct in reply to Ivaylo Gergov Link to this post

    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

  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 24 Oct Link to this post

    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
    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
  5. Frans
    Frans avatar
    6 posts
    Member since:
    Mar 2016

    Posted 05 Nov in reply to Ves Link to this post

    Thank you, that did the trick !
  6. Frans
    Frans avatar
    6 posts
    Member since:
    Mar 2016

    Posted 05 Nov in reply to Ves Link to this post

    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

  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 09 Nov Link to this post

    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
        <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
    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
  8. Frans
    Frans avatar
    6 posts
    Member since:
    Mar 2016

    Posted 09 Nov in reply to Ves Link to this post

    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.

  9. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Nov Link to this post

    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
    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
Back to Top