Trigger를 사용해서 동적 UI 구성하기 Part1 - Overview

[카키104]

Trigger를 사용해서 동적 UI 구성하기 Part1 - Overview (tistory.com)

Trigger를 사용해서 동적 UI 구성하기 Part1 - Overview

1. Trigger Overview

Trigger는 컨트롤의 시각적 효과를 변경하는 데 도움이 되는 WPF의 매우 중요한 기능입니다. 트리거를 이용해서 속성 변경, 데이터 변경, 이벤트 발생 시점에 컨트롤의 시각적 효과를 변경하기 위해 사용되며, Code behind나 ViewModel에서 시각적 효과를 변경하기 위한 동작을 최소화 할 수 있습니다. 물론 Xaml의 코딩량이 그 만큼 늘어나지만, UI와 비지니스 로직의 분리라는 측면에서 보면 매우 좋은 기능입니다.

2. Trigger 종류 및 사용법

종류

• Property Trigger(Trigger)
  • WPF의 기본 트리거이며 <Trigger/>로 사용할 수 있습니다.
  • Trigger를 소유한 컨트롤의 속성 값이 변경될 때 동작합니다. 다른 컨트롤의 속성값을 사용할 수 없습니다.
  • 의존속성(DependencyProperty)만 사용이 가능합니다.
  • Binding을 사용할 수 없습니다.
  • 여러개의 조건을 사용하기 위해서는 <MultiTrigger/>를 이용합니다.
• Data Trigger
  • <DataTrigger/>로 사용할 수 있습니다.
  • Binding 기능을 이용하여 데이터와 연결할 수 있으며, 그 데이터가 변경되면 동작합니다.
  • 의존속성(DependencyProperty)과 일반 속성(Public Property)를 모두 사용할 수 있습니다.
  • 접근 가능 범위내 다른 컨트롤의 속성을 사용할 수 있습니다.
  • 여러개의 조건을 사용하기 위해서는 <MultiDataTrigger/>를 이용합니다.
• Event Trigger
  • <EventTrigger/>로 사용할 수 있습니다.
  • Trigger를 소유한 컨트롤의 이벤트가 발생될 때 동작합니다.
  • 트리거 발생시 Storyboard를 이용해서 프로퍼티 값을 수정하기 때문에 코드가 길어지고, 사용이 불편합니다. 이 경우에는 아래 Microsoft.Xaml.Behaviors.Wpf의 Trigger 사용하는 것을 권장합니다.
• Microsoft.Xaml.Behaviors.Wpf의 Trigger 사용

사용

• Style 내부에서 사용
  • 가장 일반적인 사용법
  • <Style.Triggers></Style.Triggers> 내부에서 사용합니다.
  • 각 컨트롤마다 Style Trigger를 지정하거나, Resources에 정의해서 사용합니다.
• DataTemplate에서 사용 (ItemTemplate 등에 사용됩니다.)
  • <DataTemplate.Triggers></DataTemplate.Triggers> 내부에 사용합니다.
  • DataTemplate 제일 하단부에 추가할 수 있으며, DataTemplate 내부의 각 컨트롤들을 제어할 수 있는 코드를 작성할 수 있습니다.
• ContentTemplate에서 사용 (Content 프로퍼티 내부에 템플릿을 지정하는데 사용됩니다.)
  • <ContentTemplate.Triggers></ContentTemplate.Triggers> 내부에 사용합니다.
  • ContentTemplate 제일 하단부에 추가할 수 있으며, ContentTemplate 내부의 각 컨트롤들을 제어할 수 있는 코드를 작성할 수 있습니다.
• ControlTemplate에서 사용하기 (Control의 UI 구성을 변경하기위해 사용합니다.)
  • <ControlTemplate.Triggers></ControlTemplate.Triggers> 내부에 사용합니다.
  • ControlTemplate 제일 하단부에 추가할 수 있으며, ControlTemplate 내부의 각 컨트롤들을 제어할 수 있는 코드를 작성할 수 있습니다.

3. ListBox에서 선택된 아이템 스타일 변경

ListBox에서 데이터를 표시할 때 각 각의 Item들은 ListBoxItem이라는 Control이 만들어지면서, 데이터가 표시 됩니다.

데이터가 표시되는 컨트롤을 통칭해서 ItemContainer라 하고, ListBox의 ListBoxItem의 스타일을 입력하기 위해서는 <ListBox.ItemContainerStyle/>을  이용합니다.

3rd party 컨트롤 중 일부는 전혀 다른 이름의 프로퍼티를 이용해야지 Item의 Style을 변경 할 수 있습니다.

처음으로 사용해볼 트리거는 <Trigger/>입니다.

• Grid를 2개의 컬럼으로 나누고, 첫번째 컬럼에 ListBox에 ListBox.ItemContainerStyle을 이용해서 Style을 추가 합니다.
• Style의 TargetType을 반드시 지정해야 합니다.
• 첫번째 Setter는 HorizontalContentAlignment라는 속성의 값을 Stretch로 변경합니다. 기본 값은 Left입니다.
• Trigger를 사용해서 ListBoxItem의 IsSelected라는 속성의 값이 True이면, 아래있는 Setter 2개를 실행하게 됩니다.
• 해당 조건에 만족하는 Item에 대해서만 수행하고, 다른 Item을 선택하면 이전 아이템의 스타일은 원래 상태로 변경됩니다.

ListBoxItem의 Background 컬러는 컨트롤 내부에 기본 트리거로 인해 이 방법으로는 변경할 수 없습니다. 나중에 이 부분에 대해서 설명 드리겠습니다.

실행

아이템 선택

4. ItemTemplate를 이용해서 추가 효과 주기

위에서 다루었던 내용은 ListBoxItem이라는 컨트롤의 Style을 변경하는 것이였는데, 내부 컨텐츠를 좀더 다양하게 변화 시키기 위해서는 직접 ItemTemplate를 만들고 효과를 추가하는 것이 더 좋습니다.

Window.Resources에 DataTemplate를 하나 추가 합니다.

• TextBlock의 스타일을 변경하기 위한 트리거는 ListBoxItem의 IsSelected 프로퍼티이기 때문에 해당 프로퍼티를 감시하려면, DataTrigger와 Binding을 이용해야 합니다.
• Binding에는 RelativeSource를 사용하면 됩니다.
• 트리거가 발동되면, TextBlock의 2개의 속성 값을 변경합니다.

Binding이 어려운 분들을 위한 팁

Xaml에서 커서를 DataTrigger로 이동합니다.

오른쪽 프로퍼티 창에 Binding 이란 속성 오른쪽 끝에 원통 아이콘을 클릭합니다.

데이터 바인딩을 쉽게 만들어주는 창이 출력됩니다. 

이 창을 이용해서 바인딩을 만들면 훨씬 빠르고 쉽게 만들 수 있습니다.

창 이미지와 아래 내용이 서로 연결되는 것을 알 수 있습니다.

옛날에 저도 이 방법으로 대부분 바인딩 만들어서 사용했습니다. ㅎㅎㅎㅎ

DisplayMemberPath를 지우고, ItemTemplate를 연결합니다.

실행

5. 소스

WpfTest/TriggerSample1 at master · kaki104/WpfTest (github.com)

GitHub - kaki104/WpfTest

[재우니]

많이 활용될 부분 같네요.

[카키104]

ㅎㅎㅎWPF 개발 하시는 거에요?

[재우니]

여기 회사에선 사용 하지 않더라고요 ㅎㅎ