Consistent Window Look & Feel

As part of a beginners WPF series (Beginners WPF series) that I am writing at CodeProject, I just started writing an article on DependancyProperties. As part of that, I started to write a bunch of demo projects to illustrate the joy of DependancyProperties to people. As a side effect, I had to think up good uses for the demos that were not too involved.

I started to write one for Attached DependancyProperties, and realized that it was actually a fairly good idea. The idea being that you may want all your applications windows to have the same look and feel. Maybe a top banner, some content, and bottom status bar. So I had a think about this, and decided this could be easily achieved through the use of a single Attached DependancyProperty.

Using my solution is really easy, if you want to use the “Common” look and feel, just set a DP in the Window declaration within the XAML or code behind, and that’s it. Shall we have a look at the code.

<Window x:Class="Attached_Properties_DPs.Window1″
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Attached_Properties_DPs"
    local:AttachedPropertyChildAdder.IsMasterHeaderApplied="true"
    WindowStartupLocation="CenterScreen"
    Title="Attached_Properties_DPs" Height="400″ Width="600″>
        <!– Extra content will be added here at runtime if the
             local:AttachedPropertyChildAdder.
             IsMasterHeaderApplied="true" is set to true
             try changing the value of this in the top of this
             file, set it false and run me.
             See that there is no header applied if its false,
             and there is if its true –>
        <Button x:Name="btn1″ Content="click me"
                Margin="10,10,10,10″ Click="btn1_Click"/>
</Window>

As you can see, this example has the DP IsMasterHeaderApplied set to true, which means this Window will use the Common look and feel. So how does this work. Well, it's all down to the IsMasterHeaderApplied DP, which is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Imaging; 

namespace Attached_Properties_DPs
{
    /// <summary>
    /// A simply show case, to demonstrate a usage of an attached
    /// DP property.
    /// This example lets Windows add a header portion to the their
    /// default content with some new Contents. Kind of like using
    /// Master Pages in ASP .NET
    /// </summary>
    public class AttachedPropertyChildAdder
    {
        #region Register IsMasterHeaderApplied DP
        public static readonly DependencyProperty
            IsMasterHeaderAppliedProperty =
            DependencyProperty.RegisterAttached(
                "IsMasterHeaderApplied",
                typeof(Boolean),
                typeof(AttachedPropertyChildAdder),
                new FrameworkPropertyMetadata(
                    IsMasterHeaderAppliedChanged)); 

        public static void SetIsMasterHeaderApplied(
            DependencyObject element, Boolean value)
        {
            element.SetValue(IsMasterHeaderAppliedProperty, value);
        }
        public static Boolean GetIsMasterHeaderApplied(
            DependencyObject element)
        {
            return (Boolean)element.GetValue(
                IsMasterHeaderAppliedProperty);
        }
        #endregion 

        #region PropertyChanged callback 

        /// <summary>
        /// Is called whenever a user of the
        /// IsMasterHeaderApplied Attached DP changes
        /// the IsMasterHeaderApplied DP value
        /// </summary>
        /// <param name="obj"></param>
        /// <param name="args"></param>
        public static void IsMasterHeaderAppliedChanged(DependencyObject obj,
            DependencyPropertyChangedEventArgs args)
        {
            if ((bool)args.NewValue)
            {
                if (obj is Window)
                {
                    Window wnd = (Window)obj;
                    wnd.Loaded += new RoutedEventHandler(wnd_Loaded);
                }
            }
        } 

        /// <summary>
        /// Hook into the Window load event to replace the Content of the Window
        /// with some custom Content, to show case exactly how cool DPs are.
        ///
        /// In this example we are going to create a header for the Window.
        ///
        /// So setting the IsMasterHeaderApplied will make sure the Window
        /// gets a header applied.
        ///
        /// Kind of like Master Pages in ASP .NET
        /// </summary>
        public static void wnd_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                DockPanel dp = new DockPanel();
                dp.LastChildFill = true;
                StackPanel sp = new StackPanel();
                dp.Children.Add(sp);
                sp.Background = new SolidColorBrush(Colors.CornflowerBlue);
                sp.Orientation = Orientation.Vertical;
                sp.SetValue(DockPanel.DockProperty, Dock.Top);
                BitmapImage bitmap = new BitmapImage(
                    new Uri("Images/Header.png", UriKind.Relative));
                Image image = new Image();
                image.Source = bitmap;
                sp.Children.Add(image);
                UIElement el =
                    ((DependencyObject)sender as Window).Content as UIElement;
                el.SetValue(DockPanel.DockProperty, Dock.Bottom);
                ((DependencyObject)sender as Window).Content = null;
                dp.Children.Add(el);
               ((DependencyObject)sender as Window).Content = dp;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(
                    string.Format("Exception : {0}",ex.Message));
            }
        }
        #endregion
    }
}

As can be seen, we simply use the Window.Loaded event, and keep the original Window content safe, and then create the “Common” layout, and then re-add the original content.

This maintains all the wiring of RoutedEvents that the original content had in place.

This example simply shows an image banner at the top of any Window that sets the IsMasterHeaderApplied DP to true. And when run, it looks like this:

Have a look at the original XAML, you see it declares the Button, but doesn’t declare the top banner, that is added by the IsMasterHeaderApplied DP.

Ok this is a very simple example, but let's say the “Common” content contained all the menus wired up to RoutedCommands and all the footer/status area, etc.

I think it would work well.