시각적 상태에 대한 스토리보드 애니메이션(XAML)

Applies to Windows and Windows Phone

시각적 상태는 현재 상태에 대한 XAML 컨트롤 템플릿을 로드하여 컨트롤의 상태 변경에 따라 UI가 변경되도록 하는 기술입니다. 시각적 상태 모델에서는 XAML 컨트롤에서 사용하는 디자인 및 논리 구분을 유지 관리할 뿐만 아니라 사용자에게 현재 UI 상태 피드백을 제공합니다. 시각적 상태의 속성을 변경하려면 XAML에서 일련의 스토리보드 애니메이션을 정의합니다. 시각적 상태에 대한 애니메이션은 스토리보드 애니메이션과 동일한 XAML 구문을 사용합니다. 그러나 시각적 상태에 적합하도록 애니메이션을 정의하는 방법에 대한 몇 가지 모범 사례가 있습니다. 시각적 상태에 대한 애니메이션은 즉각적(제로 기간)이거나 매우 빨라 1초 미만 동안 지속되어야 합니다. 또한 해당 상태가 더 이상 적용되지 않으면 상태 관련 변경 사항이 원래 값으로 다시 변경되도록 시각적 상태에 사용되는 애니메이션 집합을 디자인해야 합니다.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

제로 기간 애니메이션

가능할 때마다 제로 기간 애니메이션을 사용하여 시각적 상태의 일부인 속성 변경을 적용합니다. 제로 기간 애니메이션은 독립 애니메이션이 되므로 UI 스레드 성능에 최소한의 영향을 줍니다. 따라서 컨트롤과 해당 컨트롤을 사용하는 앱의 응답성에 영향을 줍니다.

경우에 따라 시각적 상태 애니메이션은 변환 변형 애니메이션을 사용하며 이러한 경우는 제로 기간에 적합해 보이지 않습니다. 그러나 사용자가 이동하는 요소를 쉽게 조작할 수 없으므로 기간을 짧게(1초 미만) 유지해 보세요. 비제로 기간 애니메이션을 사용하면 제로 기간이 종속 애니메이션이 되지 않도록 할 수 없으므로 애니메이션 효과를 주려는 속성이 중요한 요소가 됩니다. 기간이 있는 VisualTransition을 사용하지만 대상 시각적 상태 애니메이션이 제로 기간이 되는 종류의 상태 디자인을 고려할 수도 있습니다.

종속 애니메이션의 의미와 종속으로 간주되는 애니메이션에 대한 자세한 내용은 스토리보드 애니메이션"종속 애니메이션과 독립 애니메이션" 섹션을 참조하세요.

원래 값을 복원하는 시각적 상태 만들기

시각적 상태의 경우 스토리보드 애니메이션의 명확한 FillBehavior가 UI 요소 속성에 직접 적용된 경우의 동작 방식과 다릅니다. 시각적 상태가 다른 상태로 변경되면 이전 시각적 상태에 의해 적용된 모든 속성 변경과 해당 애니메이션은 새로운 시각적 상태가 속성에 새 애니메이션을 특별히 적용하지 않는 경우에도 취소됩니다. 반대로 앱 UI 속성을 직접 대상으로 하는 스토리보드 애니메이션에는 HoldEnd 동작이 있습니다. 자세한 내용은 스토리보드 애니메이션을 참조하세요.

많은 시각적 상태 변경에 대해 비어 있는(애니메이션과 Storyboard 값이 없음) 새 시각적 상태를 정의하면 됩니다. 컨트롤 논리는 동일한 VisualStateGroup에서 다른 시각적 상태에 의해 적용된 애니메이션을 비활성화하기 위해 빈 시각적 상태를 호출할 수 있습니다. 예를 들어 많은 컨트롤 템플릿의 "CommonStates"VisualStateGroup에는 "Normal"이라는 상태가 있으며, 이 상태에는 Storyboard 값이 없습니다. 컨트롤 논리는 동일한 그룹에서 "PointerOver", "Disabled" 등의 다른 시각적 상태 애니메이션을 취소하기 위해 "Normal" 상태로 이동할 수 있습니다.

