具有过渡和缓存管理的 Silverlight 2 的 ViewStack 组件

• 下载源代码 - 519 KB

引言

这是我对上一篇文章 Silverlight 2 ViewStack 组件 – RIA 空间中不可或缺的控件 的延续。我为我们的 ViewStack 控件添加了过渡效果和缓存管理功能。请参阅 DShop。希望微软在下一个版本中添加更多类似导航控件。我希望这个控件对 Silverlight 社区有用。请随时提供您宝贵的意见。

过渡

现在，我们可以将以下过渡效果应用于放置在我们的 ViewStack 中的页面，我将很快添加更多效果。

• 淡入淡出过渡 (FadeTransition)
• 擦除过渡 (WipeTransition)

我遵循了 flawlesscode.com 在其题为 Silverlight 2 在 XAML 页面之间导航 的文章中展示的想法，以在我们的 ViewStack 中实现过渡效果。我衷心感谢这篇文章。

缓存管理

ViewStack 内部的页面可以通过设置 ViewInfo 对象上的 Cache 属性来配置是否缓存。当启用缓存功能时，激活的页面将被保存在缓存中，并且通过在后续激活期间设置 Canvas.SetZIndex 属性来切换页面的可见性。如果未启用缓存功能，将创建并显示页面的/用户控件的新实例。默认行为是 true（即，缓存）。

Using the Code

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" 
    xmlns:Transitions="clr-namespace:SilverlightApplication1.Utils.Transitions">
    <Grid x:Name="LayoutRoot" Background="Wheat"  >
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="50" />
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
         </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="Home" Content="Home" 
           Grid.Row="1" Grid.Column="1" Click="Home_Click"/>
        <Button x:Name="AboutUS" Content="AboutUS" 
           Grid.Row="1" Grid.Column="3" Click="AboutUS_Click"/>
         <Grid Grid.Row="3" Grid.ColumnSpan="4" Grid.Column="1">
                <local:ViewStack x:Name="myViewStack" 
                   SelectedViewName="{Binding Path=SelectedViewName,Mode=TwoWay}"  >
                 <local:ViewStack.Views>
                    <local:ViewInfo ViewName="Home" 
                          ViewTypeName="SilverlightApplication1.HomeView" 
                          Cache="False" >
                        <local:ViewInfo.Transition>
                            <Transitions:WipeTransition 
                               Direction="TopToBottom" Duration="1"/>
                        </local:ViewInfo.Transition>
                    </local:ViewInfo>
                    <local:ViewInfo ViewName="AboutUS" 
                          ViewTypeName="SilverlightApplication1.AboutUSView" 
                          Cache="False">
                        <!--<local:ViewInfo.Transition>
                            <Transitions:FadeTransition 
                                Duration="1"></Transitions:FadeTransition>
                        </local:ViewInfo.Transition>-->
                        <local:ViewInfo.Transition>
                            <Transitions:WipeTransition 
                               Direction="LeftToRight" Duration="1"/>
                        </local:ViewInfo.Transition>
                    </local:ViewInfo>
                </local:ViewStack.Views>
                </local:ViewStack>
         </Grid>
    </Grid>
</UserControl>

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";
        }
    }
}