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" 개체를 정의하는 "CommonStates" VisualState 라는 하나의 VisualStateGroup개체가 포함됩니다. 사용자가 포인터를 위에 ButtonGrid 놓으면 .5초 만에 녹색에서 빨간색으로 변경됩니다. 사용자가 포인터를 단추 Grid 에서 멀리 이동하면 즉시 다시 녹색으로 변경됩니다.
<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에서 시각적 상태를 작성하는 방법에 대한 자세한 내용은 시각적 상태에 대한 Storyboarded 애니메이션을 참조하세요.
- 컨트롤 작성자 또는 앱 개발자는 VisualStateManager의 정적 GoToState 메서드를 호출하여 이러한 상태 간에 전환합니다. 컨트롤 작성자는 컨트롤 논리가 상태 변경을 나타내는 이벤트를 처리하거나 제어 논리가 자체적인 상태 변경을 시작할 때마다 이 작업을 수행합니다. 앱 코드가 아닌 컨트롤 정의 코드에서 이 작업을 수행하는 것이 더 일반적이므로 가능한 모든 시각적 상태와 해당 전환 및 트리거 조건이 앱 코드에 대해 기본적으로 존재하며 논리는 컨트롤에 의해 캡슐화됩니다.
대부분의 개발자는 위에서 설명한 대로 VisualStateManager API인 VisualStateManager.VisualStateGroups 중 GoToState두 가지만 사용합니다. 나머지 API는 모두 확장 지원 및 사용자 지정 VisualStateManager 만들기용입니다. 자세한 내용은 이 항목의 "사용자 지정 VisualStateManager" 섹션을 참조하세요.
Microsoft Visual Studio의 XAML 디자인 화면에서 사용하도록 설정된 스타일 복사본을 편집하는 경우 기본 템플릿의 시각적 상태는 편집 중인 XAML에 정의됩니다. 컨트롤 논리는 이러한 시각적 상태가 템플릿에 존재할 것으로 예상하므로 이러한 상태를 삭제하거나 이름을 변경하지 않도록 합니다.
시각적 상태 외에도 시각적 상태 모델에는 전환도 포함됩니다. 전환은 상태가 변경될 때 각 시각적 상태 간에 발생하는 애니메이션 동작에 의해 Storyboard 제어됩니다. 컨트롤의 시각적 상태 집합에 정의된 대로 시작 상태와 종료 상태의 각 조합에 대해 전환이 다르게 정의될 수 있습니다. 전환은 속성 요소 구문을 사용하여 XAML에서 VisualStateGroup의 속성에 의해 Transitions 정의됩니다. 대부분의 기본 컨트롤 템플릿은 전환을 정의하지 않습니다. 특별히 정의된 전환이 없는 경우 상태 간 전환은 즉시(0 기간) 발생합니다. 자세한 내용은 VisualTransition를 참조하세요.
사용자 지정 VisualStateManager
상태 간 전환에 대한 고유한 논리를 구현하려는 경우(고급 시나리오) VisualStateManager에서 상속되는 클래스를 만들 수 있습니다. 다음 지침을 따릅니다.
- 파생 클래스는 보호된 GoToStateCore 메서드를 재정의해야 합니다. 사용자 지정 VisualStateManager의 모든 인스턴스는 메서드가 호출될 때 이 Core 논리를 GoToState 사용합니다.
- 사용자 지정 VisualStateManager 클래스를 참조하려면 템플릿의 시각적 상태를 정의하는 VisualStateManager.VisualStateGroups 연결된 속성 사용과 함께 사용자 지정 VisualStateManager 클래스 동작을 사용할 루트 요소의 루트 요소 ControlTemplate 에 VisualStateManager.CustomVisualStateManager 연결된 속성의 값을 설정합니다. 일반적으로 기본 XAML 생성을 통해 사용자 지정 VisualStateManager 클래스의 인스턴스를 만듭니다 Application.Resources. 그런 다음 사용자 지정 VisualStateManager 리소스의 키에 대한 {StaticResource} 태그 확장 참조를 사용하여 VisualStateManager.CustomVisualStateManager 연결된 속성이 설정됩니다.
이는 사용자 지정 VisualStateManager를 만들고 사용하기 위한 기본 요구 사항입니다. 몇 가지 동작을 더 재정의하도록 선택할 수도 있습니다.
- VisualStateManager에서 CurrentStateChanged 관리하는 이벤트가 발생하는 VisualStateGroup 시기를 제어하기 위해 재정 RaiseCurrentStateChanged 의합니다.
- VisualStateManager에서 CurrentStateChanging 관리하는 이벤트가 발생하는 VisualStateGroup 시기를 제어하기 위해 재정 RaiseCurrentStateChanging 의합니다.
- 사용자 지정 클래스에 초기화할 추가 정보가 필요한 경우 생성자를 재정의하거나 오버로드합니다.
다른 모든 API(CustomVisualStateManagerProperty, GetCustomVisualStateManager, ,GetVisualStateGroupsSetCustomVisualStateManager)는 연결된 속성 지원을 위한 인프라이며, 이를 호출하거나 아무 작업도 수행할 필요가 없습니다.
컨트롤이 아닌 요소의 시각적 상태
시각적 상태는 즉시 Control 하위 클래스가 아닌 일부 UI 영역의 상태를 변경하려는 시나리오에 유용할 수 있습니다. 메서드의 컨트롤 매개 변수 GoToState 에는 VisualStateManager가 작동하는 개체를 참조하는 서브클래스가 필요 Control 하기 때문에 이 작업을 직접 수행할 수 없습니다. PageControl 는 서브클래스이며, 하위 클래스가 없거나 PageWindow.Content 루트가 하위 클래스가 아닌 Control 컨텍스트에서 UI를 표시하는 경우는 매우 드뭅니다. 상태를 적용하려는 Window.Content 다른 콘텐츠(예: Panel)에 대한 컨테이너 또는 루트로 사용자 지정 UserControl 을 정의하는 것이 좋습니다. 그런 다음, 나머지 콘텐츠가 UserControl 해당 콘텐츠Control인지 여부에 관계없이 상태를 호출 GoToState 하고 적용할 수 있습니다. 예를 들어 부모 UserControl 속성 또는 템플릿의 SwapChainPanel 명명 SwapChainPanel 된 부분에 적용되는 명명된 상태 내에 UserControl 배치하고 선언한 경우 UI에 시각적 상태를 적용할 수 있습니다.
XAML 연결된 속성
VisualStateManager는 여러 XAML 연결된 속성에 대한 호스트 서비스 클래스입니다.
연결된 속성에 대한 XAML 프로세서 액세스를 지원하고 동일한 get 및 set 작업을 코드에 노출하기 위해 각 XAML 연결된 속성에는 Get 및 Set 접근자 메서드 쌍이 있습니다. 코드에서 값을 얻거나 설정하는 또 다른 방법은 종속성 속성 시스템을 사용하여 식별자 필드를 종속성 속성 식별자로 호출 GetValue 하거나 SetValue 전달하는 것입니다.
| 연결된 속성 | Description |
|---|---|
| VisualStateGroups | 템플릿 정의의 루트 요소에 의해 정의된 VisualStateGroup 요소의 컬렉션을 가져옵니다. 컨트롤은 일반적으로 템플릿의 일부로 정의합니다.
코드에서 이 속성을 가져올 때 GetVisualStateGroups를 사용합니다. 그러면 항목을 추가할 수 있는 컬렉션 개체가 반환됩니다. VisualStateManager.VisualStateGroups 속성 요소 사용의 자식 요소에 대한 XAML 처리 동작과 유사합니다. 이 특정 연결된 속성에 대한 공용 종속성 속성 식별자가 없으므로 GetValue를 사용하여 이 연결된 속성 값을 가져올 수 없으므로 항상 GetVisualStateGroups를 사용해야 합니다. |
| CustomVisualStateManager | 컨트롤의 상태 간 전환을 처리하는 사용자 지정 VisualStateManager 개체를 가져오거나 설정합니다. |
생성자
| VisualStateManager() |
VisualStateManager 클래스의 새 인스턴스를 초기화합니다. |
속성
| CustomVisualStateManagerProperty |
VisualStateManager.CustomVisualStateManager 종속성 속성을 나타냅니다. |
| Dispatcher |
이 개체가 CoreDispatcher 연결된 개체를 가져옵니다. 코드 CoreDispatcher 가 비 UI 스레드에서 시작되는 경우에도 UI 스레드에 액세스할 DependencyObject 수 있는 기능을 나타냅니다. UWP에 해당하는 WinUI 2 API: Microsoft.UI.Xaml.DependencyObject.Dispatcher(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조). (다음에서 상속됨 DependencyObject) |
연결된 속성
| CustomVisualStateManager |
컨트롤의 상태 간 전환을 처리하는 사용자 지정 VisualStateManager 개체를 가져오거나 설정합니다. |
메서드
적용 대상
추가 정보
피드백
다음에 대한 사용자 의견 제출 및 보기