DotNet
WPF
컨트롤과 사용자 정의 UI
Behavior의 개념과 활용

Behavior의 개념과 활용

WPFWindows Presentation Foundation에서 Behavior는 UI 요소(컨트롤, 패널, 윈도우 등)에 특정 동작을 캡슐화하여 재사용하고, 선언적으로 추가할 수 있도록 하는 강력한 기능입니다. Behavior를 통해 기존 컨트롤의 소스 코드를 수정하지 않고도 새로운 동작을 추가하고, 유지보수성과 확장성을 개선할 수 있습니다.

Behavior란?

Behavior는 Behavior<T> 클래스를 상속받아 구현하는 재사용 가능한 동작 단위입니다. 이때 T는 Behavior가 적용될 컨트롤의 타입을 명시합니다. 예를 들어, Behavior<Button>은 버튼에 대한 동작을 정의하는 Behavior를 의미합니다.

Behavior의 핵심 개념은 “기존 UI 요소에 새로운 기능을 주입"한다는 점입니다. 이를 통해 코드 수정 없이도 다음과 같은 작업이 가능합니다.

  • 컨트롤 이벤트 처리 로직 주입
  • 속성 변경 시 추가 동작 수행
  • 애니메이션, 명령Command 실행, 데이터 검증 로직 추가 등

이 모든 것을 Behavior 클래스 내부에 캡슐화함으로써 UI 로직을 깔끔하게 정리할 수 있습니다.

Behavior의 주요 특징

재사용성

한 번 작성한 Behavior를 여러 UI 요소에 손쉽게 재사용할 수 있습니다. 예를 들어, 특정 버튼 클릭 시 공통적으로 수행해야 할 로직이 있다면, Behavior로 한 번 정의하고 여러 버튼에 붙일 수 있습니다.

선언적 구성

일반적으로 Behavior는 XAML에서 <i:Interaction.Behaviors> 컬렉션 내에 선언적으로 추가할 수 있습니다. 이로써 코드 수정 없이도 XAML 레벨에서 동작을 확장하고 조정할 수 있습니다.

명확한 역할 분리

Behavior는 UI 요소의 추가 기능을 별도 클래스로 분리하므로, View나 ViewModel 코드가 복잡하게 얽히지 않고, 기능별로 명확하게 분리됩니다. 이는 MVVM 패턴과도 조화를 이루며, 유지보수성을 높여줍니다.

Behavior 기본 사용 예제

아래는 버튼 클릭 시 메시지 박스를 표시하는 간단한 Behavior 예제입니다.

using System.Windows;
using System.Windows.Controls;
using Microsoft.Xaml.Behaviors; // Microsoft.Xaml.Behaviors.Wpf 패키지 필요

public class MyBehavior : Behavior<Button>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.Click += OnButtonClick;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.Click -= OnButtonClick;
    }

    private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Button clicked!");
    }
}

XAML에서 이 Behavior를 Button에 추가하는 방법(Interaction 사용)

<Button Content="Click Me">
    <i:Interaction.Behaviors>
        <local:MyBehavior />
    </i:Interaction.Behaviors>
</Button>
  • 참고: Interaction은 Behavior를 추가하기 위한 편의 구조를 제공하지만, 반드시 사용해야 하는 것은 아니며, 코드 비하인드에서 직접 Behavior를 추가할 수도 있습니다.

Behavior와 확장 메서드의 유사점 및 차이점

Behavior는 개념적으로 기존 클래스를 수정하지 않고 기능을 추가한다는 점에서 C#의 확장 메서드Extension Method와 유사합니다. 둘 다 원본 코드를 변경하지 않고 기존 객체에 새로운 기능을 주입한다는 공통점이 있습니다. 그러나 Behavior는 UI 계층에 특화된 구조이며, XAML 상에서 선언적 추가가 가능하다는 점에서 차별화됩니다.

구분Behavior확장 메서드
적용 대상WPF UI 요소C# 클래스 일반
선언적 추가 가능O (XAML)X (코드에서만)
재사용성 및 분리도매우 높음높으나 UI 바인딩을 직접 처리해야 함
성능상 특성런타임 부착, 약간의 Reflection 오버헤드컴파일 타임 해석, 직접 호출

Behavior는 UI와 로직을 느슨하게 결합하면서도, XAML에서 선언적으로 제어할 수 있으므로 MVVM 패턴을 지원하는 WPF 애플리케이션에서 매우 유용합니다.

성능 고려 사항