참고  컨트롤이 빈 시각적 상태로 이동할 경우 UI 정의 XAML에 값이 없거나 앱 코드에서 런타임에 이 값을 변경하지 않으면 컨트롤 속성에서 원래 템플릿 값이나 다른 기본값을 사용합니다. 더 정확히 말해서 속성 값에 대한 애니메이션을 사용하지 않으면 값이 종속성 속성 값 우선 순위에 따라 다시 평가됩니다. 이 개념에 대한 자세한 내용은 종속성 속성 개요를 참조하세요.

포인터 관련 사용자 조작에 대한 시각적 상태

시각적 상태를 정의하고 어떤 방식으로든 선택하거나 호출할 수 있는 대부분의 컨트롤에는 "CommonStates"라는 기본 시각적 그룹이 있습니다. 일반적으로 "CommonStates" 내에는 다음과 같은 명명된 상태가 표시됩니다.

  • "일반"
  • "PointerOver"
  • "Pressed"
  • "사용 안 함"

"Normal"은 컨트롤을 누르지 않고, 사용하지 않도록 설정되지 않으며 적중 횟수 테스트 영역 위에 포인터를 놓지 않은 경우의 상태입니다. 일반적으로 "PointerOver" 및 "Pressed"는 상대적으로 짧은 기간 동안 지속되고 사용자 작업에 연결되는 상태입니다.

"Disabled"는 IsEnabled 값이 false이거나 IsReadOnly와 같은 다른 속성이 컨트롤을 사용할 수 없음을 선언하는 경우에 사용됩니다. 일반적으로 이러한 속성은 앱 코드로 설정합니다. 앱 논리에서는 사용자가 일부 다른 컨트롤을 대신 사용해야 하지만 사용할 수 없는 컨트롤을 완전히 숨기지 않도록 선택하는 컨텍스트에 대해 컨트롤을 사용하지 않도록 설정할 수 있습니다.

대부분의 경우 시각적 상태로 작업을 하면 작업을 시작한 템플릿 복사본이나 기본 클래스로 사용하고 있는 컨트롤 클래스의 기본 템플릿에서 기존 디자인을 수정하는 것입니다. 이러한 기존 디자인 동작은 "CommonStates" 시각적 상태 중 사용자에게 표시되어야 하는 각 상태에 대한 지침으로 사용할 수 있습니다. 이러한 시각적 상태의 디자인에 대한 질문이 있거나 다른 기존 템플릿과 공통점이 거의 없는 템플릿을 작성 중이며 도움이 필요한 경우 시각적 피드백에 대한 지침사용자 조작에 응답을 참조하세요. 터치 및 마우스 입력 모두 포인터 이벤트를 생성합니다. 시각적 상태 수준에서 이러한 조작 모드는 일반적으로 차별화되지 않습니다.

시각적 포커스 표시

컨트롤이 제공해야 하는 상태 및 대화형 작업에서 보다 중요한 측면 중 하나는 컨트롤이 UI에 포커스를 두었을 때 사용자가 알리는 방법입니다. 포커스가 있는 컨트롤은 키보드 입력을 허용할 수 있는 유일한 컨트롤이므로 사용자가 UI의 텍스트 영역에 이 용도로 포커스가 있음을 알 수 있어야 합니다. 또한 접근성을 위해 키보드 입력을 텍스트 입력으로 사용하지 않는 컨트롤에 대해서도 포커스를 식별해야 합니다. 예를 들어 단추와 같은 컨트롤은 키보드 키(일반적으로 Space 또는 Enter 키)가 단추 터치 또는 클릭과 동일한 동작을 수행할 수 있도록 호출 모드를 지원해야 합니다. 올바르게 수행된 경우 사용자는 Tab 키 및 다른 키를 사용하여 터치 또는 마우스를 사용하지 않고도 UI를 조작할 수 있습니다. 이 항목이 중요한 이유에 대한 자세한 내용은 키보드 접근성 구현을 참조하세요.

