Resizing RadRating Item Visuals in Telerik Themes with Glyph Icons

Environment

Product	Version
RadRating for WPF	2024.2.514

Description

How to resize the star shapes in RadRating in newer Telerik themes (Material and later). In these themes, the rating visuals uses RadGlyph visuals. This article shows how to change their FontSize.

Solution

To change the size of the stars in RadRating, you can use a custom attached property that finds the RadGlyph elements and sets their FontSize. The property can be assigned to the RadRatingItem elements using an implicit style.

Defining the attached property

 public static class RadGlyphUtilities 
{ 
    public static double GetFontSize(DependencyObject obj) 
    { 
        return (double)obj.GetValue(FontSizeProperty); 
    } 
 
    public static void SetFontSize(DependencyObject obj, double value) 
    { 
        obj.SetValue(FontSizeProperty, value); 
    } 
 
    public static readonly DependencyProperty FontSizeProperty = 
        DependencyProperty.RegisterAttached( 
            "FontSize", 
            typeof(double),  
            typeof(RadGlyphUtilities),  
            new PropertyMetadata(-1d, OnFontSizeChanged)); 
 
    private static void OnFontSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    {             
        if (d is RadGlyph) 
        { 
            ((RadGlyph)d).FontSize = (double)e.NewValue; 
            return; 
        } 
 
        var element = (FrameworkElement)d; 
        if (element.IsLoaded) 
        { 
            SetGlyphsFontSize(element, (double)e.NewValue); 
        } 
        else 
        { 
            element.Loaded += Element_Loaded; 
        } 
    } 
 
    private static void Element_Loaded(object sender, RoutedEventArgs e) 
    { 
        var element = (FrameworkElement)sender; 
        SetGlyphsFontSize(element, GetFontSize(element)); 
        element.Loaded -= Element_Loaded; 
    } 
 
    private static void SetGlyphsFontSize(FrameworkElement parent, double fontSize) 
    { 
        var glyphs = parent.ChildrenOfType<RadGlyph>(); 
        foreach (RadGlyph glyph in glyphs) 
        { 
            glyph.SetCurrentValue(RadGlyph.FontSizeProperty, fontSize); 
        } 
    } 
} 

Using the attached property

<Window.Resources> 
    <Style TargetType="{x:Type telerik:RadRatingItem}"> 
        <Setter Property="MaxWidth" Value="15" /> 
        <Setter Property="local:RadGlyphUtilities.FontSize" Value="14" /> 
    </Style> 
</Window.Resources>