Behavior는 컴파일 타임에 확장되지 않고, 런타임에 대상 컨트롤에 연결됩니다. 이 과정에서 Reflection이 사용되고, DependencyProperty 등록 등 약간의 초기화 오버헤드가 발생할 수 있습니다. 그러나 일반적인 WPF 애플리케이션에서 이 오버헤드는 미미한 편이며, 성능보다 재사용성과 코드 구조 개선이 중요한 경우 대부분 충분히 감수할 만한 수준입니다.

만약 대규모 UI 구성 요소에 매우 많은 Behavior를 동시에 적용한다면 초기 로딩 시 약간의 성능 저하가 발생할 수 있습니다. 이럴 때는 Behavior 개수를 조절하거나, 꼭 필요한 부분에서만 Behavior를 활용하는 식으로 조정할 수 있습니다.

Behavior 활용 전략

필요한 동작만 캡슐화

Behavior를 너무 세분화하면 오히려 관리가 힘들 수 있습니다. 하나의 Behavior에서 관련 있는 기능들을 묶어서 제공하고, 비슷한 패턴의 UI 동작들은 재사용하는 식으로 효율을 극대화할 수 있습니다.

MVVM 패턴과의 결합

Behavior 내부에서 ViewModel의 Command를 실행하거나, PropertyChanged 이벤트와 결합하는 등의 방식으로 MVVM 패턴에 자연스럽게 녹여낼 수 있습니다.

코드 비하인드 대신 Behavior

동작 로직을 코드 비하인드 파일에 직접 작성하면 UI 코드와 로직이 섞여 복잡해집니다. 이때 Behavior를 통해 UI 요소마다 필요한 동작을 모듈화하면 코드 품질과 유지보수성이 크게 향상됩니다.

활용

DependencyProperty와 Behavior 결합

Behavior에서 DependencyProperty를 활용하면 XAML 데이터 바인딩과 결합하여 강력한 확장성을 제공합니다.

예제: DependencyProperty를 활용한 동작 설정

버튼 클릭 시 다른 컨트롤의 속성을 변경하는 Behavior 예시입니다.

using System.Windows;
using System.Windows.Controls;
using Microsoft.Xaml.Behaviors;

public class ChangePropertyBehavior : Behavior<Button>
{
    public static readonly DependencyProperty TargetPropertyProperty =
        DependencyProperty.Register(
            nameof(TargetProperty),
            typeof(string),
            typeof(ChangePropertyBehavior),
            new PropertyMetadata(null));

    public static readonly DependencyProperty TargetControlProperty =
        DependencyProperty.Register(
            nameof(TargetControl),
            typeof(FrameworkElement),
            typeof(ChangePropertyBehavior),
            new PropertyMetadata(null));

    public string TargetProperty
    {
        get => (string)GetValue(TargetPropertyProperty);
        set => SetValue(TargetPropertyProperty, value);
    }

    public FrameworkElement TargetControl
    {
        get => (FrameworkElement)GetValue(TargetControlProperty);
        set => SetValue(TargetControlProperty, value);
    }

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.Click += OnButtonClick;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.Click -= OnButtonClick;
    }

    private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        if (TargetControl != null && !string.IsNullOrEmpty(TargetProperty))
        {
            TargetControl.SetValue(
                FrameworkElement.DataContextProperty,
                TargetProperty
            );
        }
    }
}
<Button Content="Change Text">
    <i:Interaction.Behaviors>
        <local:ChangePropertyBehavior 
            TargetControl="{Binding ElementName=TargetTextBox}" 
            TargetProperty="New Text" />
    </i:Interaction.Behaviors>
</Button>
<TextBox x:Name="TargetTextBox" Text="Original Text" />

이 코드는 버튼 클릭 시 TargetTextBox의 Text 속성을 변경합니다. DependencyProperty 덕분에 TargetControl과 TargetProperty를 XAML에서 데이터 바인딩할 수 있습니다.

Behavior로 애니메이션 처리

Behavior는 복잡한 애니메이션 로직을 캡슐화할 때도 매우 유용합니다.

예제: Fade-In/Fade-Out 애니메이션 

using System.Windows;
using System.Windows.Media.Animation;
using Microsoft.Xaml.Behaviors;

public class FadeBehavior : Behavior<FrameworkElement>
{
    public static readonly DependencyProperty IsVisibleProperty =
        DependencyProperty.Register(
            nameof(IsVisible),
            typeof(bool),
            typeof(FadeBehavior),
            new PropertyMetadata(false, OnIsVisibleChanged));

    public bool IsVisible
    {
        get => (bool)GetValue(IsVisibleProperty);
        set => SetValue(IsVisibleProperty, value);
    }

