VisualTransition 类

定义

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualTransition : DependencyObject

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class VisualTransition : DependencyObject

Public Class VisualTransition
Inherits DependencyObject

<VisualStateGroup>
  <!--one or more Visual State elements in the implicit States collection property -->
  <VisualStateGroup.Transitions>
    <VisualTransition>
      singleStoryboard
    </VisualTransition>
    <!--more transitions as above-->
  </VisualStateGroup.Transitions>
</VisualStateGroup>

继承

Object IInspectable DependencyObject VisualTransition

属性

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

示例

本示例创建一个 VisualTransition，它指定当用户将鼠标移离控件时，控件的边框在 1.5 秒内变为蓝色、黄色、黑色。

<!--Take one and a half seconds to transition from the
    PointerOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="PointerOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
                             KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
                             KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
                             KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that can be used when the control
      transitions between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to transition to the
        Pressed state.-->
    <VisualTransition To="Pressed" 
                          GeneratedDuration="0:0:0.01" />
    
    <!--Take one half second to transition to the PointerOver state.-->
    <VisualTransition To="PointerOver" 
                          GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the PointerOver state.-->
    <VisualTransition From="Pressed" To="PointerOver" 
                          GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        PointerOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="PointerOver" To="Normal" 
                          GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>

            <LinearColorKeyFrame Value="Blue" 
                               KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
                               KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
                               KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard >
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

注解

是 VisualTransition 启动 情节提要的行为。 此情节提要是一个时间线，用于声明在两个视觉状态之间转换的动画将运行的持续时间。 对于开始状态 (开始状态) 和结束状态 (由控件的视觉状态集定义的到状态) 的每种组合，可以以不同的方式定义转换。 转换由 VisualStateGroup 的 Transitions 属性定义，通常在 XAML 中定义。 大多数默认控件模板不定义转换，在这种情况下，状态之间的转换会瞬间发生。 将删除旧状态对模板的修改，并应用新状态的修改。

引用 VisualTransition 一个或两个命名的视觉状态。 From 值引用当前状态的状态的名称。 To 值引用状态的名称，该状态是 GoToState 调用请求的新状态。 这些名称来自一个 x：Name 属性字符串值，该值作为同一 VisualStateGroup 中 VisualState 定义的一部分应用于该属性。 From 或 To 是有效 VisualTransition 的必需值，缺少这些值或使用与现有状态不匹配的值的 VisualTransition 不执行任何操作。

VisualTransition可以仅引用 From 状态、To 状态或同时引用 From 和 To 状态。 省略 From 或 To 等同于任何状态。 VisualStateManager 使用优先逻辑，每当视觉状态更改时，将应用转换：

1. VisualTransition如果存在专门引用旧状态为 From，将新状态引用为 To 的 ，请使用该转换。
2. 否则，如果 VisualTransition 存在专门引用新状态为 “To ”但未指定 From 的 ，请使用该转换。
3. 最后，如果 VisualTransition 存在专门引用旧状态为 From 但未指定 To 的 ，请使用该转换。

如果上述任一项均不适用，则不会运行转换。

调用 GoToState 更改控件的可视状态时， VisualStateManager 将执行以下操作：

• 如果控件在新请求的视觉状态之前使用的 VisualState 具有 Storyboard，该情节提要将停止。
• 在这些操作之间，如果存在涉及两种VisualTransition视觉状态的转换，并且 GoToState 请求的命名视觉状态有效且为新状态，则运行 情节提要。
• 如果命名为 的 stateNameVisualState 具有 Storyboard，则情节提要开始。

可以 VisualTransition 具有 Storyboard 值和/或 GeneratedDuration 值。 但是， VisualTransition 如果 既没有 Storyboard 值，也没有 GeneratedDuration 值，则 VisualTransition 就动画而言，即使 由 From 和 To 值命名的状态在状态更改中也是如此。

隐式转换

可以定义 ， VisualTransition 使其具有 GeneratedDuration，但没有任何特定的依赖属性被设定为目标并对其进行动画处理。 这会创建隐式转换。 在 “从 ”或“ 到 ”视觉状态中专门针对动画的任何依赖属性，因此在状态更改中具有不同的值，则使用生成的过渡动画。 此生成的动画使用内插在此类属性的 From 状态值和 To 状态值之间转换。 隐式过渡动画的持续时间为 GeneratedDuration 所声明的时间。

隐式转换仅适用于 Double、 Color 或 Point 值的属性。 换句话说， 属性必须能够使用 DoubleAnimation、 PointAnimation 或 ColorAnimation 隐式进行动画处理。 如果要在某个其他值（例如需要 ObjectAnimationUsingKeyFrames 的值）上创建过渡动画，请将该动画放在 情节提要 中，并为动画指定希望其运行的 Duration 。

默认情况下，隐式过渡动画使用线性内插通过 GeneratedDuration 对值进行动画处理。 可以通过在 上VisualTransition设置 GeneratedEasingFunction 以及 GeneratedDuration ，将线性内插更改为所选的内插行为。

过渡动画

还有另一种设计模式和 API，用于显示使用 C++ 或 C# 的应用的视觉转换。 此概念称为 过渡动画 ，实现该行为的类是 主题过渡 或 主题动画。 过渡动画表示完整的 UI 元素与整个应用和 UI 之间的关系更改，而不是像在视觉状态中那样声明同一控件的视觉状态之间的转换和对控件部件的属性应用更改。 例如，只要 UI 元素在其布局容器的 UI 坐标空间中移动，就可以应用 RepositionThemeTransition 。 许多过渡动画是由用户操作启动的。 过渡动画适用于 UIElement 和特定派生类的各种 Transition 属性，不适用于 VisualStateGroup。 过渡动画和主题动画通常内置于控件的默认行为中。

构造函数

属性

方法

适用于

另请参阅

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• 控件模板
• 情节提要动画