ViewStack Component for Silverlight 2 – An Inevitable Control in RIA Space

• Download source - 527.65 KB

Introduction

I find that the ViewStack component in Flex is an elegant navigator for switching views in defined content panes. Unfortunately I couldn't find any such navigator within Silverlight 2 SDK. So I thought of developing a simple ViewStack component for my project DShop, a Silverlight 2 technology demonstrator. I will be enhancing this control with more features and would like to have your valuable comments.

What is ViewStack?

• A ViewStack is a navigator container that contains other child containers stacked on top of each other.
• Only one child container can be visible or active at a time.
• You can create your own logic to manage active views.
• The SelectedIViewName property contains the logical name of the active view.
• Simply change the SelectedViewName property from model to switch the view (ModelLocator.Instance.SelectedViewName = "Home").

Code

Page.xaml.cs

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;
using SilverlightApplication1.Control;
namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
            
        }
        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = ModelLocator.Instance;
            ModelLocator.Instance.SelectedViewName = "Home";
            
        }
        private void Home_Click(object sender, RoutedEventArgs e)
        {
            ModelLocator.Instance.SelectedViewName = "Home";
        }
        private void AboutUS_Click(object sender, RoutedEventArgs e)
        {
            ModelLocator.Instance.SelectedViewName = "AboutUS";
        }
    }
}

Page.xaml

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:SilverlightApplication1.Control" >
    <Grid x:Name="LayoutRoot" Background="Wheat"  >
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="Home" Content="Home" Grid.Row="0" 
					Grid.Column="0" Click="Home_Click"/>
        <Button x:Name="AboutUS" Content="AboutUS" Grid.Row="0" 
					Grid.Column="2" Click="AboutUS_Click"/>
        
         <Grid Grid.Row="2" Grid.ColumnSpan="4" Grid.Column="0">
                <local:ViewStack x:Name="myViewStack"  
		    SelectedViewName="{Binding Path=SelectedViewName,Mode=TwoWay}" >
                    <local:ViewStack.Views>
                        <local:ViewInfo ViewName="Home" 
			ViewTypeName="SilverlightApplication1.HomeView"/>
                        <local:ViewInfo ViewName="AboutUS" 
			ViewTypeName="SilverlightApplication1.AboutUSView"/>
                    </local:ViewStack.Views>
                </local:ViewStack>
         </Grid>
    </Grid>
</UserControl>

History

• 18^th October, 2008: Initial post