C# WPF에서 Property Trigger 이해하기

해당 포스팅은 개인적으로 C# WPF를 공부하면서 익힌 내용을 기억에 남기기 위한 작업의 일환으로 작성된 글로서
일부 내용에 오류가 있을 수도 있으니 참고하시기 바랍니다.

 

 

우스 커서를 움직여서
특정 글자위에 위치하게 되면,
해당 글자의 의존 속성(Dependency Property)이
변경되는 프로젝트를 만들어 보자.

 

내용 요약

 

우선 Trigger에 대해서 다시한번 살펴보면,

 

Trigger

- 정의 : 트리거란 특정 조건, 예를들어 특정 속성의 값이 변경되는 경우 또는

이벤트가 발생하도록하여, 원하는 속성의 값을 바꿀 수 있도록해주는 개체이다.

​

-종류 : 트리거의 종류로는 크게 네가지가 있다.

1.Property Trigger : Dependency Property가 변경될 때 실행

2.Event Trigger : Routed Event가 발생할 때 실행

3.Data Trigger : Binding으로 연결된 Property 값이 변경되었을 때 실행

4.Multi Trigger : 다수의 Property 조건이 만족할 때 실행

​

이 포스팅에서는 Property Trigger에 대한 내용을 살펴보도록 하겠다.

 

Dependency Property의 정의

Property값이 변경 되었을 때 자동으로 어떤 값을

처리할 수 있게 해주는 것으로 스타일링, 데이터 바인딩, 애니메이션 등의

WPF 주요 부분에 사용된다.

​

Property Trigger의 예시를 위해

Reference Site에서 TextBlock의 Dependency Property를 살펴보면 매우 많은

의존 속성이 있는 것을 알 수 있다.

 

https://learn.microsoft.com/en-us/dotnet/api/system.windows.uielement?view=windowsdesktop-8.0Trigger

UIElement Class (System.Windows)

 

본 포스팅에서는 IsMouseOver 의존속성을 이용하여

Property Trigger에 대한 이해를 할 수 있는 시간을 가져보도록 하겠다.

 

 

목차
1.Property Trigger(IsMouseOver)를 위한 UI(.xaml) 만들기
2.설명 및 실행결과

 

하나의 버튼과 텍스트 블록을 만들고,

마우스 커서가 각각의 Control에 위치할 때 글자의 색깔과

크기 및 Text를 변경하는 예제를 만들어 보자.

 

 

1.Property Trigger(IsMouseOver)를 위한 UI 만들기

 

마우스가 특정 버튼 혹은 글자(TextBlock)위에 있을 경우 원하는 속성이 변경하도록

.xaml 파일에 아래와 같이 작성해보자.

 

(본 포스팅에서는 마우스 포인터가 올라갈 경우

글자색과 글자 내용이 변경되도록 하였다.)

 

<Window x:Class="PropertyTrigger.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PropertyTrigger"
        mc:Ignorable="d"
        Title="MainWindow" Height="217" Width="479">
    <Window.Resources>
        <Style x:Key="MyStyle">
            <Setter Property="Control.Foreground" Value="Red"/>
            <Setter Property="TextBlock.Text" Value="Hello WPF!"/>
            <Setter Property="Button.Content" Value="Property Trigger&#10;(Original)"/>
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="Control.Foreground" Value="Blue"/>
                    <Setter Property="TextBlock.Text" Value="버튼으로 진입했습니다."/>
                    <Setter Property="Button.Content" Value="Property Trigger&#10;(Changed)"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Width="100" Height="70"
                Style="{StaticResource MyStyle}"/>
        <TextBlock Style="{StaticResource MyStyle}"
                   FontSize="30" FontWeight="Bold"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </StackPanel>

</Window>

 

비하인드 코드에는 특별히 추가된 코드가 없다.

 

 

2. 설명 및 실행 결과

 

기본적인 속성은 아래의 코드에서처럼 글자색은 "Red",

글자는 TextBlock의 경우 "Hello WPF!"

Button의 경우 "Property Trigger (Original)"

인데,

 

<Setter Property="Control.Foreground" Value="Red"/>
<Setter Property="TextBlock.Text" Value="Hello WPF!"/>
<Setter Property="Button.Content" Value="Property Trigger&#10;(Original)"/>

 

아래의 코드에서처럼 Button과 TextBlock의 Style을 MyStyle로 설정해놓고,

<Button Width="100" Height="70" Style="{StaticResource MyStyle}"/>
<TextBlock Style="{StaticResource MyStyle}" FontSize="30" FontWeight="Bold"
          HorizontalAlignment="Center" VerticalAlignment="Center"/>

 

Trigger의 Property를 아래처럼 IsMouseOver로 설정한다음

IsMouseOver가 되었을 경우

변경하고 싶은 속성을 아래와 같이 작성해주면 된다.

여기에서는 글자색(.Foreground), TextBlock의 텍스트(.Text) 그리고 Button의 콘텐트(.Content)를

변경해 주었다.

<Trigger Property="Control.IsMouseOver" Value="True">
     <Setter Property="Control.Foreground" Value="Blue"/>
     <Setter Property="TextBlock.Text" Value="버튼으로 진입했습니다."/>
     <Setter Property="Button.Content" Value="Property Trigger&#10;(Changed)"/>
</Trigger>

 

프로그램을 실행하면 앞서 설명한 것 처럼 아래 그림과 같이 나타난다.

​

여기에서 만약 마우스 포인터를 버튼(Property Trigger(Original))위에 올리게 되면,

아래 그림과 같이 글자색은 파란색으로 바뀌고, 글자 또한

(original)에서 (Changed)로 바뀌게 된다.

​

그리고 TextBlock인 Hollo WPF!의 위에

마우스 포인터가 놓이게 되면,

아래 그림과 같이 바뀌게 된다.

​

​

Tip.

기존 C/C++에서의 줄바꿈에 해당하는 ‘\n’ 대신에

C# WPF .xaml에서는 '&#10'을 사용하면,

버튼 또는 TextBlock등에서

줄 바꿈이 가능하다.

 

 

"

마치며...

본 포스팅에서는 IsMouseOver라는 Property를 이용하여

버튼과 텍스트블럭의 글자 색과 내용을

원하는 Style로 변경하는 프로그램을

작성해 보았다.

"