# 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**

```C#
     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**

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