일반적인 시각적 상태는 처음에는 표시되지 않는 Rectangle을 사용하여 포커스 표시기(Opacity="0") 역할을 합니다. Rectangle은 템플릿 루트의 직계 자식이며, 일반적으로 패널 클래스 중 하나입니다. Rectangle에서 좁은 Stroke를 사용하여 포커스가 있는 컨트롤의 콘텐츠 주위 여백 영역만 포함하도록 해야 합니다. 그렇지 않으면 포커스가 있는 컨트롤이 중요한 콘텐츠를 사용자로부터 숨길 수 있습니다. 일반적인 시각적 상태 디자인에서 이 컨트롤에 대한 상태는 "FocusStates"라는 VisualStateGroup의 일부이며 "Focused"와 "Unfocused"라는 두 가지 상태가 있습니다.

"FocusStates" VisualStateGroup에서는 별도의 빈 시각적 상태 "PointerFocused"를 정의해야 합니다. 포커스를 컨트롤로 보내는 포인터인 경우 포커스 표시기가 나타나지 않아야 합니다. 포커스 표시기는 탭 시퀀스를 사용하는 사용자나 앱 페이지가 처음 로드될 때의 초기 프로그래밍 포커스에 의해 제어된 대로 요소별 포커스를 표시하기 위한 것입니다.

추가 시각적 상태

  • CheckBox와 같은 컨트롤은 "CheckStates" VisualStateGroup을 정의합니다. 기본 템플릿에서 이 그룹의 명명된 상태는 "Checked", "Unchecked", "Indeterminate"입니다.
  • 끌어서 놓기 작업 시작을 지원하는 컨트롤에는 많은 상태가 포함된 "DragStates"라는 그룹이 있습니다. 예를 들어 GridViewItem 컨트롤 템플릿의 복사본을 편집하는 경우 XAML을 시작할 때 이러한 상태가 표시됩니다.
  • 항목 선택을 지원하는 컨트롤의 경우 해당 항목 유형에 대한 템플릿에 여러 가지 선택 관련 상태가 있습니다. 그룹 및 상태의 이름은 컨트롤마다 다릅니다. 이러한 이름은 템플릿의 복사본을 편집하는 경우 확인할 수 있습니다.
  • 앱용 Windows 8 세대 Microsoft Visual Studio 프로젝트 중 일부에서는 표시 영역 보기 상태에 대한 시각적 상태를 정의합니다. Windows 8.1 템플릿은 더 이상 이 작업을 수행하지 않습니다.

몇 가지 예제 XAML

다음은 "CommonStates"VisualStateGroup의 일반적인 시각적 상태 집합에 대한 몇 가지 예제 XAML입니다. 이 예제는 컨트롤 및 기타 UI 요소에 대한 Windows 런타임 기본 템플릿에서 직접 가져온 것입니다. 앱의 AppBar 단추 중 일부를 사용자 지정하려면 기본 템플릿 XAML 복사본을 편집할 수 있습니다. 기본 원칙을 확인하기 위해 전체 파일이나 모든 시각적 상태를 확인할 필요는 없기 때문에 여기에 표시된 대로 XAML을 전체 템플릿에서 약간 편집하고 ... 말줄임표로 표시했습니다.


<Style x:Key="BackButtonStyle" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid x:Name="RootGrid">
...
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="RootGrid"
                    Storyboard.TargetProperty="Visibility"
                  >
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

  • "Disabled" 상태는 Visibility 속성에 스토리보드 애니메이션을 적용하고 있습니다. Visibility 속성은 열거형을 사용하므로 애니메이션 효과를 주려면 DiscreteObjectKeyFrame을 사용하여 ValueVisibility 열거형의 특정 열거형 상수로 설정해야 합니다. 컴퍼지션 요소 또는 경우에 따라 전체 컨트롤의 Visibility에 변경 사항을 적용하는 것은 시각적 상태 정의에서 매우 일반적입니다.
  • "Normal" 상태가 어떻게 비어 있는지 확인합니다. 컨트롤 논리에서는 이 상태를 로드하여 "Disabled"라는 시각적 상태를 취소하고 Visibility를 템플릿 정의 값(기본값: Visible)으로 복원합니다.

