[WPF] 변환기

WPF의 변환기(Converter)는 데이터 바인딩 시 데이터를 변환하여 UI에서 표시할 수 있도록 돕는 기능입니다. 변환기는 주로 IValueConverter 인터페이스를 구현하여 데이터의 형식이나 값을 변환할 수 있습니다. 예를 들어, bool 값을 Visibility 값으로 변환하여 UI의 가시성을 제어할 수 있습니다.

변환기의 개념

IValueConverter 인터페이스: 두 개의 메서드, Convert와 ConvertBack를 제공합니다.
- Convert: 소스 데이터를 대상 유형으로 변환할 때 사용됩니다.
- ConvertBack: 대상 데이터를 소스 유형으로 변환할 때 사용됩니다(양방향 바인딩 시 필요).
변환기는 바인딩된 데이터를 변형하거나 특정한 형식으로 변환해 UI 요소에 표시할 수 있습니다.

예제 코드 설명

이 예제에서는 BoolToVisibilityConverter를 사용하여 bool 값을 Visibility 값으로 변환하고, 버튼의 가시성을 제어합니다. 버튼 클릭 시 상태 메시지가 업데이트되어 현재 버튼 상태를 확인할 수 있습니다.

1. BoolToVisibilityConverter.cs

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace WpfApp241112
{
    public class BoolToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is bool boolValue)
            {
                // bool 값이 true면 Visible, false면 Collapsed 반환
                return boolValue ? Visibility.Visible : Visibility.Collapsed;
            }
            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is Visibility visibility)
            {
                // Visible이면 true, 그 외는 false 반환
                return visibility == Visibility.Visible;
            }
            return false;
        }
    }
}

설명:

Convert 메서드: bool 값을 받아서 true이면 Visibility.Visible, false이면 Visibility.Collapsed를 반환합니다.
ConvertBack 메서드: Visibility 값을 bool 값으로 변환하며, 주로 양방향 바인딩에서 사용됩니다.

2. MainViewModel.cs

using System.ComponentModel;

namespace WpfApp241112
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private bool _isVisible;
        private string _statusMessage;

        public bool IsVisible
        {
            get { return _isVisible; }
            set
            {
                if (_isVisible != value)
                {
                    _isVisible = value;
                    OnPropertyChanged(nameof(IsVisible));
                    // IsVisible 변경 시 상태 메시지 업데이트
                    StatusMessage = _isVisible ? "Button is now Visible" : "Button is now Collapsed";
                }
            }
        }

        public string StatusMessage
        {
            get { return _statusMessage; }
            set
            {
                if (_statusMessage != value)
                {
                    _statusMessage = value;
                    OnPropertyChanged(nameof(StatusMessage));
                }
            }
        }

        public MainViewModel()
        {
            IsVisible = true; // 초기 상태 설정
            StatusMessage = "Button is now Visible"; // 초기 메시지 설정
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

설명:

IsVisible 속성은 UI에서 버튼의 가시성을 제어하는 bool 값입니다.
StatusMessage 속성은 UI에 상태 메시지를 표시하며, IsVisible이 변경될 때 업데이트됩니다.
INotifyPropertyChanged 인터페이스를 구현하여 속성 값 변경 시 UI가 업데이트됩니다.

3. MainWindow.xaml

<Window x:Class="WpfApp241112.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp241112"
        Title="Converter Example" Height="250" Width="400">
    <Window.Resources>
        <!-- 변환기를 리소스로 등록 -->
        <local:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <!-- IsVisible 속성을 변환기를 사용해 Visibility로 변환 -->
            <Button Content="Click Me" Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}" Width="100" Height="30" Margin="10"/>
            <!-- 상태 변경을 위한 버튼 -->
            <Button Content="Toggle Visibility" Click="ToggleVisibility_Click" Width="150" Height="30" Margin="10"/>
            <!-- 상태 메시지를 보여주는 TextBlock -->
            <TextBlock Text="{Binding StatusMessage}" FontSize="14" Margin="10" />
        </StackPanel>
    </Grid>
</Window>

설명:

BoolToVisibilityConverter는 StaticResource로 등록되어 사용됩니다.
첫 번째 버튼은 IsVisible 속성에 바인딩되고, 변환기를 통해 Visibility 값으로 변환되어 버튼의 가시성이 제어됩니다.
TextBlock은 StatusMessage 속성에 바인딩되어 현재 상태 메시지를 표시합니다.

4. MainWindow.xaml.cs

using System.Windows;

namespace WpfApp241112
{
    public partial class MainWindow : Window
    {
        private MainViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new MainViewModel();
            this.DataContext = _viewModel; // ViewModel을 DataContext로 설정
        }

        private void ToggleVisibility_Click(object sender, RoutedEventArgs e)
        {
            // IsVisible 값을 토글하여 UI 및 상태 메시지 갱신
            _viewModel.IsVisible = !_viewModel.IsVisible;
        }
    }
}

결과 사진

설명:

ToggleVisibility_Click 이벤트 핸들러는 IsVisible 속성을 토글하여 버튼의 가시성과 상태 메시지를 변경합니다.

최종 결과

Toggle Visibility 버튼을 클릭하면 IsVisible 값이 변경되며, 첫 번째 버튼의 가시성이 바뀌고 상태 메시지가 TextBlock에 업데이트됩니다.
변환기(BoolToVisibilityConverter)는 bool 값을 Visibility 값으로 변환하여 UI 요소의 표시를 제어합니다.

소프트웨어

변환기의 개념

예제 코드 설명

1. BoolToVisibilityConverter.cs

2. MainViewModel.cs

3. MainWindow.xaml

4. MainWindow.xaml.cs

최종 결과

[WPF] INotifiCollectionChanged

[WPF] 목록 컨트롤

You may also like

Leave a Comment Cancel Reply