XAML UI 디자인 및 데이터 바인딩(View)을 WPF OpenCV 프로젝트에 이제 추가해 보도록 하겠습니다.
지난 포스팅에서 ViewModel(두뇌)과 Model(심장)을 모두 구현했습니다. 이제 마지막 퍼즐인 View(얼굴)를 만들 차례입니다. 이번 시간에는 MainWindow.xaml을 작성하여 사용자가 이미지를 보고 조작할 수 있는 UI를 구성하고, MVVM 패턴의 꽃이라 할 수 있는 데이터 바인딩(Data Binding)이 어떻게 이루어지는지 자세히 알아보겠습니다.
XAML UI 레이아웃 구상
먼저 우리가 만들 프로그램의 모습을 상상해 볼 수 있나요?
이번 포스팅 까지 정상적으로 따라 한다면 아마도, 아래의 이미지처럼 WPF OpenCV 프로젝트 UI 실행 화면이 보일 겁니다.
전체 화면을 크게 두 부분으로 나눕니다.
- 왼쪽 (Main Area): 불러온 이미지나 영상처리가 된 결과물을 보여주는
ImageView영역입니다. - 오른쪽 (Control Panel): 이미지를 불러오는 버튼, 알고리즘 목록(
ListBox), 그리고 세부 파라미터를 조절하는Slider등이 위치합니다.
MainWindow.xaml 전체 코드
이제 코드를 작성해 보겠습니다. MainWindow.xaml 파일을 열고 아래 코드를 그대로 붙여넣으세요. (코드가 길어 보이지만, 디자인과 로직 연결을 위한 핵심 내용들이 담겨 있습니다.)
<Window x:Class="Vision_OpenCV_App.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:Vision_OpenCV_App"
mc:Ignorable="d"
Title="WPF OpenCV Project" Height="600" Width="1000">
<Window.Resources>
<DataTemplate DataType="{x:Type local:ThresholdParams}">
<StackPanel>
<TextBlock Text="Threshold Range" Margin="0,0,0,5" FontWeight="Bold"/>
<TextBlock Text="Min Value" Margin="0,5,0,0"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Slider Grid.Column="0" Maximum="255" Minimum="0" Value="{Binding ThresholdValue}" VerticalAlignment="Center" />
<TextBox Grid.Column="1" Text="{Binding ThresholdValue}" Margin="5,0,0,0" TextAlignment="Center" />
</Grid>
<TextBlock Text="Max Value" Margin="0,5,0,0"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Slider Grid.Column="0" Minimum="0" Maximum="255" Value="{Binding ThresholdMax}" VerticalAlignment="Center" />
<TextBox Grid.Column="1" Text="{Binding ThresholdMax}" Margin="5,0,0,0" TextAlignment="Center" />
</Grid>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type local:AlgorithmParameters}">
<TextBlock Text="설정 가능한 속성이 없습니다." Foreground="Gray" FontStyle="Italic" />
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid Background="#F0F0F0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="320"/> </Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,5">
<CheckBox Content="Original Image Show" IsChecked="{Binding ShowOriginal}"
FontWeight="Bold" FontSize="14" VerticalAlignment="Center" />
</StackPanel>
<Image Grid.Row="1" x:Name="ImgView" Source="{Binding DisplayImage}" Stretch="Uniform"/>
</Grid>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" VerticalAlignment="Stretch"
Background="#FFBBBBBB" ShowsPreview="True" ResizeBehavior="PreviousAndNext" />
<Grid Grid.Column="2" Margin="0,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="이미지 선택 버튼" Grid.Row="0" Padding="5">
<Button Content="이미지 파일 열기" Command="{Binding LoadImageCommand}" Height="35" Margin="2"/>
</GroupBox>
<GroupBox Header="이미지 전처리 알고리즘 선택" Grid.Row="1" Margin="0,10,0,0" Padding="5">
<ListBox ItemsSource="{Binding AlgorithmList}" SelectedItem="{Binding SelectedAlgorithm}"/>
</GroupBox>
<GridSplitter Grid.Row="2" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Background="#FFBBBBBB" ShowsPreview="True" ResizeBehavior="PreviousAndNext" />
<GroupBox Header="알고리즘 속성 제어" Grid.Row="3" Margin="0,10,0,0" Padding="10" BorderBrush="#104E8B">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ContentControl Content="{Binding CurrentParameters}"/>
</ScrollViewer>
</GroupBox>
<Button Grid.Row="4" Content="적용 (Apply)" Command="{Binding ApplyAlgorithmCommand}"
Height="45" Margin="0,10,0,0" FontWeight="Bold" Background="#104E8B" Foreground="White"/>
</Grid>
</Grid>
</Window>핵심 코드 분석: MVVM의 마법
위 코드에서 눈여겨봐야 할 핵심 포인트 3가지를 짚어드립니다.
① Window.Resource & DataTemplate
MVVM에서는 UI가 데이터를 어떻게 보여 줄 지를 DataTemplate 으로 정의합니다. 코드를 보면 DataType="{x:Type local:ThresholdParams}"라는 부분이 있습니다. 이것은 “ViewModel이 ThresholdParams라는 데이터를 던져주면, 나는 Slider 2개와 TextBox 2개로 변신해서 보여줄 거야!”라고 미리 약속해 두는 설계도와 같습니다.
② Window.DataContext
이 부분은 “이 윈도우의 주인(데이터 원천)은 MainViewModel이다”라고 선언하는 부분입니다. 이렇게 선언해 두면, XAML 내부의 모든 컨트롤(Button, Image, TextBox 등)은 자동으로 MainViewModel의 속성들을 바라보게 됩니다. 이것이 바로 Binding이 동작하는 원리입니다.
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>③ MainWindow.xaml.cs
솔루션 탐색기에서 MainWindow.xaml.cs 파일을 열어보세요. 놀랍게도 코드가 거의 비어있을 것입니다.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// this.DataContext = new MainViewModel(); // XAML에서 이미 했으므로 필요 없음!
}
}전통적인 방식이라면 여기에 버튼 클릭 이벤트(Button_Click) 코드가 가득했겠지만, 우리는 XAML에서 Command와 Binding 으로 모든 연결을 끝냈기 때문에 C# 코드는 깨끗하게 유지됩니다. 이것이 MVVM 패턴의 가장 큰 장점인 유지/보수성 입니다.
🚀 실행 결과 확인
이제 F5를 눌러 프로그램을 실행해 볼까요?
- [이미지 파일 열기] 버튼을 눌러 임의의 사진을 불러옵니다.
- 오른쪽 목록에서 Threshold를 선택합니다.
- 아래 속성창에 슬라이더가 자동으로 나타납니다! (DataTemplate의 마법)
- 슬라이더를 조절하고 [적용] 버튼을 누르면 이진화(Binarization)된 이미지가 나타납니다.
이로써 WPF와 OpenCV를 연동한 영상 처리 프로젝트의 기본 골격이 완성되었습니다. 이제 WPF OpenCV 프로젝트에서 OpenCVService에 새로운 알고리즘(Canny Edge, Blur 등)을 추가하고, DataTemplate만 정의해주면 UI 수정 없이 기능을 무한히 확장할 수 있습니다.
다음 포스팅에서는 UI(View) 부분을 업데이트 해 보도록 하겠습니다.