시각적 상태 사용에 대한 컨트롤 논리

일반적인 컨트롤 논리에서는 다양한 입력 이벤트 및 상태 속성을 사용하여 런타임에 컨트롤에서 활성화되어야 하는 다양한 시각적 상태 그룹의 시각적 상태를 결정합니다.

  • 포인터 관련 시각적 상태(예: "PointerOver" 및 "Pressed")는 입력 이벤트(PointerEnteredPointerExited 이벤트)를 처리하여 변경할 수 있습니다. 일반적으로 컨트롤은 기본 제공 처리기인 OnPointerEnteredOnPointerExited를 재정의하여 이러한 이벤트를 처리합니다.
  • "Disabled"는 IsReadOnly와 같은 다른 컨트롤 관련 속성 변경을 위해 IsEnabledChanged 또는 처리기에서 호출할 수 있습니다.
  • 포커스 시각적 상태는 GotFocusLostFocus 이벤트를 처리하여 변경할 수 있습니다. 일반적으로 컨트롤은 기본 제공 처리기인 OnGotFocusOnLostFocus를 재정의하여 이러한 이벤트를 처리합니다. OnGotFocus의 경우 컨트롤 논리에서 FocusState를 확인하여 포커스 변경의 원인이 된 포인터인지를 확인하고, 그럴 경우 "Focused"가 아닌 "PointerFocused" 상태를 사용합니다.

VisualTransition

다양한 명명된 시각적 상태를 정의할 뿐만 아니라 VisualStateGroup에는 VisualTransition 요소 컬렉션도 있습니다. VisualTransition은 상태 변경이 발생할 때(GoToState가 호출될 때) 실행되는 애니메이션 동작을 정의합니다. 상태 변경과 관련된 이전 및 새 상태의 속성 값에 차이가 있는 경우 시각적 전환을 확인할 수 있으며, 이전/새 명명된 상태를 From 또는 To 값으로 참조하는 VisualTransition이 있습니다.

VisualTransition의 경우 시각적 전환의 목적이 시각적 상태가 변경될 때 시간에 따른 변경 사항을 표시하는 것이므로 일반적으로 제로 기간이 없습니다.

광범위하게는 시간 제한 스토리보드 애니메이션을 적용할 하나 이상의 속성을 정의하는 특정 Storyboard 를 정의하거나 GeneratedDuration 동작을 사용하는 두 가지 방식으로 VisualTransition을 정의할 수 있습니다.

Storyboard 에서는 제로 기간 애니메이션을 사용하지 않는다는 점을 제외하면 특정 Storyboard 에서는 기본적으로 이 항목과 스토리보드 애니메이션 항목에서 설명하는 기술을 사용합니다. 시각적 전환에서 애니메이션 효과를 주는 속성에는 전환과 관련된 시각적 상태 간에 변경되는 속성이 없습니다.

GeneratedDuration 동작에는 0이 아닌 GeneratedDuration 값만 있어야 합니다. 그러면 시각적 상태 시스템에서 이전 상태와 새 상태 간에 값이 변경되는 속성을 확인하고 변경된 값 사이에서 기간을 유지하는 보간된 애니메이션을 생성합니다. GeneratedDuration 동작은 애니메이션에서 보간할 수 있는 Double, Point 또는 Color 값에 대해서만 작동합니다.

VisualTransition에 대해 VisualTransition에서 전환해야 하는 시각적 상태를 정의합니다. From은 이전 상태를 참조하고 To는 새 상태를 참조합니다. From에 대한 값은 있지만 To 값이 없는 경우 또는 그 반대의 경우 설정 해제 값은 동일한 시각적 상태 그룹에도 있는 다른 모든 상태를 참조하는 것으로 해석됩니다. VisualTransitionFrom도 없고 To도 없으면 아무 작업도 수행되지 않습니다.

