How to set control to a ThemePalette FontSizeL?

[Rob A.]

Reading this article ...

Palette Font Size

Assume I have my Font Sizes setup as in the sample:

Office2016Palette.Palette.FontSizeS = 10;
Office2016Palette.Palette.FontSize = 12;
Office2016Palette.Palette.FontSizeL = 14;
Office2016Palette.Palette.FontFamily = new FontFamily("Segoe UI");

 

Suppose I want to set the FontSize for a specific control:

<telerik:RadRadioButton x:Name="rbBiomeOption" Grid.Row="0" Grid.Column="0" Content="Standard Biome" GroupName="Biomes" Margin="4" CornerRadius="8" FontWeight="Bold"/>

 

I'd like to add to the RadRadioButton something like 

<telerik:RadRadioButton x:Name="rbBiomeOption" Grid.Row="0" Grid.Column="0" Content="Standard Biome" GroupName="Biomes" Margin="4" CornerRadius="8" FontWeight="Bold" FontSize="FontSizeL"/>

 

Which is not valid, but that's essentially my objective.

Any ideas?

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

To achieve your requirement, you can use the following syntax:

 <telerik:RadRadioButton FontSize="{telerik:Office2016Resource ResourceKey=FontSizeL}" /> 

Office2016Resource is a DynamicResourceExtension which is used to get the palette elements in XAML.

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Do you have code behind sample ... I can't hardcode a user selected theme.

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

This solution is suitable only if you use a single theme only. There is no unified class that does this because each theme has different features, so each theme (from the ones supporting palettes) provides a sperate DynamicResourceExtension (like Office2016Resource, FluentResouce, etc.).

To achieve your requirement, you can introduce a new class that manages the settings for the different themes, and bind its properties to the elements instead of using the DynamicResourceExtensions. In the class you can use the theme palettes to fetch the sizes and colors you need. This approach is similar to the one suggested for the IsEnabled property of the tooltip in the following forum: https://www.telerik.com/forums/quick-method-to-disable-tooltips-in-code-behind

Here is an example for the modified class:

public sealed class StaticSettings : ViewModelBase
{
	private static StaticSettings instance = null;
	private static readonly object lockObject = new object();
	private double fontSizeL = 0;

	private StaticSettings()
	{
	}

	public static StaticSettings Instance
	{
		get
		{
			lock (lockObject)
			{
				if (instance == null)
				{
					instance = new StaticSettings();
				}
				return instance;
			}
		}
	} 

	public double FontSizeL
	{
		get { return fontSizeL; }
		set 
		{ 
			fontSizeL = value; 
			OnPropertyChanged("FontSizeL"); 			
		}
	}
}

You can store whatever color and font settings you need in the class. And you can data bind them to the corresponding elements using the following syntax:

<telerik:RadRadioButton FontSize="{Binding Source={x:Static local:StaticSettings.Instance}, Path=FontSizeL}"/>

When you change the theme, you can update the FontSizeL property using the corresponding DynamicResourceExtension or hardcoded value for the corresponding theme.

void OnThemeChanged()
{
	if (newTheme is Office2016)
	{
		StaticSettings.Instance.FontSizeL = Office2016Palette.Palette.FontSizeL;
	}
	else if (newTheme is Fluent)
	{
		StaticSettings.Instance.FontSizeL = FluentPalette.Palette.FontSizeL;
	}
	else
	{
		StaticSettings.Instance.FontSizeL = 12;
	}
}

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Hi Martin,

Thanks for the response, a little too much work just for offsetting a FontSize based on a theme ... I can cut that code overhead down to a one method and a case statement (less code and easier to manage).

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

This sounds good. If you come up with such solution it would be great to share it here so anyone having the same requirement can adopt it.

Regards,
Martin Ivanov
Progress Telerik