WPF Themes from Syncfusion

Windows Presentation Foundation (WPF) is the de-facto Windows desktop technology. WPF allows the rapid creation of desktop applications with amazingly complex functionality. The hard part has always been to make desktop application look good. Functionality may be excellent, but the square controls and gunmetal grey colors don’t have any wow-factor.

Syncfusion Essential Studio Community Edition is their offering for individuals and small businesses. It’s a massive array of tools which will really improve your time to market and UI. Among other tools, they provide UI tools for WPF and JavaScript. The WPF themes from Syncfusion are designed well, easy to modify, and easy to implement. The included themes are:

  • Office2003
  • Office2007Blue
  • Office2007Black
  • Office2007Silver
  • ShinyRed
  • Blend
  • ShinyBlue
  • SyncOrange
  • VS2010
  • Office2010Blue
  • Office2010Black
  • Office2010Silver
  • Metro
  • Transparent

I’ll show you how to add the WPF skins from Syncfusion to your UI. It involves a few easy steps.

First, I’m assuming you’ve added Syncfusion WPF NuGet sources to Visual Studio. I’ve explained that in a previous post: Syncfusion NuGet Sources.

  1. Add the Syncfusion WPF Tools to your project
  2. Update App.xaml to include the theme
  3. Change your MainWindow class to a Chromeless window
  4. Update MainWindow.xaml to set the VisualStyle of the theme

Add the Syncfusion WPF Tools to your project

Syncfusion Tools

Update App.xaml

For this example, I’m going to use the Blend style. You need to add a resource dictionary source to the theme you want.

<ResourceDictionary.MergedDictionaries>
          <ResourceDictionary Source="/syncfusion.Shared.WPF;component/SkinManager/BlendStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

 

Change your MainWindow to ChromelessWindow

Open the MainWindow.xaml.cs file and change the inheritance to ChromelessWindow. You’ll need to add two references:

using Syncfusion.Windows.Shared;
using Syncfusion.Windows.Tools.Controls;

 

public partial class MainWindow : ChromelessWindow
{
...

 

Update the MainWindow.xml to set the VisualDisplay to the desired theme

<syncfusion:ChromelessWindow 
...
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
      syncfusion:SkinStorage.VisualStyle="Blend">

 

Run your application. You’ll see all the controls have now changed to use the Syncfusion theme. Reach out to me if you run into problems. Happy coding with WPF.

DMCA.com Protection Status