Pages & Frames in Silverlight PRO

The Frame is a content control. It contains a single child element and it inherits from ContentControl. The single child it displays can be of the type Page. We can easily use this capability for developing an application that includes pages displayed one at a time within a frame. The following code sample shows how simple it is to do it.

This is the MainPage.xaml file. It displays a Frame element together with few buttons the user can use in order to navigate to another page.

<UserControl x:Class="SilverlightApplication23.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="500"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="MainContainer" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition MaxHeight="100"></RowDefinition>
        </Grid.RowDefinitions>
        <sdk:Frame Height="179" Grid.Row="0" HorizontalAlignment="Left"
                   Margin="43,30,0,0" Name="MainFrame" VerticalAlignment="Top" Width="315" />
        <Grid Grid.Row="1" x:Name="LayoutButtons" Background="Yellow">
            <Grid.ColumnDefinitions>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button FontSize="22" Grid.Column="0" Content="First"
                    MaxWidth="100" MaxHeight="50" Click="ButtonClick"></Button>
            <Button FontSize="22" Grid.Column="1" Content="Second"
                    MaxWidth="100" MaxHeight="50" Click="ButtonClick1"></Button>
            <Button FontSize="22" Grid.Column="3" Content="Third"
                    MaxWidth="100" MaxHeight="50" Click="ButtonClick2"></Button>
        </Grid>
    </Grid>
</UserControl>

This is the MainPage.xaml.cs file. It includes the code behind of the main page. This is the code responsible for switching between the pages.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication23
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void ButtonClick(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Uri("/First.xaml", UriKind.Relative));
        }

        private void ButtonClick1(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Uri("/Second.xaml", UriKind.Relative));
        }

        private void ButtonClick2(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Uri("/Third.xaml", UriKind.Relative));
        }
    }
}

This is the First.xaml file. It includes the definition for the user interface the first page displays.

<navigation:Page x:Class="SilverlightApplication23.Page1" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation=
           "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Page1 Page" 
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot">
        <sdk:Label Height="41" HorizontalAlignment="Left" Margin="31,43,0,0" Name="label1" 
        VerticalAlignment="Top" Width="225" Content="This is First Page!" FontSize="24" />
    </Grid>
</navigation:Page>

This is the Second.xaml file. It includes the definition for the user interface the second page displays.

<navigation:Page x:Class="SilverlightApplication23.Second" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation=
           "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480" Title="Second Page" 
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot">
        <sdk:Label Height="47" HorizontalAlignment="Left" Margin="101,67,0,0" 
           Name="label1" VerticalAlignment="Top" Width="342" FontSize="24" 
           Content="This is The Second Page!" Background="#15000000" />
    </Grid>
</navigation:Page>

This is the Third.xaml file. It includes the definition for the user interface the third page displays.

<navigation:Page x:Class="SilverlightApplication23.Third" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation=
           "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480" Title="Third Page" 
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot">
        <sdk:Label Height="64" HorizontalAlignment="Left" 
                   Margin="55,49,0,0" Name="label1" VerticalAlignment="Top" 
                   Width="454" Content="Third Page!" Background="#4BF2D11F" FontSize="25" />
    </Grid>
</navigation:Page>

The following video clip shows and explains this code sample.