VisualState 클래스

정의

네임스페이스:

Windows.UI.Xaml

특정 상태에 있을 때 UI 요소의 시각적 모양을 나타냅니다. 시각적 상태는 Setter 또는Storyboard 를 사용하여 VisualState가 정의된 페이지 또는 컨트롤 템플릿 내에서 UI 속성을 설정합니다.

public ref class VisualState sealed : DependencyObject

/// [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")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class VisualState final : 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")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class VisualState : DependencyObject

Public NotInheritable Class VisualState
Inherits DependencyObject

<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.StateTriggers>
    oneOrMoreTriggers
  </VisualState.StateTriggers>  
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>

상속

Object Platform::Object IInspectable DependencyObject VisualState

특성

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows 요구 사항

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

예제

이 예제에서는 "CommonStates"라는 단추의 ControlTemplate에 VisualStateGroup을 만들고 상태에 대한 VisualState 개체인 "Normal", "Pressed", "PointerOver"를 추가합니다. 또한 Button은 VisualStateGroup이라는 "CommonStates"에 있는 "Disabled"라는 상태를 정의하지만 이 예제에서는 간결하게 생략합니다.

<ControlTemplate TargetType="Button">
  <Border x:Name="RootElement">

    <VisualStateManager.VisualStateGroups>

      <!--Define the states for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">

        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, BorderBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Red" />

          </Storyboard>

        </VisualState>

        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard >
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Transparent"/>
          </Storyboard>
        </VisualState>
          <!--The Disabled state is omitted for brevity.-->
        </VisualStateGroup>
  
    </VisualStateManager.VisualStateGroups>
    

    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />

    </Grid>


  </Border>
</ControlTemplate>

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

설명

VisualState 요소는 항상 XAML 태그의 VisualStateGroup 부모 내에 포함되어야 합니다. VisualStateGroup에는 암시적 컬렉션 속성 상태가 있으므로 각 VisualState를 VisualStateGroup 부모의 직접 자식 요소로 배치할 수 있습니다. 예를 들면 다음과 같습니다.

<VisualStateGroup x:Name="CommonStates">
   <VisualState x:Name="Normal"/>
   <VisualState x:Name="PointerOver">...</VisualState>
<!-- do not need explicit VisualStateGroups.States property element, States is the XAML content property-->
</VisualStateGroup>

StateTriggers를 사용하는 경우 트리거가 자동으로 적용되도록 VisualStateGroup이 루트의 첫 번째 자식 아래에 선언되어 있는지 확인합니다.

기본 상태

x:Name 특성이 있지만 Storyboard에서 아무것도 지정하지 않는 VisualState를 정의하는 것은 합법적이고 일반적입니다. 이러한 VisualState는 기본 템플릿에 있는 모든 값을 사용하기 때문에 유용합니다. 그런 다음 GoToState 호출에서 빈 상태를 구체적으로 요청할 수 있습니다. 빈 상태가 현재 상태가 되면 동일한 VisualStateGroup에서 이전 시각적 상태로 만든 템플릿 속성에 대한 모든 수정 내용을 취소합니다. 시각적 상태에 그룹을 사용하는 방법에 대한 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.

StateTriggers를 사용하는 경우 GoToState를 호출하는 빈 VisualState를 더 이상 만들 필요가 없습니다. StateTrigger에 대한 조건이 더 이상 충족되지 않으면 해당 VisualState에서 만든 속성에 대한 모든 수정 내용이 자동으로 제거되고 기본 태그에 제공된 값이 적용됩니다.

VisualState 및 x:Name

GoToState 메서드(일반적으로 제어 코드에서 호출됨)에는 현재 상태로 사용해야 하는 상태를 VisualStateManager에 알리기 위해 stateName 매개 변수가 필요합니다. 코드에서 GoToState 호출을 사용하여 수동으로 적용해야 하는 각 VisualState에 대해 x:Name 특성을 지정합니다. StateTriggers를 사용하여 태그에서 VisualState를 자동으로 트리거하는 경우 해당 VisualState에서 x:Name 특성을 지정할 필요가 없습니다.

시각적 전환을 사용하는 경우 VisualState의 x:Name 특성 값은 VisualTransition의 From 또는 To 값에서도 참조됩니다. 이 경우 이름은 VisualTransition 에서 중간 값을 제공하는 상태를 식별합니다.

VisualState에 대해 지정하는 x:Name 특성 값은 VisualState가 있는 컨트롤 템플릿 XAML 내에서 고유해야 합니다. 상태 이름 범위는 각 VisualStateGroup에 대한 범위가 아니라 템플릿의 모든 시각적 상태로 범위가 지정됩니다. 예를 들어 서로 다른 그룹에 있더라도 동일한 템플릿 XAML에서 "중요"라는 두 개의 다른 상태를 정의할 수 없습니다.

x:Name 특성을 사용하여 시각적 상태 또는 시각적 상태 그룹의 이름을 지정해야 합니다. 접두사 없는 특성 "Name"이 작동하지 않습니다. VisualState 및 VisualStateGroup 에는 각각 Name 속성이 있지만 읽기 전용입니다. 해당 Name 속성은 코드를 사용하여 XAML에서 설정하는 것이 아니라 런타임에 컨트롤 템플릿의 콘텐츠를 검사하는 고급 시나리오에 존재합니다.

기존 컨트롤의 컨트롤 템플릿 바꾸기

앱 UI에서 컨트롤을 사용하는 앱 개발자인 경우 Control.Template 속성을 다른 값으로 설정하여 컨트롤 템플릿을 바꿀 수 있습니다. 또는 해당 컨트롤에 암시적 스타일 키를 사용하는 새 스타일을 선언하여 템플릿을 바꿀 수 있습니다. 이러한 개념에 대한 자세한 내용은 빠른 시작: 템플릿 제어를 참조하세요.

컨트롤 템플릿을 바꿀 때 XAML에서 원래 컨트롤 템플릿의 VisualStateManager.VisualStateGroups 콘텐츠에서 명명된 기존 VisualState 요소를 모두 재현하는 것이 중요합니다. 수정하지 않는 컨트롤 코드가 GoToState를 호출합니다. 이러한 이름의 상태는 컨트롤 템플릿에 있어야 합니다. 누락된 VisualState에 대한 요청은 예외를 throw하지 않지만 사용자에게 혼동되는 시각적 상태로 컨트롤을 남기는 경우가 많습니다. 예를 들어 CheckBox 컨트롤에 대해 "Checked"라는 VisualState를 제공하지 않으면 사용자가 컨트롤을 선택할 때 시각적 피드백이 표시되지 않습니다. 사용자는 선택된 CheckBox와 선택되지 않은 CheckBox 를 구분하는 시각적으로 다른 무언가가 있을 것으로 예상 합니다. 따라서 앱 개발자의 부분에서 시각적 상태를 재현하지 못하면 컨트롤이 사용자에게 손상된 것처럼 보입니다.

Microsoft Visual Studio와 같은 IDE를 사용하는 경우 컨트롤 템플릿을 바꾸는 데 사용하는 작업은 원래 템플릿 XAML의 복사본으로 시작하는 옵션을 제공하므로 대체하려는 VisualState 요소 및 기타 컨트롤 컴퍼지션을 모두 볼 수 있습니다. 새 템플릿에서 예상 시각적 상태를 실수로 생략하지 않도록 템플릿 복사본으로 시작한 다음 수정하는 것이 가장 좋습니다.

사용자 지정 컨트롤의 명명된 시각적 상태 특성 지정

컨트롤 템플릿 XAML에 시각적 상태가 있는 사용자 지정 컨트롤을 정의하는 경우 컨트롤 클래스의 특성을 지정하여 소비자에게 사용할 수 있는 시각적 상태를 제어하도록 지정하는 것이 좋습니다. 이렇게 하려면 컨트롤 정의 코드의 클래스 수준에서 하나 이상의 TemplateVisualState 특성을 적용합니다. 각 특성은 상태의 x:Name 특성을 지정해야 합니다. 이 특성은 컨트롤 소비자가 GoToState 호출에서 전달하여 해당 시각적 상태를 사용하는 stateName 값입니다. VisualState가 VisualStateGroup의 일부인 경우 특성 값에도 표시되어야 합니다.

생성자

VisualState()

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

속성

Dispatcher	이 개체가 연결된 CoreDispatcher 를 가져옵니다. CoreDispatcher는 코드가 비 UI 스레드에서 시작되더라도 UI 스레드에서 DependencyObject에 액세스할 수 있는 기능을 나타냅니다. (다음에서 상속됨 DependencyObject)
Name	VisualState의 이름을 가져옵니다.
Setters	이 VisualState가 적용될 때 UIElement의 모양을 제어하는 불연속 속성 값을 정의하는 Setter 개체의 컬렉션을 가져옵니다.
StateTriggers	이 VisualState를 적용해야 하는 시기를 나타내는 StateTriggerBase 개체의 컬렉션을 가져옵니다. 모든 트리거가 활성 상태이면 VisualState가 적용됩니다.
Storyboard	이 시각적 상태를 사용할 때 컨트롤의 상태별 속성 값과 모양을 정의하는 Storyboard 를 가져오거나 설정합니다.

메서드

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)

추가 정보

• DependencyObject
• VisualStateGroup
• 시각적 상태에 대한 스토리보드 애니메이션
• 스토리보드 애니메이션
• x:Name 특성
• 빠른 시작: 컨트롤 템플릿
• XAML 컨트롤 및 앱 스타일 샘플
• 마스터/세부 정보 샘플(Windows 10)