Silverlight 2 : Master Pages implementation in Silverlight 2

The title of the post may be sound funny, and it was fun since many arguments did happen while whole process of this implementation.

There are several post made by several expertise and enthus on the same, Basically a big question is do we need this?? since all Silverlight application however powerful they are, they are still run under umbrella of ASP.NET. I agree on this !

But there might be some business scenarios, if not now then might be in future, so keeping this vision in mind, here I am showing you a very easy way to implement Master Page concept in Silverlight, It is not difficult code and neither we need to touch App.xaml file..here I go :

This is what I want to build, You can see header part "Explore .NET with Vikram Pendse" followed by buttons [Third Party Silverlight Control may provide you good Menu bar too] and footer as "Microsoft .NET for everyone !!".

Now once I click on Home or RSS or any other button, Idea is to keep header and footer as it is and load other page contents in middle blank portion as content if we assume this page as Master page. so the required XAML code is,

XAML Code :

<Grid x:Name="LayoutRoot" Background="AliceBlue">
        <Button x:Name="btnBlog" Height="22" Width="67" Content="Blog" Margin="161.5,36,171.5,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" Click="btnBlog_Click"/>
        <Button x:Name="btnRSS" Height="22" Width="67" Content="RSS" HorizontalAlignment="Left" Margin="94,36,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" Click="btnRSS_Click"/>
        <Button x:Name="btnHome" Height="22" Width="67" Content="Home" HorizontalAlignment="Left" Margin="27,36,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" Click="btnHome_Click"/>
        <Button x:Name="btnDownload" Height="22" Width="67" Content="Download" Margin="0,36,104,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="Width, Height" Click="btnDownload_Click"/>
        <Button x:Name="btnAbtus" Height="22" Width="67" Content="About Us" Margin="0,36,37,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="Width, Height" Click="btnAbtus_Click"/>
        <TextBlock Height="23" Margin="94,8,116,0" VerticalAlignment="Top" Text="Explore .NET with Vikram Pendse" TextWrapping="Wrap" Foreground="#FF000000"/>
        <StackPanel x:Name="stk" Width="400" Margin="0,66,0,30"/>

        <TextBlock Height="23" Margin="106,0,104,3" VerticalAlignment="Bottom" Text="Microsoft .NET for everyone!!" TextWrapping="Wrap" Foreground="#FF000000"/>
    </Grid>

Here you can see that I am using "stk" as my contentplace holder stack where I will load the other pages on each corresponding button clicks, rest of the code is just routine design.

C# Code :

namespace SL_MasterPages
{
    public partial class Page : UserControl
    {
        int var = 0;

        public Page()
        {
            InitializeComponent();
        }

        private void NavigateRequest(int w)
        {
            if(w>0)
            {
                switch(w)
                {
                    case 1:  stk.Children.Add(new RSS());
                             break;
                    case 2:  stk.Children.Add(new Home());
                             break;
                    default: this.Content = new Page();
                             break;
                }
            }
        }

     private void btnRSS_Click(object sender, RoutedEventArgs e)
        {
            stk.Children.Clear();
            var = 1;
            NavigateRequest(var);
        }

        private void btnHome_Click(object sender, RoutedEventArgs e)
        {
            stk.Children.Clear();
            var = 2;
            NavigateRequest(var);
        }
   }
}

Here I have implemented for first two buttons, I am setting and resetting flag values for each button with a global variable as "var", and I am clearing stack in each click so as to keep contents dynamic in nature.

I have written a "NavigateRequest" sub proc which takes integer value just for switching between two pages. So this is very simple way to switch between the pages from one to anothet and result will be like..

Now you can see messages like "You are on Home Page", "You are on RSS Page", these you will get once you click on corresponding button on Main Header and you also have observed now that header and footer are constant in all case like Master Pages in ASP.NET

Hope this will encourage you to go ahead and explore it more and apply the same in all possible business scenarios which need this kind of implementation.

Feedback and suggestions for this are most welcome, I will be more than happy to know if there are any more simple and good way to implement such things.

Vikram.