This is a migrated thread and some comments may be shown as answers.

How to set control to a ThemePalette FontSizeL?

5 Answers 28 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Rob A. asked on 01 Dec 2020, 07:55 AM

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.

5 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 03 Dec 2020, 08:14 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 03 Dec 2020, 08:31 PM

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

Cheers, Rob.

0
Martin Ivanov
Telerik team
answered on 07 Dec 2020, 02:49 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 09 Dec 2020, 06:51 PM

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.

0
Martin Ivanov
Telerik team
answered on 09 Dec 2020, 10:16 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Martin Ivanov
Telerik team
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or