VisualTransition 클래스

참조

정의

네임스페이스:: Microsoft.UI.Xaml

중요

일부 정보는 릴리스되기 전에 상당 부분 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적이거나 묵시적인 보증도 하지 않습니다.

편집

컨트롤이 한 시각적 상태에서 다른 시각적 상태로 전환할 때 발생하는 시각적 동작을 나타냅니다.

/// [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

예제

이 예제에서는 사용자가 컨트롤에서 마우스를 이동할 때 컨트롤의 테두리가 파란색으로 변경된 다음 노란색으로 변경된 다음 1.5초 안에 검은색으로 변경되도록 지정하는 VisualTransition을 만듭니다.

<!--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>

설명

는 VisualTransitionStoryboard를 시작하는 동작입니다. 이 Storyboard는 두 시각적 상태 간에 전환되는 애니메이션이 실행되는 기간을 선언하는 타임라인. 전환은 컨트롤의 시각적 상태 집합에 정의된 대로 시작 상태( From 상태) 및 종료 상태( To 상태)의 각 조합에 대해 다르게 정의할 수 있습니다. 전환은 VisualStateGroup의 Transitions 속성에 의해 정의되며 일반적으로 XAML에 정의됩니다. 대부분의 기본 컨트롤 템플릿은 전환을 정의하지 않으며, 이 경우 상태 간 전환이 즉시 발생합니다. 템플릿에 대한 이전 상태의 수정 사항이 제거되고 새 상태의 수정 사항이 적용됩니다.

는 VisualTransition 하나 또는 두 개의 명명된 시각적 상태를 참조합니다. From 값은 현재 상태인 상태의 이름을 참조합니다. To 값은 GoToState 호출에서 요청한 새 상태인 상태의 이름을 참조합니다. 이러한 이름은 동일한 VisualStateGroup에서 정의의 일부로 VisualState에 적용되는 x:Name 특성 문자열 값에서 가져옵니다. From 또는 To는 유효 VisualTransition에 필요한 값으로, 이러한 값이 없거나 기존 상태와 일치하지 않는 값을 사용하는 VisualTransition은 아무 작업도 수행하지 않습니다.

은 VisualTransitionFrom 상태, To 상태 또는 From 및 To 상태 모두를 참조할 수 있습니다. From 또는 To를 생략하는 것은 모든 상태와 동일합니다. VisualStateManager는 시각적 상태가 변경될 때마다 전환이 적용되는 우선 순위 논리를 사용합니다.

이전 상태를 From으로, 새 상태를 To로 참조하는 가 있는 경우 해당 전환을 사용합니다.VisualTransition
그렇지 않으면 새 상태를 To로 참조하지만 From을 지정하지 않는 가 있는 경우 VisualTransition 해당 전환을 사용합니다.
마지막으로 이전 상태를 From으로 참조하지만 To를 지정하지 않는 가 있는 경우 VisualTransition 해당 전환을 사용합니다.

위의 항목이 적용되지 않으면 전환이 실행되지 않습니다.

GoToState를 호출하여 컨트롤의 시각적 상태를 변경하는 경우 VisualStateManager는 다음 작업을 수행합니다.

새로 요청된 시각적 상태 이전에 컨트롤이 사용하던 VisualState 에 Storyboard가 있으면 해당 스토리보드가 중지됩니다.
이러한 작업 사이에 두 시각적 상태가 포함된 전환이 있고 GoToState에서 요청한 명명된 시각적 상태가 유효하고 새 상태인 경우 실행의 StoryboardVisualTransition 가 실행됩니다.
로 명명된 VisualState 에 stateNameStoryboard가 있으면 스토리보드가 시작됩니다.

에는 VisualTransitionStoryboard 값, GeneratedDuration 값 또는 둘 다 있을 수 있습니다. 그러나 에 VisualTransition 값이나 GeneratedDuration 값이 VisualTransition 없는 Storyboard 경우 From 및 To 값으로 명명된 상태가 상태 변경과 관련되어 있더라도 애니메이션 측면에서 아무 작업도 수행하지 않습니다.

암시적 전환

GeneratedDuration이 있지만 대상으로 지정되고 애니메이션 효과를 주는 특정 종속성 속성이 없으므로 을 정의 VisualTransition 할 수 있습니다. 이렇게 하면 암시적 전환이 만들어집니다. From 또는 To 시각적 상태의 애니메이션을 대상으로 하는 종속성 속성은 상태 변경에 따라 값이 다르므로 생성된 전환 애니메이션을 사용합니다. 이 생성된 애니메이션은 보간을 사용하여 이러한 속성의 From 상태 값과 To 상태 값 간에 전환됩니다. 암시적 전환 애니메이션은 GeneratedDuration에 명시된 시간 동안 지속됩니다.