GeneratedEasingFunction에 대한 값을 설정하여 선형 보간의 기본값이 아닌 다른 보간 동작을 사용할 수 있습니다. 사용할 수 있는 감속/가속 함수 목록 및 각각이 나타내는 시간에 따른 함수 수학 공식은 키 프레임 애니메이션 및 감속/가속 함수 애니메이션을 참조하세요.

GeneratedDuration 동작을 사용할 때는 주의해야 합니다. 정의된 대로 제로 기간 애니메이션이 아니므로 변경되는 속성에서 실수로 종속 애니메이션을 만들어 컨트롤 또는 앱의 성능에 영향을 줄 수 있습니다.

VisualState 애니메이션은 상태가 시작될 때 언제든지 실행되며 컨트롤이 먼저 나타나는 경우에도 마찬가지입니다. VisualTransition 애니메이션은 그렇지 않습니다. 첫 번째 상태를 To로 지정하는 전환이 있는 경우에도 로드된 첫 번째 상태로 전환되지 않습니다.

템플릿 복사본 수정

Visual Studio 같은 도구는 Windows 런타임 기본 템플릿 XAML의 세그먼트 복사본에서 시작하여 앱과 프로젝트에서 사용하고 수정할 수 있는 다른 위치에 배치하여 컨트롤의 템플릿을 다시 만드는 간단한 방법을 제공합니다. 컨트롤에 대한 모든 시각적 상태는 주 Template 스타일 setter에서 템플릿 콘텐츠의 루트 요소 바로 아래에 있는 VisualStateManager.VisualStateGroups XAML 노드 내의 해당 템플릿에도 포함되어 있습니다. 템플릿 복사본으로 작업할 때마다 템플릿에서 시작해야 하는 모든 명명된 시각적 상태 및 시각적 상태 그룹을 재현해야 합니다. 이렇게 하지 못할 경우 컨트롤에서 UI 환경의 조작을 사용자에게 알리는 중요한 시각적 상태가 누락될 수 있습니다. 컨트롤 논리는 GoToState를 호출하여 사용자 지정 XAML 템플릿에 없는 예상 명령된 상태에 액세스하려고 하며 VisualStateManager 동작은 올바르게 로드된 마지막 시각적 상태에서 컨트롤이 유지되도록 하는 것입니다. 예를 들어 포인터가 종료될 때 일반적으로 호출되는 "Normal" 상태를 제공하지 않으면 포인터가 더 이상 컨트롤 위에 있지 않은 경우에도 컨트롤이 계속 "PointerOver" 상태에 있을 수 있습니다.

컨트롤 템플릿 수정에 대한 자세한 내용은 빠른 시작: 컨트롤 템플릿을 참조하세요.

서로 다른 그룹의 시각적 상태를 사용하여 동일한 속성에 애니메이션 효과를 적용하지 마세요.

대부분의 시각적 상태 모델에는 둘 이상의 시각적 상태 그룹이 있으며, 각 그룹은 해당 그룹 내에서 독점적인 일련의 조건에 대한 상태를 나타냅니다. 예를 들어 컨트롤에는 포인터 이벤트에 응답하는 그룹, 현재 키보드 포커스에 응답하는 집합 및 텍스트 입력에 대한 상태가 있을 수 있습니다. 이러한 컨트롤은 실제로 한번에 여러 가지 상태를 사용합니다. 시각적 상태 동작과 동일한 속성을 수정하는 상태가 서로 다른 그룹에 있는 경우 사용되는 값을 확인할 수 없습니다. 값이 마지막으로 입력한 상태에 종속되기 때문입니다. 다음 코드를 실행하지 마세요. 서로 다른 시각적 상태 그룹이 컨트롤의 시각적 상태에 영향을 주는 속성에 애니메이션 효과를 적용할 때 다른 요소를 사용하도록 하려면 컨트롤 템플릿에 밀접하게 관련된 요소를 삽입해야 할 수 있습니다.

시각적 상태에서 애니메이션 라이브러리 사용

