Xceed Toolkit Plus for WPF v5.0 Documentation
Welcome to Xceed Toolkit Plus for WPF v5.0 / Themes Usage Instructions
    Themes Usage Instructions

     

    Windows Themes

    The Windows7 and Windows8 themes are applied by default, depending on the operating system.

    To use the Windows10 theme, you need the following references:

    Adding the theme in code-behind in your Application

    // Core Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Themes.Windows10.Windows10ResourceDictionary() );
    // Toolkit Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Toolkit.Themes.Windows10.Windows10ResourceDictionary() );
    // ListBox Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.ListBox.Themes.Windows10.Windows10ThemeResourceDictionary() );
    // DataGrid Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.DataGrid.Themes.Windows10.Windows10ResourceDictionary() );

    Adding the theme in XAML in your Application

    xmlns:xcw="clr-namespace:Xceed.Wpf.Themes.Windows10;assembly=Xceed.Wpf.Themes.Windows10"
    xmlns:xctw="clr-namespace:Xceed.Wpf.Toolkit.Themes.Windows10;assembly=Xceed.Wpf.Toolkit.Themes.Windows10"
    xmlns:xclw="clr-namespace:Xceed.Wpf.ListBox.Themes.Windows10;assembly=Xceed.Wpf.ListBox.Themes.Windows10"
    xmlns:xcdw="clr-namespace:Xceed.Wpf.DataGrid.Themes.Windows10;assembly=Xceed.Wpf.DataGrid.Themes.Windows10"
    
     <Application.Resources>
          <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                <!-- Core Controls -->
                <xcw:Windows10ResourceDictionary />
                <!-- Toolkit Controls -->
                <xctw:Windows10ResourceDictionary />
                <!-- ListBox Controls -->
                <xclw:Windows10ThemeResourceDictionary />
                <!-- DataGrid Controls -->
                <xcdw:Windows10ResourceDictionary />
             </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
    </Application.Resources>

    Setting the theme directly on the view (DataGrid control)

    xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
    
     <Grid>
          <xcdg:DataGridControl>
             <xcdg:DataGridControl.View>
                <xcdg:TableflowView>
                   <xcdg:TableflowView.Theme>
                      <xcdg:Windows10Theme />
                   </xcdg:TableflowView.Theme>
                </xcdg:TableflowView>
             </xcdg:DataGridControl.View>
          </xcdg:DataGridControl>
     </Grid>

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:Windows10Theme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    Metro Themes

    To use the Metro themes, you need the following references:

    Adding the theme in code-behind in your Application

    // Core Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Themes.Metro.MetroDarkThemeResourceDictionary( new SolidColorBrush( Colors.Green ) ) );
    // Toolkit Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Toolkit.Themes.Metro.ToolkitMetroDarkThemeResourceDictionary( new SolidColorBrush( Colors.Green ) ) );
    // ListBox Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.ListBox.Themes.Metro.MetroDarkThemeResourceDictionary( new SolidColorBrush( Colors.Green ) ) );
    // DataGrid Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.DataGrid.Themes.Metro.MetroDarkThemeResourceDictionary( new SolidColorBrush( Colors.Green ) ) );
    // AvalonDock Controls
    this.Resources.MergedDictionaries.Add(new Xceed.Wpf.AvalonDock.Themes.MetroAccent.AvalonDockMetroDarkThemeResourceDictionary(new SolidColorBrush(Colors.Green)));

    Adding the theme in XAML in your Application

    xmlns:xcm="clr-namespace:Xceed.Wpf.Themes.Metro;assembly=Xceed.Wpf.Themes.Metro"
    xmlns:xctm="clr-namespace:Xceed.Wpf.Toolkit.Themes.Metro;assembly=Xceed.Wpf.Toolkit.Themes.Metro"
    xmlns:xclm="clr-namespace:Xceed.Wpf.ListBox.Themes.Metro;assembly=Xceed.Wpf.ListBox.Themes.Metro"
    xmlns:xcdm="clr-namespace:Xceed.Wpf.DataGrid.Themes.Metro;assembly=Xceed.Wpf.DataGrid.Themes.Metro"
    xmlns:xcam="clr-namespace:Xceed.Wpf.AvalonDock.Themes.MetroAccent;assembly=Xceed.Wpf.AvalonDock.Themes.MetroAccent"
    
    <Application.Resources>
          <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                <!-- Core Controls -->
                <xcm:MetroDarkThemeResourceDictionary AccentColor="Green" />
                <!-- Toolkit Controls -->
                <xctm:ToolkitMetroDarkThemeResourceDictionary AccentColor="Green" />
                <!-- ListBox Controls -->
                <xclm:MetroDarkThemeResourceDictionary AccentColor="Green" />
                <!-- DataGrid Controls -->
                <xcdm:MetroDarkThemeResourceDictionary AccentColor="Green" />
                <!-- AvalonDock Controls -->
                <xcam:AvalonDockMetroDarkThemeResourceDictionary AccentColor="Green" />
             </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
    </Application.Resources>

    Setting the theme directly on the view (DataGrid control)

    xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
    
     <Grid>
          <xcdg:DataGridControl>
             <xcdg:DataGridControl.View>
                <xcdg:TableflowView>
                   <xcdg:TableflowView.Theme>
                      <xcdg:MetroTheme>
                         <xcdg:MetroTheme.ThemeResourceDictionary>
                            <xcdg:MetroDarkThemeResourceDictionary AccentBrush="DarkBlue" />
                         </xcdg:MetroTheme.ThemeResourceDictionary>
                      </xcdg:MetroTheme>
                   </xcdg:TableflowView.Theme>
                </xcdg:TableflowView>
             </xcdg:DataGridControl.View>
          </xcdg:DataGridControl>
     </Grid>

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:MetroAccentTheme>
                   <xcad:MetroAccentTheme.ThemeResourceDictionary>
                      <xcad:AvalonDockMetroDarkThemeResourceDictionary AccentBrush="DarkBlue" />
                   </xcad:MetroAccentTheme.ThemeResourceDictionary>
                </xcad:MetroAccentTheme>
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    Office2007 Themes

    To use the Office2007 themes, you need the following references:

    Adding the theme in code-behind in your Application

    // Core Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Themes.Office2007.Office2007BlueResourceDictionary() );
    // Toolkit Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.Toolkit.Themes.Office2007.Office2007BlueResourceDictionary() );
    // ListBox Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.ListBox.Themes.Office2007.Office2007BlueThemeResourceDictionary() );
    // DataGrid Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.DataGrid.Themes.Office2007.Office2007BlueResourceDictionary() );
    // AvalonDock Controls
    this.Resources.MergedDictionaries.Add(new Xceed.Wpf.AvalonDock.Themes.Office2007.Office2007BlueResourceDictionary());

    Adding the theme in XAML in your Application

    xmlns:xco="clr-namespace:Xceed.Wpf.Themes.Office2007;assembly=Xceed.Wpf.Themes.Office2007"
    xmlns:xcto="clr-namespace:Xceed.Wpf.Toolkit.Themes.Office2007;assembly=Xceed.Wpf.Toolkit.Themes.Office2007"
    xmlns:xclo="clr-namespace:Xceed.Wpf.ListBox.Themes.Office2007;assembly=Xceed.Wpf.ListBox.Themes.Office2007"
    xmlns:xcdo="clr-namespace:Xceed.Wpf.DataGrid.Themes.Office2007;assembly=Xceed.Wpf.DataGrid.Themes.Office2007"
    xmlns:xcao="clr-namespace:Xceed.Wpf.AvalonDock.Themes.Office2007;assembly=Xceed.Wpf.AvalonDock.Themes.Office2007"
    
     <Application.Resources>
          <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                <!-- Core Controls -->
                <xco:Office2007BlueResourceDictionary />
                <!-- Toolkit Controls -->
                <xcto:Office2007BlueResourceDictionary />
                <!-- ListBox Controls -->
                <xclo:Office2007BlueThemeResourceDictionary />
                <!-- DataGrid Controls -->
                <xcdo:Office2007BlueResourceDictionary />
                <!-- AvalonDock Controls -->
                <xcao:Office2007BlueResourceDictionary />
             </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
    </Application.Resources>

    Setting the theme directly on the view (DataGrid control)

    xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
    
     <Grid>
          <xcdg:DataGridControl>
             <xcdg:DataGridControl.View>
                <xcdg:TableflowView>
                   <xcdg:TableflowView.Theme>
                      <xcdg:Office2007BlueTheme />
                   </xcdg:TableflowView.Theme>
                </xcdg:TableflowView>
             </xcdg:DataGridControl.View>
          </xcdg:DataGridControl>
     </Grid>

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:Office2007BlueTheme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    MaterialDesign Theme

    To use the Material Design theme, you need the following references:

    Adding the theme in code-behind in your Application

          //Core Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.Themes.MaterialDesign.MaterialDesignResourceDictionary()
          {
            LicenseKey = "WTKXX-XXXXX-XXXXX-XXXX",
            IsDark = true,
            AccentColor = Xceed.Wpf.Themes.MaterialDesignColors.MaterialDesignColor.Blue,
            PrimaryColor = Xceed.Wpf.Themes.MaterialDesignColors.MaterialDesignColor.Green } );
          // Toolkit Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.Toolkit.Themes.MaterialDesign.MaterialDesignResourceDictionary() );
          // ListBox Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.ListBox.Themes.MaterialDesign.MaterialDesignResourceDictionary() );
          // DataGrid Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.DataGrid.Themes.MaterialDesignResourceDictionary() );
          // AvalonDock Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.AvalonDock.Themes.MaterialDesign.MaterialDesignResourceDictionary() );

    Adding the theme in XAML in your Application

    xmlns:xcct=http://schemas.xceed.com/wpf/xaml/material/design/themes
    xmlns:xctt=http://schemas.xceed.com/wpf/xaml/toolkit/themes
    xmlns:xclt=http://schemas.xceed.com/wpf/xaml/listbox/themes
    xmlns:xcdt=http://schemas.xceed.com/wpf/xaml/datagrid/themes
    xmlns:xcat=http://schemas.xceed.com/wpf/xaml/avalondock/themes
    
     
    <Application.Resources>
    
        <ResourceDictionary>
    
          <ResourceDictionary.MergedDictionaries>
    
            <!-- Core Controls -->
    
            <xcct:MaterialDesignResourceDictionary LicenseKey="WTKXX-XXXXX-XXXXX-XXXX"
    
                                                   IsDark="True"
    
                                                   AccentColor="Blue"
    
                                                   PrimaryColor="Green"/>
    
            <!-- Toolkit Controls -->
    
            <xctt:MaterialDesignResourceDictionary />
    
            <!-- ListBox Controls -->
    
            <xclt:MaterialDesignResourceDictionary />
    
            <!-- DataGrid Controls -->
    
            <xcdt:MaterialDesignResourceDictionary />
    
            <!-- AvalonDock Controls -->
    
            <xcat:MaterialDesignResourceDictionary />
    
          </ResourceDictionary.MergedDictionaries>
    
        </ResourceDictionary>
    
      <Application.Resources>

    Setting the theme directly on the view (DataGrid control)

                    
    xmlns:xcdg=http://schemas.xceed.com/wpf/xaml/datagridxmlns:xcdt=http://schemas.xceed.com/wpf/xaml/datagrid/themes
    
     <Grid>
    
          <xcdg:DataGridControl >
    
          <xcdg:DataGridControl.View>
    
            <xcdg:TableflowView>
    
              <xcdg:TableflowView.Theme>
    
                <xcdt:MaterialDesignTheme />
    
              </xcdg:TableflowView.Theme>
    
            </xcdg:TableflowView>
    
          </xcdg:DataGridControl.View>
    
        </xcdg:DataGridControl> </Grid>

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:MaterialDesignTheme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    FluentDesign Theme

    To use the Fluent Design theme, you need the following references:

    Please note that the FluentDesign Theme only works with .NET Framework 4.6.2+ or .NET5+
    Using this theme with earlier versions will trigger errors.

    Adding the theme in code-behind in your Application

         
    //Core Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.Themes.FluentDesign.FluentDesignResourceDictionary()
          {
            LicenseKey = "WTKXX-XXXXX-XXXXX-XXXX",
            IsDark = true,
            AccentColor = Xceed.Wpf.Themes.FluentDesign.FluentDesignAccentNames.Blue } );
                                
            // Toolkit Controls
            this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.Toolkit.Themes.FluentDesign.FluentDesignResourceDictionary() );
    
          // ListBox Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.ListBox.Themes.FluentDesign.FluentDesignResourceDictionary() );
    
          // DataGrid Controls
          this.Resources.MergedDictionaries.Add(
    new Xceed.Wpf.DataGrid.Themes.FluentDesignResourceDictionary() );

    Adding the theme in XAML in your Application

    xmlns:xcct="http://schemas.xceed.com/wpf/xaml/fluentui/design/themes"
    xmlns:xctt="http://schemas.xceed.com/wpf/xaml/toolkit/themes"
    xmlns:xclt="http://schemas.xceed.com/wpf/xaml/listbox/themes"
    xmlns:xcdt="http://schemas.xceed.com/wpf/xaml/datagrid/themes"
    xmlns:xcat="http://schemas.xceed.com/wpf/xaml/avalondock/themes"
    
    
    <Application.Resources>
    
        <ResourceDictionary>
    
          <ResourceDictionary.MergedDictionaries>
    
            <!-- Core Controls -->
    
            <xcct:FluentDesignResourceDictionary LicenseKey="WTKXX-XXXXX-XXXXX-XXXX"
                                                 IsDark="True"                                                                                                                                                
                                                 AccentColor="{x:Static xcct:FluentDesignAccentNames.Blue}" />
    
            <!-- Toolkit Controls -->
            <xctt:FluentDesignResourceDictionary />
    
            <!-- ListBox Controls -->
            <xclt:FluentDesignResourceDictionary />
    
            <!-- DataGrid Controls -->
            <xcdt:FluentDesignResourceDictionary />
    
          </ResourceDictionary.MergedDictionaries>
    
        </ResourceDictionary>
    
      </Application.Resources>
                

    Setting the theme directly on the view (DataGrid control)

    xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
    xmlns:xcdt="http://schemas.xceed.com/wpf/xaml/datagrid/themes"
    
    <Grid>
    
          <xcdg:DataGridControl >
    
          <xcdg:DataGridControl.View>
    
            <xcdg:TableflowView>
    
              <xcdg:TableflowView.Theme>
    
                <xcdt:FluentDesignTheme />
    
              </xcdg:TableflowView.Theme>
    
            </xcdg:TableflowView>
    
          </xcdg:DataGridControl.View>
    
        </xcdg:DataGridControl>
    </Grid>
                

    Setting the theme directly on the DockingManager (AvalonDock control)

                    
    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    xmlns:xcct="http://schemas.xceed.com/wpf/xaml/fluentui/design/themes"
    
    <xcad:DockingManager>
                  <xcad:DockingManager.Theme>
                                 <xcad:FluentDesignTheme IsDark="True"
                                    Accent="{x:Static xcct:FluentDesignAccentNames.Green}" />
        </xcad:DockingManager.Theme>
    </xcad:DockingManager>

     

    Other Themes

     

    Aero Theme

    To use the Aero theme, you need the following references:

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:AeroTheme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    VS2010 Theme

    To use the VS2010 theme, you need the following references:

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:VS2010Theme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    Metro Theme (with no accent color)

    To use the Metro theme, you need the following references:

    Setting the theme directly on the DockingManager (AvalonDock control)

    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
    
     <Grid>
          <xcad:DockingManager>
             <xcad:DockingManager.Theme>
                <xcad:MetroTheme />
             </xcad:DockingManager.Theme>
          </xcad:DockingManager>
     </Grid>

     

    LiveExplorer Theme

    To use the LiveExporer theme, you need the following references:

    Adding the theme in code-behind in your Application

    // ListBox Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.ListBox.Themes.LiveExplorer.LiveExplorerThemeResourceDictionary() );

    Adding the theme in XAML in your Application

    xmlns:xcle="clr-namespace:Xceed.Wpf.ListBox.Themes.LiveExplorer;assembly=Xceed.Wpf.ListBox.Themes.Explorer"
    
     <Application.Resources>
          <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                <!-- ListBox Controls -->
                <xcle:LiveExplorerThemeResourceDictionary />
             </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
    </Application.Resources>

     

    Media Player Theme

    To use the Media Player theme, you need the following references:

    Adding the theme in code-behind in your Application

    // ListBox Controls
    this.Resources.MergedDictionaries.Add( new Xceed.Wpf.ListBox.Themes.WMP11.WMP11ThemeResourceDictionary() );

    Adding the theme in XAML in your Application

    xmlns:xcmp="clr-namespace:Xceed.Wpf.ListBox.Themes.WMP11;assembly=Xceed.Wpf.ListBox.Themes.WMP11"
    
     <Application.Resources>
          <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                <!-- ListBox Controls -->
                <xcmp:WMP11ThemeResourceDictionary />
             </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
    </Application.Resources>

     

    Theming in Custom DockingManager

    To apply theming in a custom DockingManager you can :

            Click here to view an example

    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Xceed.Wpf.AvalonDock.Themes.Aero;component/Theme.xaml" />
      </ResourceDictionary.MergedDictionaries>
      <Style TargetType="{x:Type local:MyDockingManager}"
             BasedOn="{StaticResource {x:Type xcad:DockingManager}}" />
    </ResourceDictionary>
    <local:MyDockingManager x:Name="_dockingManager"
                            AllowMixedOrientation="True"
                            BorderBrush="Black"
                            BorderThickness="1">
    
    <local:MyDockingManager.Theme>
        <xcad:AeroTheme />
      </local:MyDockingManager.Theme>
      <xcad:LayoutRoot x:Name="_layoutRoot">
          <..../>
      </xcad:LayoutRoot>
    </local:MyDockingManager>
    public class MyDockingManager : DockingManager
      {
      }

           Click here to view an example

    <local:MyDockingManager x:Name="_dockingManager"
                            AllowMixedOrientation="True"
                            BorderBrush="Black"
                            BorderThickness="1">
      <local:MyDockingManager.Theme>
        <xcad:AeroTheme />
      </local:MyDockingManager.Theme>
      <xcad:LayoutRoot x:Name="_layoutRoot">
          <..../>
      </xcad:LayoutRoot>
    </local:MyDockingManager>
    public class MyDockingManager : DockingManager
      {
        protected override void OnThemeChanged( DependencyPropertyChangedEventArgs e )
        {
          base.OnThemeChanged( e );
          var editingStyle = new Style( typeof( MyDockingManager ) );
          editingStyle.BasedOn = ( Style )FindResource( typeof( DockingManager ) );
          this.Style = editingStyle;
        }
      }