在富互联网应用(Rich Internet Applications,RIA)开发领域,Silverlight2提供了一套强大的工具和控件。本文将介绍如何为Silverlight 2中的ViewStack控件添加过渡效果和缓存管理功能。
过渡效果是提升用户体验的重要手段之一。在Silverlight 2中,可以通过为ViewStack控件添加过渡效果来增强页面切换时的视觉体验。以下是一些可以实现的过渡效果:
这些过渡效果的实现灵感来自于flawlesscode.com网站上的文章《Silverlight 2 Navigating Between XAML Pages》。在此,向该文章的作者表示衷心的感谢。
缓存管理是提高应用性能的关键技术之一。在Silverlight2中,可以通过设置ViewInfo对象的Cache属性来控制ViewStack控件中的页面是否被缓存。当启用缓存功能后,一旦页面被激活,它就会被保留在缓存中,后续激活时只需通过设置Canvas.SetZIndex属性来切换页面的可见性。如果缓存功能未启用,则每次激活时都会创建并显示页面/用户控件的新实例。默认行为是启用缓存(即Cache属性为true)。
<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:WipeTransition Direction="LeftToRight" Duration="1"/>
</local:ViewInfo.Transition>
</local:ViewInfo>
</local:ViewStack.Views>
</local:ViewStack>
</Grid>
</Grid>
</UserControl>
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";
}
}
}