Windows 런타임의 애니메이션 라이브러리에는 여러 가지 테마 애니메이션이 포함되어 있습니다. 테마 애니메이션은 미리 정의된 Windows 런타임 XAML UI 유형의 하나 이상의 속성에 대한 애니메이션입니다. 일부 Windows 런타임 XAML 컨트롤은 기본 시각적 상태 내에 테마 애니메이션을 포함합니다. 이러한 애니메이션은 다음 두 위치에서 찾을 수 있습니다.

  • 컨트롤의 여러 가지 시각적 상태에 대한 VisualState.Storyboard에 있는 애니메이션 중 하나. 이 위치에서 테마 애니메이션은 해당 시각적 상태가 사용될 때(컨트롤 논리에서 해당 상태를 참조하는 GoToState를 호출할 때) 실행됩니다.
  • VisualStateGroup.TransitionsVisualTransition.Storyboard에 있는 애니메이션 중 하나. 이 위치에서 테마 애니메이션은 시각적 상태 관리자가 두 개의 명명된 관련 상태 사이에서 전환을 수행할 때 실행됩니다.

Microsoft Visual Studio에서 템플릿 편집/복사본 편집을 통해 가져온 기본 컨트롤 템플릿의 XAML 복사본에서 시작하는 일반적인 기술을 사용하는 경우 테마 애니메이션이 시작 복사본에 표시될 수 있습니다. 일반적으로 테마 애니메이션은 컨트롤의 템플릿에서 제거하면 안 됩니다. 테마 애니메이션은 해당 특정 XAML 컨트롤에 모양과 느낌을 제공하기 위해서 뿐만 아니라 Windows 사용자 환경을 전체적으로 강화하기 위해 반드시 템플릿에 있어야 합니다.

테마 애니메이션을 사용하려면 템플릿 내 특정 부분에서 해당 애니메이션을 대상으로 해야 합니다. 이렇게 하려면 템플릿의 다른 위치에 정의된 템플릿 부분(시작 템플릿을 정의하는 부분) 중 하나의 x:Name인 문자열을 사용하여 테마 애니메이션의 TargetName 특성을 설정합니다. 테마 애니메이션은 기본적으로 특정 속성을 대상으로 하며 경우에 따라 백그라운드 작업 방식으로 둘 이상의 관련 속성을 대상으로 합니다. 테마 애니메이션의 대상이 되는 속성이 바로 표시되지 않기 때문에 애니메이션할 대상 및 속성이 정렬되도록 TargetName을 통해 대상으로 지정하는 부분도 명확하게 표시되지 않습니다.

중요  테마 애니메이션의 대상을 지정할 때 Storyboard.TargetName 또는 Storyboard.TargetProperty를 사용하지 마세요. 대상 지정 모델이 연결되지 않은 TargetName 특성 및 테마 애니메이션의 고유한 속성 대상 지정 특성과 충돌합니다.

컨트롤의 기본 템플릿 또는 스타일에서 특정 테마 애니메이션을 사용하는 경우 이 애니메이션은 특정 라이브러리 애니메이션 사용 방법 및 시기에 대해 설명하는 "... 애니메이션" 항목에 나열됩니다. 예를 들어 포인터 동작 애니메이션을 보는 경우 "기본 Windows 런타임 컨트롤 동작의 포인터 애니메이션" 섹션이 표시되며, 이 섹션에서는 ListViewItemGridViewItem이 기본 템플릿의 시각적 상태 중 하나에 PointerDownThemeAnimation을 포함하고 있다고 설명합니다. 또한 컨트롤에 대한 스타일 및 템플릿 문서에서도 이 내용을 확인할 수 있습니다. 예를 들어 ListViewItem 스타일 및 템플릿에서는 전체 XAML을 보여 주는 "기본 스타일" 섹션에서 PointerDownThemeAnimation의 위치를 정확하게 보여줍니다.

일반적으로 테마 애니메이션은 제로 기간 애니메이션이 아니지만 기간이 짧아 일반적으로 2초 미만입니다. 따라서 종속 애니메이션을 만들지 않는 속성을 대상으로 하도록 신중하게 생성해야 합니다.

