TransitioningContentControl控件主要应用于变化内容的过渡呈现效果。本文为大家介绍该组件的特性以及实例应用。
组件所在命名空间：
System.Windows.Controls
组件常用方法：
AbortTransition：终止过渡并且返回前一个内容。
组件常用属性：
IsTransitioning：获取一个值来表示该控件实例是否处于过渡状态。
RestartTransitionOnContentChange：获取或设置一个值，指出在设置新内容过渡期间目前的过渡是否将中止。
Transition：获取或设置过渡的名称。这些直接对应在PresentationStates组内部的VisualStates。
组件常用事件：
TransitionCompleted：当目前的过渡完成时发生。
实例：
注意：要使该控件发生作用的条件是该控件实例的内容必须要改变，才能在内容改变途中产生过渡效果。
详细的说明在代码中给出。
MainPage.xaml文件代码：
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" x:Class="SilverlightClient.MainPage"
d:DesignWidth="320" d:DesignHeight="240">
<UserControl.Resources>
<!--设置渐变的样式开始-->
<Style x:Key="tccUpDown" TargetType="layoutToolkit:TransitioningContentControl">
<Setter Property="IsTabStop" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Transition" Value="DefaultTransition" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="layoutToolkit:TransitioningContentControl">
<Border>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="PresentationStates">
<!--向上渐变开始-->
<vsm:VisualState x:Name="UpTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="30"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="-30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<!--向上渐变结束-->
<!--向下渐变开始-->
<vsm:VisualState x:Name="DownTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-40"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.600" Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<!--向下渐变结束-->
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--设置渐变的样式结束-->
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="320" Height="240" Background="White">
<StackPanel Background="Azure">
<layoutToolkit:TransitioningContentControl x:Name="tcc" HorizontalAlignment="Center" Margin="30" FontSize="18" Content="点击按钮改变内容"/>
<Button x:Name="UpButton" Content="上" Width="100" Height="30" Margin="10" FontSize="14"/>
<Button x:Name="DownButton" Content="下" Width="100" Height="30" Margin="10" FontSize="14"/>
</StackPanel>
</Grid>
</UserControl>
MainPage.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;
namespace SilverlightClient
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.UpButton.Click += new RoutedEventHandler(UpButton_Click);
this.DownButton.Click += new RoutedEventHandler(DownButton_Click);
}
void DownButton_Click(object sender, RoutedEventArgs e)
{
tcc.Transition = "DownTransition";//设置渐变效果的名称
tcc.Content = DateTime.Now.ToLongTimeString();//令控件的内容发生改变，只有这样才能引发过渡效果
}
void UpButton_Click(object sender, RoutedEventArgs e)
{
tcc.Transition = "UpTransition";//设置渐变效果的名称
tcc.Content = DateTime.Now.ToLongTimeString();//令控件的内容发生改变，只有这样才能引发过渡效果
}
}
}
最终效果图
图一：点击向上按钮时
图二：点击向下按钮时
文章出处：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。