    private static void OnIsVisibleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is FadeBehavior behavior)
        {
            behavior.UpdateVisibility((bool)e.NewValue);
        }
    }

    private void UpdateVisibility(bool isVisible)
    {
        var animation = new DoubleAnimation
        {
            Duration = TimeSpan.FromSeconds(0.5),
            To = isVisible ? 1.0 : 0.0
        };

        AssociatedObject.BeginAnimation(UIElement.OpacityProperty, animation);

        if (isVisible)
        {
            AssociatedObject.Visibility = Visibility.Visible;
        }
        else
        {
            animation.Completed += (s, e) => AssociatedObject.Visibility = Visibility.Collapsed;
        }
    }
}
<Grid>
    <TextBlock Text="Hello World" Visibility="Visible">
        <i:Interaction.Behaviors>
            <local:FadeBehavior IsVisible="{Binding IsTextVisible}" />
        </i:Interaction.Behaviors>
    </TextBlock>
</Grid>

이 Behavior는 IsTextVisible 속성에 따라 TextBlock이 Fade-In 또는 Fade-Out 되도록 합니다.

Behavior로 MVVM Command 연결

Behavior를 통해 MVVM의 Command 패턴을 적용하면서도 이벤트에 바인딩할 수 있습니다.

예제: Behavior로 Command 실행 

using System.Windows.Input;
using Microsoft.Xaml.Behaviors;

public class CommandBehavior : Behavior<UIElement>
{
    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register(
            nameof(Command),
            typeof(ICommand),
            typeof(CommandBehavior),
            new PropertyMetadata(null));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.MouseLeftButtonDown += OnMouseLeftButtonDown;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.MouseLeftButtonDown -= OnMouseLeftButtonDown;
    }

    private void OnMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        Command?.Execute(null);
    }
}
<Grid>
    <Rectangle Fill="Blue" Width="100" Height="100">
        <i:Interaction.Behaviors>
            <local:CommandBehavior Command="{Binding RectangleClickCommand}" />
        </i:Interaction.Behaviors>
    </Rectangle>
</Grid>

이 코드는 RectangleClickCommand를 Rectangle의 클릭 이벤트에 바인딩합니다. Behavior를 사용하여 Command 실행을 이벤트와 연결하므로 코드 비하인드가 필요 없습니다.

동적 Behavior 추가

Behavior는 코드에서 동적으로 추가하거나 제거할 수 있습니다. 이는 런타임에 특정 조건에 따라 UI 동작을 제어하는 데 유용합니다.

예제: 동적 Behavior 추가/제거 

var button = new Button { Content = "Dynamic Behavior" };
var behavior = new MyBehavior();

Interaction.GetBehaviors(button).Add(behavior);

// 동작 제거
Interaction.GetBehaviors(button).Remove(behavior);

동적으로 추가된 Behavior는 필요할 때 제거할 수 있어 유연한 UI 동작 구성을 가능하게 합니다.

Behavior를 활용한 사용자 정의 Validation

Behavior는 데이터 검증 로직을 UI에 통합하는 데도 사용할 수 있습니다.

예제: 텍스트 입력 검증 Behavior 

using System.Windows.Controls;
using Microsoft.Xaml.Behaviors;

public class TextValidationBehavior : Behavior<TextBox>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.TextChanged += OnTextChanged;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.TextChanged -= OnTextChanged;
    }

    private void OnTextChanged(object sender, TextChangedEventArgs e)
    {
        if (AssociatedObject.Text.Length > 10)
        {
            AssociatedObject.Background = Brushes.Red;
        }
        else
        {
            AssociatedObject.Background = Brushes.White;
        }
    }
}
<TextBox Width="200">
    <i:Interaction.Behaviors>
        <local:TextValidationBehavior />
    </i:Interaction.Behaviors>
</TextBox>

이 Behavior는 텍스트 길이가 10자를 초과할 경우 텍스트 박스 배경을 빨간색으로 변경합니다.

맺음말

Behavior는 WPF 환경에서 UI 동작을 모듈화하고 재사용하며, 선언적으로 UI에 적용할 수 있는 유용한 도구입니다. 이를 통해 유지보수성을 높이고, MVVM 패턴의 장점을 극대화하는 동시에 코드 구조를 단순화할 수 있습니다. 비록 런타임 오버헤드가 약간 존재하지만, 일반적인 규모의 애플리케이션에서는 충분히 감수 가능한 수준이며, Behavior가 제공하는 코드 품질 향상 효과는 상당히 매력적입니다.

Buy me a coffee Buy me a coffee
Status Bar