有关TransitioningContentControl组件的研究——Silverlight学习笔记[28]

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
文章出处：Kinglee’s Blog ( http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

转载于:https://www.cnblogs.com/Kinglee/archive/2009/09/14/1566627.html