VisualTransition 클래스

정의

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

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
class VisualTransition : DependencyObject
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
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
특성

Windows 요구 사항

디바이스 패밀리
Windows 10 (10.0.10240.0에서 도입되었습니다.)
API contract
Windows.Foundation.UniversalApiContract (v1.0에서 도입되었습니다.)

예제

이 예제에서는 사용자가 컨트롤에서 마우스를 이동하면 컨트롤의 테두리가 파란색으로 변경된 다음 노란색으로 변경된 다음 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>

설명

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

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

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

  1. 이전 상태를 From으로, 새 상태를 To로 참조하는 VisualTransition이 있는 경우 해당 전환을 사용합니다.
  2. 그렇지 않으면 새 상태를 To 로 구체적으로 참조하지만 From을 지정하지 않는 VisualTransition이 있는 경우 해당 전환을 사용합니다.
  3. 마지막으로 이전 상태를 From 으로 구체적으로 참조하지만 To를 지정하지 않는 VisualTransition이 있는 경우 해당 전환을 사용합니다. 위 중 어느 것도 적용되지 않으면 전환이 실행되지 않습니다.

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

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

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

암시적 전환

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

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

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

전환 애니메이션

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

이전 버전에 대한 참고 사항

Windows 8.x

Windows 8 경우 XAML 테마 전환 및 애니메이션 라이브러리의 다양한 자동 애니메이션 동작은 사용자가 "불필요한 애니메이션"을 끌 수 있는 특정 Microsoft Windows 접근성 설정을 적용하지 않았습니다.

Windows 8.1, 테마 전환, 테마 애니메이션 및 시각적 전환부터 모든 불필요한 애니메이션 해제(가능한 경우)접근성 설정이 적용됩니다. 애니메이션이 실행되지 않으며 컨트롤 상태가 변경되거나 시각적 변경이 즉시 적용됩니다.

앱 코드를 Windows 8 Windows 8.1 마이그레이션하는 경우 불필요한 모든 애니메이션 끄기(가능한 경우) 설정을 사용하도록 설정하여 애니메이션 동작을 테스트할 수 있습니다. 이러한 애니메이션 중 일부는 스토리보드에서 제어되며, 시각적 전환 또는 테마 애니메이션이 완료된 후 시작되도록 사용자 지정 애니메이션을 연결하기 때문에 불필요한 모든 애니메이션 끄기(가능한 경우) 설정은 애니메이션의 타이밍에 영향을 줄 수 있습니다. 또한 스토리보드 애니메이션이 아닌 시각적 상태에서 VisualTransition으로 구현한 경우 불필요한 모든 애니메이션 끄기(가능한 경우) 설정이 비활성화되지 않도록 실제 사용자 지정 애니메이션으로 전환할 수 있습니다.

Windows 8 위해 컴파일되었지만 Windows 8.1 실행되는 앱은 테마 애니메이션 및 시각적 전환에 Windows 8 동작을 계속 사용합니다. 그러나 앱이 다시 컴파일되지 않더라도 테마 전환은 Windows 8.1 설정에 의해 비활성화됩니다.

생성자

VisualTransition()

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

속성

Dispatcher

이 개체가 연결된 CoreDispatcher 를 가져옵니다. CoreDispatcher는 코드가 비 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)

적용 대상

추가 정보