[WPF] MVVM 패턴으로 WPF 시작하기 - 02 UI 구성 (Grid, ListView, StackPanel)

WPF 시리즈 포스팅을 진행하고 있습니다. 아래 링크를 클릭하시면 연관된 다른 포스트들을 보실 수 있습니다.

 

목록

1. MVVM 패턴으로 WPF 시작하기 - 01 프로젝트 만들기
2. MVVM 패턴으로 WPF 시작하기 - 03 ViewModel 구성
3. MVVM 패턴으로 WPF 시작하기 - 04 Textbox와 ComboBox
4. MVVM 패턴으로 WPF 시작하기 - 05 Converter
   

---

안녕하세요. 데브봉입니다.

오늘은 저번 시간에 이어 WPF 강의 2번째 UI 구성에 관하여 진행하도록 하겠습니다.

 

1. Grid

Grid Panel이라고도 불리며 열과 행으로 테이블 형태의 Layout을 제공합니다. WPF UI를 구성할 때 가장 기초적이며 가장 많이 사용합니다.

 

Row를 두개 만들어서 임직원 리스트와 선택한 임직원의 정보를 보여 주기 위해 RowDefinitions를 사용합니다.

<Window
    x:Class="MyFirstWPFApp.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:local="clr-namespace:MyFirstWPFApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
    </Grid>
</Window>

 

 

그러면 이렇게 두개로 나눠집니다!

 

 

 

2. ListView

ListView 컨트롤은 각각의 정보를 담고있는 List를 표현하기 위한 컨트롤입니다. 각 아이템들은 ListViewItem으로 표시합니다.

예로 전화번부, 인물 정보라든지 리스트를 표현해야될 때, 사용됩니다.

 

그럼 위 코드에 ListView를 추가해보도록 하겠습니다.

 

( * Binding에 대해서는 다음 장에서 설명하겠습니다)

<Window
    x:Class="MyFirstWPFApp.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:local="clr-namespace:MyFirstWPFApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView
            Grid.Row="0"
            DisplayMemberPath="Name"
            ItemsSource="{Binding People}"
            SelectedItem="{Binding SelectedPerson, Mode=TwoWay}">
        </ListView>
    </Grid>
</Window>

 

Grid.Row

- 로우 번호를 설정합니다. 두개의 로우로 나눴으니 첫번째 로우안에 리스트뷰를 넣겠습니다.

 

DisplayMemberPath

- ItemsSource로 바인딩된 뷰모델에서 어떤 속성을 UI에 표시할지 설정합니다. People로 바인딩된 ItemsSource에서 Name 속성을 보여지게 설정합니다.

 

ItemsSource

- ListView에 보여질 아이템의 소스를 설정합니다. 즉 뷰모델을 설정해주면 됩니다.

 

SelectedItem

- ListView에서 아이템이 선택되면 SeletedItem으로 가게 됩니다. 그때 사용될 뷰모델을 설정합니다.

 

 

나중에 데이터가 들어오면 이런 식으로 ListView가 만들어지게 됩니다.

 

 

 

3. StackPanel

StackPanel은 UI control을 가로를 쭈욱, 세로를 쭈욱 Stack처럼 줄줄이 늘어놓을 수 있게 만들 수 있는 Panel입니다. 한마디로 줄줄이 사탕처럼 말이죠.

 

마지막 부분은 TextBlock 3개를 가로로 늘여놓도록 하겠습니다.

<Window
    x:Class="MyFirstWPFApp.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:local="clr-namespace:MyFirstWPFApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView
            Grid.Row="0"
            DisplayMemberPath="Name"
            ItemsSource="{Binding People}"
            SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" />
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <TextBlock Margin="5" Text="{Binding SelectedPerson.Id}" />
            <TextBlock Margin="5" Text="{Binding SelectedPerson.Name}" />
            <TextBlock Margin="5" Text="{Binding SelectedPerson.Gender}" />
        </StackPanel>
    </Grid>
</Window>

---

이번 포스트는 MVVM 패턴의 뼈대가 되는 UI 구성을 다루어 봤습니다. 다음 시간에는 ViewModel을 구성하여 데이터를 바인딩 해보도록 하겠습니다.