Master Page In Silverlight

There is no MasterPage in Silverlight, so we have to create something similiar to that.

Lets Begin :)

Step 1.

//MainPage.xaml

There are 3 Grids inside main Grid, first Grid is for Header, second Grid act as a Container for other Silverlight UserControls [like Home, AboutUs] and third Grid is for Footer.

<Grid x:Name="LayoutRoot" Background="White"  Height="500" Width="700" >
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition/>
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>

        <Grid x:Name="GridHeader" Grid.Row="0">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Blue" Offset="0"/>
                    <GradientStop Color="#FFFBF5F5" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="128*" />
                <ColumnDefinition Width="158*" />
                <ColumnDefinition Width="152*" />
                <ColumnDefinition Width="128*" />
                <ColumnDefinition Width="134*" />
            </Grid.ColumnDefinitions>

            <HyperlinkButton x:Name="hlbhome" Foreground="White" Grid.Column="0" Content="Home" FontSize="12" FontFamily="Arial" FontWeight="Bold" Margin="26,8,13,0" Click="hlbhome_Click" Height="18" VerticalAlignment="Top" />
            <HyperlinkButton x:Name="hlbAboutUs" Foreground="White" Grid.Column="1"  Content="About Us" FontSize="12" FontFamily="Arial" FontWeight="Bold" Margin="26,8,13,0" Click="hlbAboutUs_Click" Height="18" VerticalAlignment="Top" />
            <HyperlinkButton x:Name="hlbLogin" Foreground="White" Grid.Column="2"  Content="Login" FontSize="12" FontFamily="Arial" FontWeight="Bold" Margin="26,8,13,0" Click="hlbLogin_Click" Height="18" VerticalAlignment="Top" />
            <HyperlinkButton x:Name="hlbRegister" Foreground="White" Grid.Column="3"  Content="Register" FontSize="12" FontFamily="Arial" FontWeight="Bold" Margin="26,8,13,0" Click="hlbRegister_Click" Height="18" VerticalAlignment="Top" />
            <HyperlinkButton x:Name="hlbContactUs" Foreground="White" Grid.Column="4"  Content="Contact Us" FontSize="12" FontFamily="Arial" FontWeight="Bold" Margin="26,8,13,0" Click="hlbContactUs_Click" Height="18" VerticalAlignment="Top" />

        </Grid>
        <Grid x:Name="GridContainer" Grid.Row="1">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Blue" Offset="0"/>
                    <GradientStop Color="#FFEBD0D0" Offset="0"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>

        <Grid Grid.Row="2" >
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Blue" Offset="0"/>
                    <GradientStop Color="#FFFBF5F5" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <TextBlock x:Name="footer" Text="Created by...." VerticalAlignment="Center" HorizontalAlignment="Center" />
        </Grid>
    </Grid>

On click of Hyperlinks corresponding UserControls will appear inside GridContainer.

Note :- Here we are using 'LinearGradientBrush' for giving some background color to Grids.

Step 2.

//MainPage.xaml.cs

  Home home;
  AboutUs aboutUs;
  Login login;
  Register register;
  ContactUs contactUs;

   public MasterPage()
   {
           InitializeComponent();
            home = new Home();
            aboutUs = new AboutUs();
            login = new Login();
            register = new Register();
            contactUs = new ContactUs();

            //Setting Home page as a default page.

            GridContainer.Children.Clear();
            GridContainer.Children.Add(home);
        }

        private void hlbhome_Click(object sender, RoutedEventArgs e)
        {
            GridContainer.Children.Clear();
            GridContainer.Children.Add(home);
        }

        private void hlbAboutUs_Click(object sender, RoutedEventArgs e)
        {
            GridContainer.Children.Clear();
            GridContainer.Children.Add(aboutUs);
        }

        private void hlbLogin_Click(object sender, RoutedEventArgs e)
        {
            GridContainer.Children.Clear();
            GridContainer.Children.Add(login);
        }

        private void hlbRegister_Click(object sender, RoutedEventArgs e)
        {
            GridContainer.Children.Clear();
            GridContainer.Children.Add(register);
        }

        private void hlbContactUs_Click(object sender, RoutedEventArgs e)
        {
            GridContainer.Children.Clear();
            GridContainer.Children.Add(contactUs);
        }

Step 3.

On click of  Hyperlink Home and AboutUs, Header and Footer remain same as it will be appear in real MasterPage -