VisualState 클래스
정의
중요
일부 정보는 릴리스되기 전에 상당 부분 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적이거나 묵시적인 보증도 하지 않습니다.
특정 상태에 있을 때 UI 요소의 시각적 모양을 나타냅니다. 시각적 상태는 VisualState가 Storyboard 정의된 페이지 또는 컨트롤 템플릿 내에서 UI 속성을 사용하거나 설정하는 데 사용됩니다Setters.
UWP에 해당하는 WinUI 2 API: Microsoft.UI.Xaml.VisualState(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
public ref class VisualState sealed : DependencyObject/// [Windows.Foundation.Metadata.Activatable(65536, Windows.Foundation.UniversalApiContract)]
/// [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")]
class VisualState final : 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.Activatable(65536, typeof(Windows.Foundation.UniversalApiContract))]
[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")]
public sealed class VisualState : 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 : DependencyObjectPublic 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>
- 상속
- 특성
Windows 요구 사항
| 디바이스 패밀리 |
Windows 10 (10.0.10240.0에서 도입되었습니다.)
|
| API contract |
Windows.Foundation.UniversalApiContract (v1.0에서 도입되었습니다.)
|
예제
이 예제에서는 "CommonStates"라는 형식 ControlTemplate 의 개체를 Button 만들고 VisualStateGroup 상태에 대한 VisualState 개체인 "Normal", "Pressed" 및 "PointerOver"를 추가합니다. 또한 Button 이름이 "CommonStates"인 "Disabled"라는 VisualStateGroup상태를 정의하지만 예제에서는 간결하게 생략합니다.
<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 포함되어야 합니다. 암시적 컬렉션 속성States이 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상태에서 취소합니다. 시각적 상태에 그룹을 사용하는 방법에 대한 자세한 내용은 시각적 상태에 대한 Storyboarded 애니메이션을 참조하세요.
사용하는 StateTriggers경우 더 이상 호출 GoToState 할 빈 VisualState를 만들 필요가 없습니다. 조건이 더 이상 충족되지 않으면 해당 VisualState에서 수행한 속성에 대한 StateTrigger 모든 수정 내용이 자동으로 제거되고 기본 태그에 제공된 값이 적용됩니다.
VisualState 및 x:Name
GoToState 메서드(일반적으로 제어 코드에서 호출됨)에는 현재 상태로 사용해야 하는 상태를 알리 VisualStateManager 기 위해 stateName 매개 변수가 필요합니다. 코드의 호출을 사용하여 GoToState 수동으로 적용해야 하는 각 VisualState에 대해 x:Name 특성을 지정합니다. 태그에서 VisualState를 자동으로 트리거하는 데 사용하는 StateTriggers 경우 해당 VisualState에서 x:Name 특성을 지정할 필요가 없습니다.
시각적 전환을 사용하는 경우 VisualState의 x:Name 특성 값도 VisualState의 VisualTransition값 또는 To 값으로 참조 From 됩니다. 이 경우 이름은 상태를 식별하거나 중간 값을 제공하는 상태를 나타냅니다 VisualTransition .
VisualState에 대해 지정하는 x:Name 특성 값은 VisualState가 있는 컨트롤 템플릿 XAML 내에서 고유해야 합니다. 상태 이름의 범위는 각각 VisualStateGroup에 대한 범위가 아니라 템플릿의 모든 시각적 상태로 범위가 지정됩니다. 예를 들어 서로 다른 그룹에 있더라도 동일한 템플릿 XAML에서 "Focused"라는 두 개의 다른 상태를 정의할 수 없습니다.
x:Name 특성을 사용하여 시각적 상태 또는 시각적 상태 그룹의 이름을 지정해야 합니다. 접두사 없는 특성 "Name"이 작동하지 않습니다. VisualState와 VisualStateGroup 각각에는 Name 속성이 있지만 읽기 전용입니다. 이 Name 속성은 코드를 사용하여 XAML에서 설정하는 것이 아니라 런타임에 컨트롤 템플릿의 콘텐츠를 검사하는 고급 시나리오에 존재합니다.
기존 컨트롤의 컨트롤 템플릿 바꾸기
앱 UI에서 컨트롤을 사용하는 앱 개발자인 경우 속성을 다른 값으로 설정하여 컨트롤 템플릿을 Control.Template 바꿀 수 있습니다. 또는 해당 컨트롤에 암시적 스타일 키를 사용하는 새 스타일을 선언하여 템플릿을 바꿀 수 있습니다. 이러한 개념에 대한 자세한 내용은 빠른 시작: 컨트롤 템플릿을 참조하세요.
컨트롤 템플릿을 바꿀 때 XAML의 원래 컨트롤 템플릿 VisualStateManager.VisualStateGroups 콘텐츠에서 기존의 모든 명명된 VisualState 요소를 재현하는 것이 중요합니다. 수정하지 않는 컨트롤 코드가 호출 GoToState됩니다. 이러한 이름의 상태는 컨트롤 템플릿에 있어야 합니다. 누락된 VisualState에 대한 요청은 예외를 throw하지 않지만 사용자에게 혼동되는 시각적 상태로 컨트롤을 남기는 경우가 많습니다. 예를 들어 컨트롤에 대해 "Checked"라는 VisualState를 CheckBox 제공하지 않으면 사용자가 컨트롤을 선택할 때 시각적 피드백이 표시되지 않습니다. 사용자는 선택 항목과 선택 CheckBox 되지 않은 CheckBox항목을 구분하기 위해 시각적으로 다른 것이 있을 것으로 예상합니다. 따라서 앱 개발자의 부분에서 시각적 상태를 재현하지 못하면 컨트롤이 사용자에게 손상되는 것처럼 보입니다.
Microsoft Visual Studio 같은 IDE를 사용하는 경우 컨트롤 템플릿을 바꾸는 데 사용하는 작업은 원래 템플릿 XAML의 복사본으로 시작하는 옵션을 제공하므로 원래 명명된 VisualState 요소 및 대체 중인 다른 컨트롤 컴퍼지션을 모두 볼 수 있습니다. 새 템플릿에서 예상 시각적 상태를 실수로 생략하지 않도록 템플릿 복사본으로 시작한 다음 수정하는 것이 가장 좋습니다.
사용자 지정 컨트롤의 명명된 시각적 상태 특성 지정
컨트롤 템플릿 XAML에 시각적 상태가 있는 사용자 지정 컨트롤을 정의하는 경우 사용 가능한 시각적 상태를 제어하는 소비자를 나타내도록 컨트롤 클래스의 특성을 지정하는 것이 좋습니다. 이렇게 하려면 컨트롤 정의 코드의 클래스 수준에서 하나 이상의 TemplateVisualState 특성을 적용합니다. 각 특성은 상태의 x:Name 특성을 지정해야 합니다. 이 특성은 컨트롤 소비자가 해당 시각적 상태를 사용하기 위해 호출에서 GoToState 전달할 stateName 값입니다. VisualState가 일부 VisualStateGroup인 경우 특성 값에도 표시되어야 합니다.
생성자
| VisualState() |
VisualState 클래스의 새 인스턴스를 초기화합니다. |
속성
메서드
적용 대상
추가 정보
피드백
다음에 대한 사용자 의견 제출 및 보기