Styling WPF UI using Resource Dictionaries

By [)ia6l0 iii
INSTANTLY dtSearch TERABYTES OF POPULAR DATA TYPES; hundreds of reviews, etc.!

Styling our wpf applications has become a necessity of the hour. A lot can be achieved using Infragisitcs controls in this regard. One such beautiful utility is the XamRibbonWindow control.

The following article shows a generic implementation of a style manger class that can be used to style a XamRibbonWindow control and its contents!

 

Create a sealed class that has a static method called GetStyle. Let it take the theme name as a parameter and emit out collection of Resource Dictionaries.

These Resource Dictionaries are the primary building blocks of the XamRibbonWindow and its control’s resources. These include styles too.

 

Necessary comments are indicated in green and Key points in Red.

The Style files are available here

 

The controls that I have tested these styles include “Dock Manager” and “Ribbon Control” from Infragistics. And also on the style resources,

  1. They are added as Page resources. You can download them from this URL. And place them at appropriate locations as the code refers them.
  2. The ones that come by default with Infragistics are tweaked and modified to get the custom theme selection

 

Style Manager is just a static implementation of collecting styles into resource dictionaries.

 

#region Namespaces

 

using System;

using System.Windows;

 

#endregion Namespaces

 

namespace Utilities.UI.Common.Styles

{

    /// <summary>

    /// Style Manager.

    /// </summary>

    public sealed class StyleManager

    {

        /// <summary>

        /// Gets the style.

        /// </summary>

        /// <param name="selectedTheme">The selected theme.</param>

        /// <returns></returns>

        public static System.Collections.ObjectModel.Collection<ResourceDictionary> GetStyle(string selectedTheme)

