How to Set Theme's Color Variation in Design Time

Environment

Product Version	2023.3.1114
Product	Telerik UI for WPF

Description

How to set a theme's color variation in Visual Studio's designer.

Solution

Visual Studio will run code for designer use if you have enabled the Project Code setting in the designer.

To change the color variation of the theme at design-time, create a new UserControl that will contain the controls or a custom control. In in its static constructor, call the LoadPreset method of the palette of the chosen theme.

MainWindow displaying a custom UserControl

XAML

	<Window x:Class="MyApplication.MainWindow"
	        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	        xmlns:local="clr-namespace:DesignTimeThemeVariationTest"
	        mc:Ignorable="d"
	        Title="MainWindow" Height="450" Width="800">
	    <Grid Background="Black">
	        <local:MyUserControl/>
	    </Grid>
	</Window>

Custom UserControl

XAML

	<UserControl x:Class="MyApplication.MyUserControl"
	             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
	             xmlns:local="clr-namespace:DesignTimeThemeVariationTest" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
	             mc:Ignorable="d" 
	             d:DesignHeight="450" d:DesignWidth="800">
	    <Grid>
	        <telerik:RadButton HorizontalAlignment="Center" VerticalAlignment="Center" 	Content="RadButton"/>
	    </Grid>
	</UserControl>

Setting the theme's color variation in the static constructor of the custom UserControl

C#

	public partial class MyUserControl : UserControl
	{
	    static MyUserControl()
	    {
	        FluentPalette.LoadPreset(FluentPalette.ColorVariation.Dark);
	    }

	    public MyUserControl()
	    {
	        InitializeComponent();
	    }
	}

VB.NET

	Public Partial Class MyUserControl
	    Inherits UserControl

	    Private Shared Sub New()
	        FluentPalette.LoadPreset(FluentPalette.ColorVariation.Dark)
	    End Sub

	    Public Sub New()
	        InitializeComponent()
	    End Sub
	End Class

Designer with the Dark color variation of the Fluent theme

Clean, rebuild and run the project before reloading the designer for the changes to take effect.

Setting the theme's color variation in the static constructor of MainWindow will not be reflected in the designer as it is not called at design-time.

See Also

• Available Themes