Click here to Skip to main content
13,002,676 members (56,996 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 4 Nov 2013

Master page in WPF?

, 4 Nov 2013
Rate this:
Please Sign up or sign in to vote.
How to implement the master page pattern in WPF?


Going back and forth between desktop and web apps development, and thinking some good pattern can be reused. Here is an example on how to implement the master page pattern in WPF.


The sample presented here is implemented with Visual Studio 2013 Express for Windows Desktop, .NET Framework 4.5. But the code can be reused with former versions of the framework.

Using the code

The sample shows a simple application with a tabbed UI. Actually two tabs are present, each with its own view.  

Each view is supposed to have a title with a specific style, and some space on the left hand of the tab. 

Rather than having to manually add a grid with at least two rows, two lines, and a title, each time a new view is started, I propose one way to implement a master page like solution.

  • First, use a common base class for all views, this will allow for some factoring of common code. In our case the base view will hold a property storing the title string. Even though I have used this possibility, one could also want to use attached properties, but this is not covered here.
  • Then define a global style targeting the base view and override the graphical tree in order to implement our suggested layout.

The base view  

This is a simple C# class deriving from UserControl, it holds a dependency property storing the title of the view.  

Using the base view

  • For each view, have the class in the code behind derive from the base view
  • In the XAML file for the view, add the namespace for the base view. For example :

Then modify the tag to the name of the base view class, prefixed by the namespace : 

<v:BaseView xmlns:v="clr-namespace:MasterPage.View" ...

Define the global style

Now it is time to define the global style for setting up the layout. As we want the style to be global, we will store it in the App.xaml of the application. After having added the appropriate namespaces to the Application tag, here is the style:  

        <!--Master page like style-->
<Style x:Key="MasterControlStyle" TargetType="{x:Type v:BaseView}">
    <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type v:BaseView}">
                        <ColumnDefinition Width="{StaticResource ResourceKey=LeftColumnLength}"/>
                        <RowDefinition Height="{StaticResource ResourceKey=TitleHeight}"/>


                        Content="{TemplateBinding ViewTitle}" 

                        Style="{StaticResource ResourceKey=TitleStyle}" 



                    <!--Placeholder for the view-->
                    <ContentControl Grid.Column="1" Grid.Row="1" 

                          Content="{TemplateBinding Content}"/>

We can see at the first line of the style it targets the base view and defines a control template with a grid. The grid has two rows and two columns. The first row is used to show the title, bound to the ViewTitle property located in the base view. The first column is left empty, to provide for space. Finally, the cell located in the second column, of the second row will be the placeholder for the view.

Use the global style

 From now on, our views all derive from the base view, and we have defined a global style whose aim is to override the layout of our views. One last step is required. We need to set the style for each view, for example :   

    ViewTitle="View 1 Title!!"
    Style="{StaticResource MasterControlStyle}"

This will also be a good place to define the ViewTitle property.

Screen captures 

Here are two screen capture showing the two views for the uploaded sample code (in   


  • Initial post.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Pierre Leclercq
Software Developer (Senior)
France France
Being a software developer since 1994, I have worked in the US (DC area), and in France (Paris area), on various types of projects (device drivers, Imaging, Financial apps and database-driven web sites).

My favourite technical interests are C++, C#, .net, WPF, image analysis, GPUs, GPGPU, AI, and compilers.

See :

You may also be interested in...

Comments and Discussions

QuestionAha? Pin
johannesnestler5-Nov-13 4:52
memberjohannesnestler5-Nov-13 4:52 
Sorry I don't get it. I don't see what you mean with master page pattern (I thought about master-detail). Can you add some more explaination?
AnswerRe: Aha? Pin
Pierre Leclercq5-Nov-13 8:57
memberPierre Leclercq5-Nov-13 8:57 
GeneralRe: Aha? Pin
johannesnestler5-Nov-13 21:45
memberjohannesnestler5-Nov-13 21:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170626.1 | Last Updated 4 Nov 2013
Article Copyright 2013 by Pierre Leclercq
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid