Silverlight 2 的 ViewStack 组件 – RIA 领域的必然控件

• 下载源代码 - 527.65 KB

引言

我发现 Flex 中的 ViewStack 组件是在定义的的内容面板中切换视图的一个优雅的导航器。 不幸的是，我没有在 Silverlight 2 SDK 中找到任何类似的导航器。 因此，我考虑为我的项目 DShop（一个 Silverlight 2 技术演示器）开发一个简单的 ViewStack 组件。 我将通过添加更多功能来增强此控件，并希望得到您的宝贵意见。

什么是 ViewStack？

• ViewStack 是一个导航器容器，包含堆叠在彼此之上的其他子容器。
• 同一时间只能有一个子容器可见或处于活动状态。
• 您可以创建自己的逻辑来管理活动视图。
• SelectedIViewName 属性包含活动视图的逻辑名称。
• 只需从模型更改 SelectedViewName 属性即可切换视图（ModelLocator.Instance.SelectedViewName = "Home"）。

代码

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>

历史

• 2008年10月18日：初始发布