WPF(Windows Presentation Foundation)는 .NET Framework를 기반으로 한 강력한 UI 프레임워크입니다. 특히
데스크톱 애플리케이션을 개발하는 데 적합한 플랫폼입니다. 이번 강좌에서는 WPF를 사용하여 제품 목록과
정보 세부사항을 표시하는 방법에 대해 자세히 알아보겠습니다. 이 강좌에서 배울 내용은 제품 데이터 바인딩,
MVVM(모델-뷰-뷰모델) 패턴 구현, XAML을 사용한 UI 디자인 등의 주제를 포함합니다.
1. 준비 작업
WPF 애플리케이션을 만들기 위해 우선 Visual Studio를 설치하고, 새로운 WPF 애플리케이션 프로젝트를 생성해야 합니다.
아래의 단계에 따라 새 프로젝트를 설정해 보겠습니다.
- Visual Studio를 실행합니다.
- 파일 메뉴에서
새로 만들기->프로젝트를 선택합니다. - 프로젝트 템플릿에서
WPF 앱 (.NET Core)또는WPF 앱 (.NET Framework)를 선택합니다. - 프로젝트 이름과 저장 경로를 지정한 후
만들기를 클릭합니다.
2. MVVM 패턴 이해하기
MVVM(Model-View-ViewModel) 패턴은 WPF에서 주로 사용되는 아키텍처 패턴으로, 사용자 인터페이스(UI)를
비즈니스 로직과 분리하여 관리하는 데 도움을 줍니다. 이 패턴의 세 가지 구성 요소는 다음과 같습니다:
- Model: 비즈니스 로직과 데이터.
- View: 사용자 인터페이스.
- ViewModel: View와 Model 간의 중재자 역할.
이 강좌에서는 간단한 제품 정보 애플리케이션을 만들며 MVVM 패턴을 적용할 것입니다.
3. 데이터 모델 생성
먼저, 제품 정보를 담을 Product 클래스를 만들어 보겠습니다. 이 클래스는 제품의 이름, 가격,
설명 등을 속성으로 가집니다.
using System.ComponentModel;
public class Product : INotifyPropertyChanged
{
private string _name;
private decimal _price;
private string _description;
public string Name
{
get => _name;
set
{
_name = value;
OnPropertyChanged(nameof(Name));
}
}
public decimal Price
{
get => _price;
set
{
_price = value;
OnPropertyChanged(nameof(Price));
}
}
public string Description
{
get => _description;
set
{
_description = value;
OnPropertyChanged(nameof(Description));
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
위의 코드는 INotifyPropertyChanged 인터페이스를 구현하여 속성이 변경될 때 통지를
받을 수 있도록 합니다. 이는 데이터 바인딩에 유용합니다.
4. ViewModel 생성
다음으로, ProductViewModel 클래스를 생성하여 제품 목록을 관리하는 로직을 구현합니다.
이 ViewModel은 제품의 목록을 포함하고 있으며, 사용자가 선택한 제품의 세부 정보를 표시합니다.
using System.Collections.ObjectModel;
using System.Windows.Input;
public class ProductViewModel : INotifyPropertyChanged
{
private Product _selectedProduct;
public ObservableCollection<Product> Products { get; }
public Product SelectedProduct
{
get => _selectedProduct;
set
{
_selectedProduct = value;
OnPropertyChanged(nameof(SelectedProduct));
}
}
public ProductViewModel()
{
Products = new ObservableCollection<Product>
{
new Product { Name = "노트북", Price = 1200000, Description = "고성능 노트북입니다." },
new Product { Name = "스마트폰", Price = 800000, Description = "최신 스마트폰입니다." },
new Product { Name = "태블릿", Price = 500000, Description = "휴대성이 뛰어난 태블릿입니다." }
};
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
여기서는 ObservableCollection<Product>을 사용하여 제품 목록을 관리합니다.
ObservableCollection은 컬렉션이 변경될 때 UI에 자동으로 반영합니다.
5. XAML을 활용한 UI 디자인
이제 XAML을 이용해 사용자 인터페이스를 디자인해 보겠습니다. 아까 생성한
ProductViewModel와 데이터 바인딩하여 UI를 구성합니다.
<Window x:Class="ProductApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="제품 목록" Height="350" Width="525">
<Window.DataContext>
<local:ProductViewModel />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding Products}"
SelectedItem="{Binding SelectedProduct}"
DisplayMemberPath="Name"
Margin="10" />
<StackPanel Grid.Column="1" Margin="10">
<TextBlock Text="제품명:" FontWeight="Bold"/>
<TextBlock Text="{Binding SelectedProduct.Name}" />
<TextBlock Text="가격:" FontWeight="Bold"/>
<TextBlock Text="{Binding SelectedProduct.Price, StringFormat={}{0:C}}" />
<TextBlock Text="설명:" FontWeight="Bold"/>
<TextBlock Text="{Binding SelectedProduct.Description}" TextWrapping="Wrap" />
</StackPanel>
</Grid>
</Window>
위의 XAML 코드에서는 기본적인 레이아웃을 구성하고 ListBox를 사용하여 제품 목록을 표시합니다.
사용자가 ListBox에서 제품을 선택하면 선택한 제품의 세부 정보가 오른쪽 영역에 나타납니다.
6. 애플리케이션 실행 및 결과 확인
모든 코드 작성이 완료되었으므로 애플리케이션을 실행하여 결과를 확인해 보겠습니다.
F5 키를 눌러 디버깅 모드로 실행하면 아래와 같은 UI를 확인할 수 있습니다.
7. 결론
이번 강좌에서는 WPF를 사용하여 간단한 제품 목록 및 세부 정보 애플리케이션을 만들었습니다.
MVVM 패턴을 적용하여 Model, View, ViewModel을 분리함으로써 코드의 가독성과 유지보수성을 높였습니다.
WPF의 데이터 바인딩 기능을 활용하여 사용자 인터페이스와 비즈니스 로직 간의 연결을 수월하게 구현할 수 있었습니다.
이 강좌를 통해 WPF의 기본적인 데이터 바인딩 및 MVVM에 대한 이해를 높일 수 있었기를 바랍니다.
앞으로 더욱 복잡하고 다양한 WPF 애플리케이션을 개발해 나가시길 바랍니다.
WPF의 다양한 기능을 활용하여 더욱 매력적인 사용자 인터페이스를 구현하세요!