Learn how to easily theme your WPF applications with the Fluent Theme in Telerik UI for WPF. Add transparency, acrylic effects, shadows, animations and more to modernize your app with the latest UX and UI trends.
As promised by Dobrin back in January, the Fluent Inspired Theme is now available as part of the latest release of Telerik UI for WPF (and WinForms too). In the next few paragraphs I will go over what's in-the-box and focus on how you can add the theme to your WPF application, and how to further customize it based on your needs.
I remember watching the keynote at Build in 2017, and how the crowd reacted when the guys at Microsoft dropped the news about Fluent. As a C# dev working on WPF, I thought to myself: "Wouldn't it be cool to get on WPF too?" Well, now you can!
I am happy to say that you can now easily revamp your application built with Telerik UI for WPF (yes, you do need to be using our controls for this to work :) ), applying the Fluent Design System principles. Along with the theme, you will get out-of-the-box transparency, shadow, animations on mouse interactions, and last but not least the much-wanted acrylic effect of the Window and even more. I will dig deeper into these customization options further down.
Let's just say we couldn't stop there and made it so that you can choose between two color variations—light and dark—just as you can with the rest of the themes in the suite that have more than one preset. With a single line of code, you can change the default appearance of the Progress Fluent theme from light to dark, making the change between the two extremely easy:
You can go even further and customize the default palette colors according to the Windows accent colors:
As I promised, let's dive into the details of what makes this theme so different:
It has two built-in effects:
In the dark variation they look even better:
If you do not want them to blend with the application background, you can easily change this by setting:
and the result will be:
FluentPalette.Palette.CornerRadius = new CornerRadius(3);
FluentPalette.Palette.FocusThickness= new Thickness(1);
And now, we move onto my favorite part:
You've gotten this far, meaning you are intrigued? :) I hope that's the case, because you will also see how easy it is to set it up and get you going.
If you are using implicit styles:
1. Open your application
2. Click on a Telerik Control in Design View (as I said, you do need the suite)
3. Next, Click on the Theme element and choose Fluent from the available themes:
4. Press OK and you are set! :) Congrats!
On the other hand, if you are using StyleManager, then you will need to set one line in the code behind:
More information can be found in our help section on the Fluent theme.
The team and I would love to hear what you think about the Fluent Design Theme in Telerik UI for WPF, so make sure to get the latest version and try it out.
We are anxious to hear (or see :) ) your comments, thoughts and suggestions in our Feedback Portal, or right in the comments section below. Additionally, you can also take a look at how the Fluent theme looks with our WPF Color Theme Generator tool or in our Demo App on the Windows Store.
If you are new to Telerik UI for WPF, please head over to the product page to learn more about the toolkit and what the full offering has to give.
That's all from me and I hope you found this article helpful!
Sia has been a frontend developer in the XAML team located in Sofia, Bulgaria for almost 9 years. In her free time she enjoys travelling abroad, reading books and most of all spending time with her kids.
Subscribe to be the first to get our expert-written articles and tutorials for developers!