Click here to Skip to main content
Click here to Skip to main content

WPF MasterPage

, 25 May 2009
Rate this:
Please Sign up or sign in to vote.
Create a MasterPage like functionality in WPF with 15 lines of code
WPF Masterpage Image

Introduction

This article shows a way of creating MasterPage-like functionality in WPF with 15 lines of code.

Background

One of the great things in .NET 2.0 was MasterPage. Unfortunately, MasterPage no longer exists in WPF. I have seen a lot of different approaches to achieving ASP.NET MasterPage-like functionality in WPF, with varying levels of complexity. I was not satisfied with any of the techniques and therefore came up with my own approach.

Solution

My solution is Frame. Frames can be used as a kind of content placeholder. "Ding". Surely that must ring a bell.

Using the Code

The sample code was written in C# using Visual Studio 2008 IDE. All the relevant code is in StartPage.xaml and should be self-explanatory. I will summarize the code shown below. You use a DockPanel for your MasterPage layouter. Then you add a first Frame and dock it to the top. Add a second Frame and dock it to the bottom, then add a StackPanel for your navigation (or whatever layout control you fancy) and dock it to the left or right. Finally add a Frame that will contain your content pages. The trick is to set the Source property of that Frame to a Page.

 <Page ...>
     <DockPanel Name="pnlMaster" >
         <Frame Name="frmHeader" DockPanel.Dock="Top" 
		Source="/MasterPages/HeaderPage.xaml" Height="100"></Frame>
         <Frame Name="frmFooter" DockPanel.Dock="Bottom" 
		Source="/MasterPages/FooterPage.xaml"></Frame>
         <StackPanel Name="spnlNavigator" DockPanel.Dock="Left" 
		Width="150" Background="Orange">
             <Button Name="bntContentPage1" Margin="10,10,10,10" 
		Content="Content Page 1" Click="OnClick" 
		CommandParameter="ContentPage1.xaml" />
             
             <Button Name="bntContentPage2" Margin="10,10,10,10" 
		Content="Content Page 2" Click="OnClick" 
		CommandParameter="ContentPage2.xaml" />
          
          </StackPanel>
          <Frame Name="frmMain" Source="/ContentPages/ContentPage1.xaml"></Frame>
     </DockPanel>
     <x:Code>
         <![CDATA[<span class="code-SummaryComment">
          void OnClick(object sender, RoutedEventArgs e)
          {
             frmMain.Source = new Uri("/ContentPages/" + 
		((Button)sender).CommandParameter.ToString(), UriKind.Relative);
          }
       ]]></span>
     </x:Code>
 </Page>

History

  • 25th May, 2009: Initial post

License

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

About the Author

pkaelin
Software Developer Swissphone Telecom AG
Switzerland Switzerland
Pascal has been a passionate software developer since 1998. A native of Switzerland, he has worked around the world, from Ireland, England and Germany to as far afield as Australia and China.
 
Having started in C and moved on to C++, he now develops in C# on .NET and always does his best to keep up with new technologies such as WPF, WCF, WF and Silverlight.
 
He is interested in networking with like-minded software developers around the world.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMember 805109012-Aug-11 3:20 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 25 May 2009
Article Copyright 2009 by pkaelin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid