VisualState 클래스

참조

정의

네임스페이스:: Microsoft.UI.Xaml

중요

일부 정보는 릴리스되기 전에 상당 부분 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적이거나 묵시적인 보증도 하지 않습니다.

편집

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

public ref class VisualState sealed : DependencyObject

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualState final : DependencyObject

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
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

특성: ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

예제

다음은 "CommonStates"라는 단추의 ControlTemplate에 VisualStateGroup을 만들고 상태에 대한 개체인 "Normal", "Pressed" 및 "PointerOver"를 추가하는 VisualState 예제입니다. 또한 는 ButtonVisualStateGroup이라는 "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 특성을 지정할 필요가 없습니다.

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

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

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

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

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

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

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

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

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

생성자

VisualState()

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

속성

Dispatcher	항상 Windows 앱 SDK 앱에서 를 반환 `null` 합니다. 대신 DispatcherQueue 를 사용합니다. (다음에서 상속됨 DependencyObject)
DispatcherQueue	`DispatcherQueue` 이 개체가 연결된 을 가져옵니다. 는 `DispatcherQueue` 코드가 비 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)

적용 대상

다음을 통해 공유