How to Set Theme's Color Variation in Design Time
Environment
| Product Version | 2023.3 1115 |
| 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
<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
<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
public partial class MyUserControl : UserControl
{
static MyUserControl()
{
FluentPalette.LoadPreset(FluentPalette.ColorVariation.Dark);
}
public MyUserControl()
{
InitializeComponent();
}
}
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.