Telerik UI for WPF has more than 100 controls to create beautiful, high-performance desktop applications, while also quickly building enterprise-level office WPF applications. Telerik UI for WPF supports MVVM, touch, etc. The created applications are reliable and well-structured, very easy to maintain, and its intuitive API will be seamlessly integrated into the Visual Studio toolbox.
With the recent release of R2 2023, Telerik UI for WPF adds a new Windows 11 themed high-density (or thin) layout option that helps enhance the overall user experience of the application, energizes the user interface, and reflects The brand and style of the product.
In this article, we will introduce you to Windows 11 ThemeSizeHelper, a revolutionary way of Windows 11 themes that enables users to take the visual appeal and customization of WPF applications to new heights.
Get the new version of Telerik UI for WPF download (Q technical exchange: 726377843)
Understanding Windows11ThemeSizeHelper
Windows11ThemeSizeHelper is specially designed for Windows 11 theme, its main function is to switch between two different layouts using the IsInCompactMode property. By taking advantage of this property, the helper combines resources, resizes to provide a larger size tailored for Windows 11 Standard, and transitions effortlessly to a more compact size in Windows 11 Compact.
Easy to implement
Integrating themes into apps can sometimes be a challenge for developers. With just one line of code, users of Telerik UI for WPF can apply Windows 11 Lite Mode and witness an instant transformation of the look and style of the entire application:
custom dimension
Next show a way to customize the size of the Windows 11 theme, creating two StackPanels - one using the standard Windows 11 layout, and the other will modify specific resources within the scope of the StackPanel.
<StackPanel Orientation="Horizontal">
<telerik:GroupBox Header="Windows11" HorizontalAlignment="Left" Width="350">
<StackPanel>
<telerik:RadButton Content="Button"/>
<telerik:RadListBox Margin="0 8">
<telerik:RadListBoxItem>Item 1</telerik:RadListBoxItem>
<telerik:RadListBoxItem>Item 2</telerik:RadListBoxItem>
<telerik:RadListBoxItem>Item 3</telerik:RadListBoxItem>
</telerik:RadListBox>
<telerik:RadWatermarkTextBox Text="WatermarkTextBox"/>
</StackPanel>
</telerik:GroupBox>
<telerik:GroupBox Header="Windows11 Customized" HorizontalAlignment="Left" Width="350" Margin="8 0 0 0">
<StackPanel>
<StackPanel.Resources>
<!-- Customized Windows 11 resources with ThemeSizeHelper -->
<sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.DefaultControlMinHeight}">25</sys:Double>
<sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.DefaultItemMinHeight}">24</sys:Double>
<sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.FontSize}">13</sys:Double>
<Thickness x:Key="{x:Static telerik:Windows11ResourceKey.DefaultControlPadding}">8 0</Thickness>
<Thickness x:Key="{x:Static telerik:Windows11ResourceKey.NestedButtonMargin}">0 0 8 0</Thickness>
<Thickness x:Key="{x:Static telerik:Windows11ResourceKey.InputPadding}">4 1 4 1</Thickness>
</StackPanel.Resources>
<telerik:RadButton Content="Button"/>
<telerik:RadListBox Margin="0 8" >
<telerik:RadListBoxItem>Item 1</telerik:RadListBoxItem>
<telerik:RadListBoxItem>Item 2</telerik:RadListBoxItem>
<telerik:RadListBoxItem>Item 3</telerik:RadListBoxItem>
</telerik:RadListBox>
<telerik:RadWatermarkTextBox Text="WatermarkTextBox"/>
</StackPanel>
</telerik:GroupBox>
</StackPanel>
Find resource value
Now just navigate to the Windows11ThemeSizeHelper class in the Telerik.Windows.Controls.dll assembly, in this file you will find the resource names corresponding to the Windows 11 Standard and Compact themes.
Alternatively, you can also download resource files from the PaletteResourcesExtractor SDK sample.
Restore App Appearance
Color Theme Generator is a super cool tool that allows users to play around with different colors and customize theme palettes in real time, experimenting with various shades, mixing and matching them.