대부분의 테마 애니메이션에는 TargetName 이외의 다른 속성과 Timeline에서 상속되는 속성이 없습니다. 그러나 일부 테마 애니메이션에는 추가 속성이 있습니다. 예를 들어 PopInThemeAnimation에는 애니메이션이 시작되는 위치를 수정하는 FromHorizontalOffset 속성이 있습니다. 이러한 속성은 일관된 Windows 사용자 환경을 제공하는 기본값을 사용하므로 신중하게 수정해야 하며 동작을 크게 변경하면 테마 애니메이션 전체를 제거하는 것만큼 문제가 될 수 있습니다.

앞에서 설명한 대로 일부 컨트롤에는 시각적 상태나 시각적 전환에서 기본적으로 제공되는 테마 애니메이션이 있습니다. 그러나 경우에 따라서는 컨트롤 템플릿을 완전히 바꾸지 않고도 컨트롤이 시각적 상태나 스타일에 사용하는 라이브러리 애니메이션의 속성에 스타일을 지정할 수 있습니다. 이렇게 하려면 이러한 컨트롤에서 TemplateSettings 속성 값을 변경합니다. 다음은 템플릿 외부에서 테마 애니메이션을 수정할 수 있는 컨트롤 목록이며, 이 목록을 지원하는 속성을 참조합니다.

애니메이션 라이브러리에는 테마 전환이라는 다른 유형의 애니메이션이 있습니다. 이러한 애니메이션은 특정 컨트롤의 *Transitions 속성에 사용되거나 UIElement.Transitions 속성에 사용될 수도 있습니다. 해당 속성은 시각적 상태 내에 없지만, 일반적으로 Control 또는 TextBlock과 같은 다른 UI 요소에 대한 기본(암시적 키) Style에서 *Transitions 속성을 설정하므로 테마 전환은 일반적으로 컨트롤 스타일 지정과 관련이 있습니다. 앞에 나열된 일부 TemplateSettings는 테마 전환에 영향을 줍니다. 테마 전환을 사용하는 방법에 대한 자세한 내용은 UI 애니메이션 또는 빠른 시작: 라이브러리 애니메이션을 사용하여 UI 애니메이션을 참조하세요.

컨트롤 템플릿이 아닌 다른 시나리오에 대한 시각적 상태

현재 UI 상태 정의에 도움이 되는 시각적 상태 사용은 컨트롤 템플릿 만들기 시나리오로 제한되지 않습니다. 검색 가능한 상태 중에만 적용되어야 하는 일련의 속성 변경을 적용할 시각적 상태를 언제든지 사용할 수 있습니다. 예를 들어 앱 또는 창 상태를 검색하고 응답으로 레이아웃 속성을 변경하려면 앱의 페이지에 대한 시각적 상태를 사용할 수 있습니다. 템플릿 시나리오가 아닌 다른 시나리오에 대한 시각적 상태에는 상태 변경을 확인하고 해당 상태를 사용하는 UI 요소에서 올바른 시각적 상태를 호출하는 몇 가지 코드가 필요합니다. 여기에는 Window의 이벤트, 디스플레이 방향 변경 또는 해상도 변경을 감지하는 시스템 장치 이벤트 또는 Application의 활성화 처리기와 같은 앱 모델의 일부인 이벤트 처리가 포함될 수 있습니다. 이러한 개념 중 일부는 응용 프로그램 모델 및 앱이 보기 상태를 추적할 수 있는 방식과 겹칩니다. 자세한 내용은 빠른 시작: 다양한 창 크기에 맞는 앱 디자인을 참조하세요.

관련 항목

사용자 조작에 응답
스토리보드 애니메이션
C#, C++ 또는 VB를 사용하는 앱 개발 로드맵
종속성 속성 개요
키 프레임 애니메이션 및 감속/가속 함수 애니메이션
빠른 시작: 컨트롤 템플릿
VisualStateManager
VisualState
VisualTransition
Storyboard
Storyboard.TargetProperty

 

 

표시:
© 2014 Microsoft