VisualStateManager 클래스
정의
중요
일부 정보는 릴리스되기 전에 상당 부분 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적이거나 묵시적인 보증도 하지 않습니다.
시각적 상태 및 컨트롤에 대한 시각적 상태 간의 전환 논리를 관리합니다. 또한 컨트롤 템플릿에 대한 XAML에서 시각적 상태를 정의하는 방법인 VisualStateManager.VisualStateGroups에 대한 연결된 속성 지원을 제공합니다.
/// [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)]
class VisualStateManager : 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)]
public class VisualStateManager : DependencyObjectPublic Class VisualStateManager
Inherits DependencyObject- 상속
- 특성
Windows 요구 사항
| 디바이스 패밀리 |
Windows 10 (10.0.10240.0에서 도입되었습니다.)
|
| API contract |
Windows.Foundation.UniversalApiContract (v1.0에서 도입되었습니다.)
|
예제
이 예제에서는 VisualStateManager.VisualStateGroups XAML 연결 속성을 사용하는 방법을 보여 줍니다. 그렇지 않으면 "VisualStateManager" 태그가 정의되지 않은 방법을 확인합니다. 개념적으로 VisualStateManager.VisualStateGroups는 컨트롤 템플릿에서 템플릿 루트의 직접 자식 태그로 컨트롤에 대한 시각적 상태를 포함합니다.
시각적 상태의 특정 집합에는 "PointerOver" 및 "Normal" VisualState 개체를 정의하는 "CommonStates"라는 하나의 VisualStateGroup이 포함되어 있습니다. 사용자가 단추 위에 포인터를 놓으면 그리드 가 .5초 만에 녹색에서 빨간색으로 변경됩니다. 사용자가 단추에서 포인터를 이동하면 그리드 가 즉시 녹색으로 다시 변경합니다.
<ControlTemplate TargetType="Button">
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one half second to transition to the PointerOver state.-->
<VisualTransition To="PointerOver"
GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<!--Change the SolidColorBrush, ButtonBrush, to red when the
Pointer is over the button.-->
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBrush"
Storyboard.TargetProperty="Color" To="Red" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
</Grid.Background>
</Grid>
</ControlTemplate>
<common:LayoutAwarePage>
<Grid>
...
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's window size -->
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Below768Layout">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>20,20,20,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
Storyboard.TargetName="FooterPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</common:LayoutAwarePage>
다음 코드 조각은 XAML과 함께 이동하는 코드로, 앱이 앱 창 너비를 감지하고 해당 정보를 사용하여 적절한 시각적 상태를 호출하는 방법을 보여 줍니다.
String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind
설명
VisualStateManager는 컨트롤 작성자와 컨트롤에 사용자 지정 템플릿을 적용하는 앱 개발자를 위한 두 가지 중요한 기능을 지원합니다.
- 컨트롤 작성자 또는 앱 개발자는 VisualStateManager.VisualStateGroups 연결된 속성을 사용하여 XAML에서 컨트롤 템플릿 정의의 루트 요소에 VisualStateGroup 개체 요소를 추가합니다. VisualStateGroup 요소 내에서 각 VisualState 는 컨트롤의 개별 시각적 상태를 나타냅니다. 각 VisualState에는 사용자가 변경하거나 제어 논리에 의해 변경될 수 있는 UI 상태를 나타내는 이름이 있습니다. VisualState는 주로 Storyboard로 구성됩니다. 이 Storyboard는 컨트롤이 해당 시각적 상태에 있을 때마다 적용해야 하는 개별 종속성 속성 값 변경을 대상으로 합니다. 예제 코드를 포함하여 XAML에서 시각적 상태를 작성하는 방법에 대한 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.
- 컨트롤 작성자 또는 앱 개발자는 VisualStateManager의 정적 GoToState 메서드를 호출하여 이러한 상태 간에 전환합니다. 컨트롤 작성자는 컨트롤 논리가 상태 변경을 나타내는 이벤트를 처리하거나 제어 논리가 자체적인 상태 변경을 시작할 때마다 이 작업을 수행합니다. 컨트롤 정의 코드는 앱 코드가 아닌 이 작업을 수행하는 것이 일반적이므로 가능한 모든 시각적 상태와 해당 전환 및 트리거 조건이 앱 코드에 대해 기본적으로 존재하며 논리는 컨트롤에 의해 캡슐화됩니다.
대부분의 개발자는 위에서 설명한 대로 VisualStateManager API인 VisualStateManager.VisualStateGroups 및 GoToState 중 두 가지만 사용합니다. 나머지 API는 모두 확장 지원 및 사용자 지정 VisualStateManager 만들기를 위한 것입니다. 자세한 내용은 이 항목의 "Custom VisualStateManager" 섹션을 참조하세요.
Microsoft Visual Studio의 XAML 디자인 화면에서 사용하도록 설정된 스타일의 복사본을 편집할 때 기본 템플릿의 시각적 상태는 편집 중인 XAML에 정의됩니다. 컨트롤 논리는 이러한 시각적 상태가 템플릿에 존재할 것으로 예상하므로 이러한 상태를 삭제하거나 이름을 변경하지 않도록 합니다.
시각적 상태 외에도 시각적 상태 모델에는 전환도 포함됩니다. 전환은 상태가 변경될 때 각 시각적 상태 간에 발생하는 Storyboard 에 의해 제어되는 애니메이션 작업입니다. 컨트롤의 시각적 상태 집합에 정의된 대로 시작 상태와 종료 상태의 각 조합에 대해 전환이 다르게 정의될 수 있습니다. 전환은 속성 요소 구문을 사용하여 XAML에서 VisualStateGroup의 Transitions 속성에 의해 정의됩니다. 대부분의 기본 컨트롤 템플릿은 전환을 정의하지 않습니다. 구체적으로 정의된 전환이 없는 경우 상태 간의 전환은 즉시 발생합니다(0 기간). 자세한 내용은 VisualTransition을 참조하세요.
사용자 지정 VisualStateManager
상태 간 전환(고급 시나리오)에 대해 고유한 논리를 구현하려는 경우 VisualStateManager에서 상속하는 클래스를 만들 수 있습니다. 다음 지침을 따릅니다.
- 파생 클래스는 보호된 GoToStateCore 메서드를 재정의해야 합니다. 사용자 지정 VisualStateManager의 모든 instance GoToState 메서드가 호출될 때 이 Core 논리를 사용합니다.
- 사용자 지정 VisualStateManager 클래스를 참조하려면 템플릿의 시각적 상태를 정의하는 VisualStateManager.VisualStateGroups 연결된 속성 사용과 함께 사용자 지정 VisualStateManager 클래스 동작을 사용하려는 ControlTemplate 의 루트 요소에서 VisualStateManager.CustomVisualStateManager 연결된 속성의 값을 설정합니다. 일반적으로 Application.Resources에서 기본 XAML 생성을 통해 사용자 지정 VisualStateManager 클래스의 instance 만듭니다. 그런 다음, 사용자 지정 VisualStateManager 리소스의 키에 대한 {StaticResource} 태그 확장 참조를 사용하여 VisualStateManager.CustomVisualStateManager 연결된 속성이 설정됩니다.
이는 사용자 지정 VisualStateManager를 만들고 사용하기 위한 기본 요구 사항입니다. 또한 다음과 같은 몇 가지 동작을 재정의하도록 선택할 수 있습니다.
- RaiseCurrentStateChanged를 재정의하여 VisualStateManager에서 관리하는 VisualStateGroup에 의해 CurrentStateChanged 이벤트가 발생하는 시기를 제어합니다.
- RaiseCurrentStateChanging을 재정의하여 VisualStateManager에서 관리하는 VisualStateGroup에 의해 CurrentStateChanging 이벤트가 발생하는 시기를 제어합니다.
- 사용자 지정 클래스에 초기화할 추가 정보가 필요한 경우 생성자를 재정의하거나 오버로드합니다.
다른 모든 API(CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager)는 연결된 속성 지원을 위한 인프라이며 이를 호출하거나 아무 작업도 수행할 필요가 없습니다.
컨트롤이 아닌 요소에 대한 시각적 상태
시각적 상태는 컨트롤 하위 클래스 가 아닌 일부 UI 영역의 상태를 변경하려는 시나리오에 유용할 수 있습니다. GoToState 메서드의 컨트롤 매개 변수에는 VisualStateManager가 작동하는 개체를 참조하는 Control 하위 클래스가 필요하기 때문에 이 작업을 직접 수행할 수 없습니다. Page 는 Control 하위 클래스이며 Page가 없거나 Window.Content 루트가 Control 하위 클래스가 아닌 컨텍스트에서 UI를 표시하는 경우는 매우 드뭅니다. 사용자 지정 UserControl 을 Window.Content 루트로 정의하거나 상태를 적용하려는 다른 콘텐츠의 컨테이너(예: 패널)로 정의하는 것이 좋습니다. 그런 다음 UserControl에서 GoToState를 호출하고 나머지 콘텐츠가 Control인지 여부에 관계없이 상태를 적용할 수 있습니다. 예를 들어 UserControl 내에 배치하고 부모 UserControl의 속성 또는 템플릿의 명명된 SwapChainPanel 부분에 적용되는 명명된 상태를 선언한 한, 그렇지 않으면 SwapChainPanel로 구성된 시각적 상태를 UI에 적용할 수 있습니다.
XAML 연결 속성
VisualStateManager는 여러 XAML 연결 속성에 대한 호스트 서비스 클래스입니다.
연결된 속성에 대한 XAML 프로세서 액세스를 지원하고 동등한 get 및 set 작업을 코드에 노출하기 위해 연결된 각 XAML 속성에는 Get 및 Set 접근자 메서드 쌍이 있습니다. 코드에서 값을 얻거나 설정하는 또 다른 방법은 GetValue 또는 SetValue 를 호출하고 식별자 필드를 종속성 속성 식별자로 전달하는 종속성 속성 시스템을 사용하는 것입니다.
| 연결된 속성 | 설명 |
|---|---|
| VisualStateGroups | 템플릿 정의의 루트 요소로 정의된 VisualStateGroup 요소의 컬렉션을 가져옵니다. 컨트롤은 일반적으로 이를 템플릿의 일부로 정의합니다.
코드에서 이 속성을 가져올 때 GetVisualStateGroups를 사용합니다. 그러면 항목을 추가할 수 있는 컬렉션 개체가 반환됩니다. VisualStateManager.VisualStateGroups 속성 요소 사용의 자식 요소에 대한 XAML 처리 동작과 유사합니다. 이 특정 연결된 속성에 대한 공용 종속성 속성 식별자가 없으므로 GetValue를 사용하여 이 연결된 속성 값을 가져올 수 없으므로 항상 GetVisualStateGroups를 사용해야 합니다. |
| CustomVisualStateManager | 컨트롤의 상태 간 전환을 처리하는 사용자 지정 VisualStateManager 개체를 가져오거나 설정합니다. |
생성자
| VisualStateManager() |
VisualStateManager 클래스의 새 instance 초기화합니다. |
속성
| CustomVisualStateManagerProperty |
VisualStateManager.CustomVisualStateManager 종속성 속성을 식별합니다. |
| Dispatcher |
이 개체가 연결된 CoreDispatcher 를 가져옵니다. CoreDispatcher는 코드가 비 UI 스레드에서 시작되더라도 UI 스레드에서 DependencyObject에 액세스할 수 있는 기능을 나타냅니다. (다음에서 상속됨 DependencyObject) |
연결된 속성
| CustomVisualStateManager |
컨트롤의 상태 간 전환을 처리하는 사용자 지정 VisualStateManager 개체를 가져오거나 설정합니다. |