Windows 8 App - How to Create Master Page
Hi, In this article I will explain you how to create a Master page for a simple Windows 8 app, I will create a simple Windows app with two pages ,and I will navigate between them and show you how master page is used in those two pages.
Step 1:
Create a simple Windows 8 App project as show below using Visual Studio 2012
By default MainPage.xaml gets created, which serves as the landing page.
Step 2:
Create a new master page say 'MasterPage.xaml' as show below
Add the below xaml markup to the MasterPage.xaml as shown below
I split the MasterPage into three sections: Header Body and footer using Grid. In body section I put he frame where I show the content of other pages of the app, the header and footer remain same throughout the app.
<Page
x:Class="MyWin8App.MasterPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyWin8App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*" />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid x:Name="gdHeader" Background="DarkBlue">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="headerTitle" Foreground ="White" FontSize="30" VerticalAlignment="Center">Master Header</TextBlock>
</StackPanel>
</Grid>
<Frame x:Name="bodyContent" Grid.Row="1" Background="white"></Frame>
<Grid x:Name="gdFooter" Grid.Row="2" Background="LightGray">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="footerTitle" Foreground="Black" FontSize="30" VerticalAlignment="Center">Master Footer</TextBlock>
</StackPanel>
</Grid>
</Grid>
</Page>
Modify App.xaml.cs by adding the below after 'if (rootFrame.Content == null)' condition
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
var master = new MasterPage();
Window.Current.Content = master;
// Ensure the current window is active
Window.Current.Activate();
master.BodyContent.Navigate(typeof(MainPage));
Step 3:
Modify MainPage.xaml by adding the below code
<Page
x:Class="MyWin8App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyWin8App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Black" FontSize="30" >Main Page content</TextBlock>
<TextBlock></TextBlock>
<HyperlinkButton x:Name="contactUs" Foreground="Black" Click="contactUs_Click">Contact us</HyperlinkButton>
</StackPanel>
</Grid>
</Page>
Step 4:
Create another page as 'ContactUs.xaml' page as shown below
Step 5:
Modify ContactUs.xaml by adding the below code
<Page
x:Class="MyWin8App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyWin8App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Black" FontSize="30" >Main Page content</TextBlock>
<TextBlock></TextBlock>
<HyperlinkButton x:Name="contactUs" Foreground="Black" Click="contactUs_Click">Contact us</HyperlinkButton>
</StackPanel>
</Grid>
</Page>
Step 6:
Build the code and run the app
Step 7:
Click on Contact Us link to navigate to ContactUs page
Step 8:
Click on Go to MainPage link to navigate to MainPage
As you can see in MainPage and ContactUs page , the Master page header and footer exists in both the pages