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
- 18th October, 2008: Initial post
Last Updated 18 Oct 2008 |
Advertise |
Privacy |
Terms of Use |
Copyright ©
CodeProject, 1999-2010