        {

System.Collections.ObjectModel.Collection<ResourceDictionary> styleDictionaries = new System.Collections.ObjectModel.Collection<ResourceDictionary>();

 

            switch (selectedTheme)

            {

                case ThemeConstants.BlueTheme:

                default:

                    //GenericStyle

                    ResourceDictionary genericBlueStylesDictionary = new ResourceDictionary();

genericBlueStylesDictionary.Source  = (new Uri("/Utilities.UI.Common;component/Styles/BlueTheme/GenericStyles.xaml", UriKind.RelativeOrAbsolute));

                    //DataPresenterGeneric

                    ResourceDictionary dataPresenterBlueGenericDictionary = new ResourceDictionary();

dataPresenterBlueGenericDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric.xaml", UriKind.RelativeOrAbsolute));

                    //DataPresenterGenericBrush

                    ResourceDictionary dataPresenterBlueGeneric_BrushesDictionary = new ResourceDictionary();

dataPresenterBlueGeneric_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric_Brushes.xaml", UriKind.RelativeOrAbsolute));

                    //DataPresenterGenericExpress

                    ResourceDictionary dataPresenterBlueGeneric_ExpressDictionary = new ResourceDictionary();

dataPresenterBlueGeneric_ExpressDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric_Express.xaml", UriKind.RelativeOrAbsolute));

 

                    //Blue Dock Manager

                    ResourceDictionary dockManagerOffice2k7BlueDictionary = new ResourceDictionary();

dockManagerOffice2k7BlueDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlueTheme/DockManager/DockManagerOffice2k7Blue.xaml", UriKind.RelativeOrAbsolute));

                    //Blue Brush

                    ResourceDictionary dockManagerOffice2k7Blue_BrushesDictionary = new ResourceDictionary();

dockManagerOffice2k7Blue_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlueTheme/DockManager/DockManagerOffice2k7Blue_Brushes.xaml", UriKind.RelativeOrAbsolute));

                    //Blue Ribbon

                    ResourceDictionary ribbonOffice2k7BlueDictionary = new ResourceDictionary();

ribbonOffice2k7BlueDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlueTheme/Ribbon/RibbonOffice2k7Blue.xaml", UriKind.RelativeOrAbsolute));

                    //Blue Ribbon Brush

                    ResourceDictionary ribbonOffice2k7Brushes_BlueDictionary = new ResourceDictionary();

ribbonOffice2k7Brushes_BlueDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlueTheme/Ribbon/RibbonOffice2k7Brushes_Blue.xaml", UriKind.RelativeOrAbsolute));

 

                    styleDictionaries.Add(genericBlueStylesDictionary);

                    styleDictionaries.Add(dataPresenterBlueGenericDictionary);

                    styleDictionaries.Add(dataPresenterBlueGeneric_BrushesDictionary);

                    styleDictionaries.Add(dataPresenterBlueGeneric_ExpressDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7BlueDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7Blue_BrushesDictionary);

                    styleDictionaries.Add(ribbonOffice2k7BlueDictionary);

                    styleDictionaries.Add(ribbonOffice2k7Brushes_BlueDictionary);

                    break;

                case ThemeConstants.BlackTheme:

 

                    ResourceDictionary genericBlackStylesDictionary = new ResourceDictionary();

genericBlackStylesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlackTheme/GenericStyles.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dataPresenterBlackGenericDictionary = new ResourceDictionary();

dataPresenterBlackGenericDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dataPresenterBlackGeneric_BrushesDictionary = new ResourceDictionary();

dataPresenterBlackGeneric_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric_Brushes.xaml", UriKind.RelativeOrAbsolute));

                   

                    ResourceDictionary dockManagerOffice2k7BlackDictionary = new ResourceDictionary();

dockManagerOffice2k7BlackDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlackTheme/DockManager/DockManagerOffice2k7Black.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dockManagerOffice2k7Black_BrushesDictionary = new ResourceDictionary();

dockManagerOffice2k7Black_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlackTheme/DockManager/DockManagerOffice2k7Black_Brushes.xaml", UriKind.RelativeOrAbsolute));

 

                    ResourceDictionary ribbonOffice2k7BlackDictionary = new ResourceDictionary();

ribbonOffice2k7BlackDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlackTheme/Ribbon/RibbonOffice2k7Black.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary ribbonOffice2k7Brushes_BlackDictionary = new ResourceDictionary();

ribbonOffice2k7Brushes_BlackDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/BlackTheme/Ribbon/RibbonOffice2k7Brushes_Black.xaml", UriKind.RelativeOrAbsolute));

 

                    styleDictionaries.Add(genericBlackStylesDictionary);

                    styleDictionaries.Add(dataPresenterBlackGenericDictionary);

                    styleDictionaries.Add(dataPresenterBlackGeneric_BrushesDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7BlackDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7Black_BrushesDictionary);

                    styleDictionaries.Add(ribbonOffice2k7BlackDictionary);

                    styleDictionaries.Add(ribbonOffice2k7Brushes_BlackDictionary);

                    break;

                case ThemeConstants.SilverTheme:

                    ResourceDictionary genericSilverStylesDictionary = new ResourceDictionary();

genericSilverStylesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/SilverTheme/GenericStyles.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dataPresenterSilverGenericDictionary = new ResourceDictionary();

dataPresenterSilverGenericDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dataPresenterSilverGeneric_BrushesDictionary = new ResourceDictionary();

dataPresenterSilverGeneric_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/DataPresenter/DataPresenterGeneric_Brushes.xaml", UriKind.RelativeOrAbsolute));

 

                    ResourceDictionary dockManagerOffice2k7SilverDictionary = new ResourceDictionary();

dockManagerOffice2k7SilverDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/SilverTheme/DockManager/DockManagerOffice2k7Silver.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary dockManagerOffice2k7Silver_BrushesDictionary = new ResourceDictionary();

dockManagerOffice2k7Silver_BrushesDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/SilverTheme/DockManager/DockManagerOffice2k7Silver_Brushes.xaml", UriKind.RelativeOrAbsolute));

 

                    ResourceDictionary ribbonOffice2k7SilverDictionary = new ResourceDictionary();

ribbonOffice2k7SilverDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/SilverTheme/Ribbon/RibbonOffice2k7Silver.xaml", UriKind.RelativeOrAbsolute));

                    ResourceDictionary ribbonOffice2k7Brushes_SilverDictionary = new ResourceDictionary();

ribbonOffice2k7Brushes_SilverDictionary.Source = (new Uri("/Utilities.UI.Common;component/Styles/SilverTheme/Ribbon/RibbonOffice2k7Brushes_Silver.xaml", UriKind.RelativeOrAbsolute));

 

                    styleDictionaries.Add(genericSilverStylesDictionary);

                    styleDictionaries.Add(dataPresenterSilverGenericDictionary);

                    styleDictionaries.Add(dataPresenterSilverGeneric_BrushesDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7SilverDictionary);

                    styleDictionaries.Add(dockManagerOffice2k7Silver_BrushesDictionary);

                    styleDictionaries.Add(ribbonOffice2k7SilverDictionary);

                    styleDictionaries.Add(ribbonOffice2k7Brushes_SilverDictionary);

                    break;

            }

            return styleDictionaries;

        }

    }

}

 