암시적 전환은 Double, Color 또는 Point 값인 속성에만 적용됩니다. 즉, 속성은 DoubleAnimation, PointAnimation 또는 ColorAnimation을 사용하여 암시적으로 애니메이션 효과를 적용할 수 있어야 합니다. ObjectAnimationUsingKeyFrames가 필요한 값과 같은 다른 값에 전환 애니메이션을 만들려면 해당 애니메이션을 Storyboard에 넣고 애니메이션에 실행하려는 기간을 지정합니다.

기본적으로 암시적 전환 애니메이션은 선형 보간을 사용하여 GeneratedDuration을 통해 값에 애니메이션 효과를 낸다. 및 에서 GeneratedEasingFunction을 설정하여 선형 보간을 선택한 보간 동작으로 GeneratedDurationVisualTransition변경할 수 있습니다.

전환 애니메이션

C++ 또는 C#을 사용하여 앱에 대한 시각적 전환을 표시하기 위한 또 다른 디자인 패턴 및 API가 있습니다. 이 개념을 전환 애니메이션 이라고 하며 동작을 구현하는 클래스는 테마 전환 또는 테마 애니메이션입니다. 동일한 컨트롤의 시각적 상태 간 전환을 선언하고 시각적 상태와 마찬가지로 컨트롤 파트의 속성에 변경 내용을 적용하는 대신, 전환 애니메이션은 전체 UI 요소와 전체 앱 및 UI 간의 관계 변경을 나타냅니다. 예를 들어 레이아웃 컨테이너의 UI 좌표 공간에서 UI 요소를 이동할 때마다 적용할 수 있는 RepositionThemeTransition 이 있습니다. 대부분의 전환 애니메이션은 사용자 작업에 의해 시작됩니다. 전환 애니메이션은 VisualStateGroup이 아닌 UIElement 및 특정 파생 클래스의 다양한 전환 속성에 적용됩니다. 전환 애니메이션 및 테마 애니메이션은 컨트롤의 기본 동작에 기본 제공되는 경우가 많습니다.

생성자

VisualTransition()

VisualTransition 클래스의 새 instance 초기화합니다.

속성

Dispatcher	항상 Windows 앱 SDK 앱에서 를 반환 `null` 합니다. 대신 DispatcherQueue 를 사용합니다. (다음에서 상속됨 DependencyObject)
DispatcherQueue	`DispatcherQueue` 이 개체가 연결된 을 가져옵니다. 는 `DispatcherQueue` 코드가 비 UI 스레드에 의해 시작되는 경우에도 UI 스레드에서 에 액세스할 `DependencyObject` 수 있는 기능을 나타냅니다. (다음에서 상속됨 DependencyObject)
From	전환할 VisualState 의 이름을 가져오거나 설정합니다.
GeneratedDuration	한 상태에서 다른 상태로 이동하는 데 걸리는 시간과 암시적 전환 애니메이션이 전환 동작의 일부로 실행되어야 하는 시간을 가져오거나 설정합니다.
GeneratedEasingFunction	생성된 애니메이션에 적용되는 감속/가속 함수를 가져오거나 설정합니다.
Storyboard	전환이 발생할 때 실행되는 Storyboard 를 가져오거나 설정합니다.
To	전환할 VisualState 의 이름을 가져오거나 설정합니다.

메서드

ClearValue(DependencyProperty)	종속성 속성의 로컬 값을 지웁니다. (다음에서 상속됨 DependencyObject)
GetAnimationBaseValue(DependencyProperty)	애니메이션이 활성화되지 않은 경우 적용되는 종속성 속성에 대해 설정된 모든 기본 값을 반환합니다. (다음에서 상속됨 DependencyObject)
GetValue(DependencyProperty)	DependencyObject에서 종속성 속성의 현재 유효 값을 반환합니다. (다음에서 상속됨 DependencyObject)
ReadLocalValue(DependencyProperty)	로컬 값이 설정된 경우 종속성 속성의 로컬 값을 반환합니다. (다음에서 상속됨 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	이 DependencyObject instance 특정 DependencyProperty의 변경 내용을 수신 대기하기 위한 알림 함수를 등록합니다. (다음에서 상속됨 DependencyObject)
SetValue(DependencyProperty, Object)	DependencyObject에서 종속성 속성의 로컬 값을 설정합니다. (다음에서 상속됨 DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	RegisterPropertyChangedCallback을 호출하여 이전에 등록된 변경 알림을 취소합니다. (다음에서 상속됨 DependencyObject)

적용 대상

VisualTransition 클래스

정의

예제

설명

암시적 전환

전환 애니메이션

생성자

속성

메서드

적용 대상

추가 정보

피드백

피드백

추가 리소스