Xceed Toolkit Plus for WPF v4.6 Documentation
Themes Usage Instructions
Welcome to Xceed Toolkit Plus for WPF v4.6 > 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;

    }

  }

 

 

 

Copyright Xceed Software Inc

Send Feedback