Note I have used, XamRibbon Application Menu to do the styling as the example provided in the Infragistic default sample.

 

<!-- ApplicationMenu -->

        <igRibbon:XamRibbon.ApplicationMenu>

            <igRibbon:ApplicationMenu x:Name="applicationMenu" >

                <igRibbon:SeparatorTool/>

                <igRibbon:MenuTool Caption="Change Theme" FontSize="7" ButtonType="Segmented">

                    <igRibbon:RadioButtonTool

                                                Caption="Blue"

                                                Tag="Office2k7Blue"

                                Click="OnThemeSelected"

                        igRibbon:MenuToolBase.MenuItemDescription="Apply Office2007 Blue theme."/>

                        <igRibbon:RadioButtonTool

                                                Caption="Black"

                                                Tag="Office2k7Black"

                                Click="OnThemeSelected"

                            igRibbon:MenuToolBase.MenuItemDescription="Apply Office2007 Black theme."/>

                            <igRibbon:RadioButtonTool

                                                Caption="Silver"

                                                Tag="Office2k7Silver"

                                Click="OnThemeSelected"

                                igRibbon:MenuToolBase.MenuItemDescription="Apply Office2007 Silver theme."/>

                </igRibbon:MenuTool>

            </igRibbon:ApplicationMenu>

        </igRibbon:XamRibbon.ApplicationMenu>

        <!-- End ApplicationMenu -->

 

On all three different, themes, call the “OnThemeSelected” method whose implementation is shown below.

 

  /// <summary>

        /// Called when [theme selected].

        /// </summary>

        /// <param name="sender">The sender.</param>

        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>

        private void OnThemeSelected(object sender, RoutedEventArgs e)

        {

            string selectedTheme = string.Empty;

 

            RadioButtonTool tool = e.Source as RadioButtonTool;

            if (tool != null)

                selectedTheme = tool.Tag as string;

 

            ApplyTheme(selectedTheme);

        }

 

I used the Tag Property to store the ‘Theme Key’. The tags are linked to constants.

/// <summary>

    /// ThemeConstants

    /// </summary>

    public sealed class ThemeConstants

    {

        public const string BlueTheme   = "Office2k7Blue";

        public const string SilverTheme = "Office2k7Silver";

        public const string BlackTheme  = "Office2k7Black";

 

   }

 

    /// <summary>

    /// Applies the theme.

    /// </summary>

    /// <param name="selectedTheme">The selected theme.</param>

    private void ApplyTheme(string selectedTheme)

    {

            _shellWindow.Resources.MergedDictionaries.Clear();

 

            System.Collections.ObjectModel.Collection<ResourceDictionary> styleDictionaries = StyleManager.GetStyle(selectedTheme);

            foreach (ResourceDictionary item in styleDictionaries)

            {

    // Add to the XamRibbonWindow(_shellWindow)

                _shellWindow.Resources.MergedDictionaries.Add(item);

            }

     }


Cheers

Popularity  (4499 Views)