29
WPF에서 Control States(컨트롤 상태)는 UI 요소의 다양한 시각적 상태(예: 마우스 오버, 클릭, 비활성화 등)를 정의하는 데 사용됩니다. 이는 주로 VisualStateManager와 Triggers를 사용하여 구현할 수 있으며, 사용자의 상호작용에 따라 컨트롤의 모양이나 동작을 변경할 수 있습니다.
Control States란?
- Control States는 특정 컨트롤이 특정 상태일 때(예: 마우스가 위에 있거나 클릭된 상태 등) 시각적으로 다르게 보이도록 정의됩니다.
- WPF에서는 VisualStateManager를 사용하여 컨트롤의 상태와 해당 상태에서의 시각적 변화(스타일, 애니메이션)를 관리할 수 있습니다.
- Triggers는 XAML 내에서 특정 조건이 충족될 때 속성을 변경하는 데 사용됩니다.
활용 예시: VisualStateManager
Button 컨트롤이 마우스 오버 시 색이 바뀌고, 클릭 시 다른 색으로 변하는 예시를 보여드리겠습니다.
Button의 ControlTemplate과 VisualStateManager 예시
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Control States Example" Height="200" Width="400">
<Grid>
<Button Width="150" Height="50" Content="Hover or Click Me">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGreen" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="DarkGreen" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>실행 결과
코드 설명
ControlTemplate:Button컨트롤의 기본 템플릿을 재정의하여 커스터마이징합니다.TemplateBinding: 버튼의Background속성을 템플릿 안에서 바인딩합니다.Trigger: 특정 속성(예:IsMouseOver,IsPressed,IsEnabled)의 상태에 따라Background속성을 변경합니다.IsMouseOver가True일 때: 배경이LightGreen으로 변경됩니다.IsPressed가True일 때: 배경이DarkGreen으로 변경됩니다.IsEnabled가False일 때: 배경이LightGray로 변경됩니다.
활용 예시: VisualStateManager
VisualStateManager를 사용하면 더 복잡한 상태를 정의하고 애니메이션 효과도 추가할 수 있습니다.
VisualStateManager 예시
<Window x:Class="WpfApp241120.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="300">
<Grid>
<Button Content="Click Me" Width="100" Height="50">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="buttonBackground"
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
From="Red" To="SteelBlue" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
<Button.Background>
<SolidColorBrush x:Name="buttonBackground" Color="Red"/>
</Button.Background>
</Button>
</Grid>
</Window>실행 결과
코드 설명
VisualStateManager: 상태 그룹(CommonStates)을 정의하고, 각 상태에서 UI의 속성을 변경하는 애니메이션을 설정합니다.VisualState:MouseOver상태에서는 버튼의 배경색이Red로 애니메이션됩니다.Pressed상태에서는 배경색이SteelBlue로 짧게 애니메이션됩니다.
Storyboard: 상태 변경 시 애니메이션 효과를 정의합니다.
Control States의 장점
- 재사용성: ControlTemplate과 VisualStateManager를 사용하여 일관된 상태 관리가 가능합니다.
- 유연성: 다양한 컨트롤의 상태를 정의하고 커스터마이징할 수 있습니다.
- 애니메이션: 시각적 상태 변경에 애니메이션을 추가할 수 있어 더 나은 사용자 경험을 제공합니다.
이렇게 WPF의 Control States를 활용하면 사용자 상호작용에 따라 시각적으로 더 나은 UI를 만들 수 있습니다.
