연습: 데이터 기반 동적 레이아웃 만들기

아티클
08/10/2011

WPF(Windows Presentation Foundation)에서는 데이터 기반 동적 레이아웃을 지원하는 컨트롤을 제공합니다. WPF Designer for Visual Studio에서 이러한 컨트롤을 사용하면 손쉽게 데이터 기반 동적 레이아웃을 만들 수 있습니다. 응용 프로그램에서 다음과 같은 컨트롤을 사용할 수 있습니다.

ListView 컨트롤은 데이터 항목 집합을 다양한 레이아웃으로 표시하기 위한 인프라를 제공합니다. 일반적으로 GridView와 ListView 컨트롤을 함께 사용하여 열에 데이터를 표시합니다. 자세한 내용은 ListView 개요 및 GridView 개요를 참조하십시오.

이 연습에서는 다음 작업을 수행합니다.

데이터 소스를 준비합니다.
WPF 응용 프로그램을 만듭니다.
기본 Grid 패널 컨트롤을 구성합니다.
ListView 컨트롤을 추가 및 구성합니다.
XAML에 GridView를 추가 및 구성합니다.
Button 컨트롤을 추가 및 구성합니다.
데이터 바인딩 코드를 추가합니다.
응용 프로그램을 테스트합니다.

다음 그림에서는 응용 프로그램의 모양을 보여 줍니다.

데이터 기반 동적 레이아웃

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2010

데이터 소스 준비

이 연습에서는 바인딩할 샘플 데이터 소스가 필요합니다. 이를 위해 간단한 CSV 파일 데이터 소스를 만듭니다.

데이터 소스를 준비하려면

새 폴더를 만들고 이름을 Data로 지정합니다.
Data 폴더에 새 텍스트 파일을 만들고 이름을 employees.csv로 지정합니다.

참고

메모장 등의 모든 텍스트 편집기를 사용하여 파일을 만들 수 있습니다.

텍스트 파일에 다음을 추가합니다.

LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

파일을 저장한 후 닫습니다.

팁

파일을 Excel에서 열어 쉼표로 구분된 데이터가 개별 열에 표시되는지 확인할 수 있습니다.
Data 폴더에 새 텍스트 파일을 만들고 이름을 schema.ini로 지정합니다. 스키마 파일은 데이터 폴더의 텍스트 파일 형식을 설명합니다.
텍스트 파일에 다음을 추가합니다.
```
[employees.csv]
Format=CSVDelimited
ColNameHeader=True
```
팁

이 연습에서는 CSV 파일에 열 머리글이 있습니다. 열 머리글이 없는 CSV 파일에 바인딩하려면 ColNameHeader=True를 ColNameHeader=False로 변경합니다.
파일을 저장한 후 닫습니다.

프로젝트 만들기

다음은 응용 프로그램에 대한 Visual Studio 프로젝트를 만드는 절차입니다.

프로젝트를 만들려면

Visual Basic 또는 Visual C#에서 DataDrivenLayout이라는 새 WPF 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 WPF 응용 프로그램 프로젝트 만들기를 참조하십시오.

WPF Designer에 MainWindow.xaml이 열립니다.
파일 메뉴에서 모두 저장을 클릭합니다.

기본 모눈 패널 컨트롤 구성

기본적으로 새 WPF 응용 프로그램에는 Grid 패널을 사용하는 Window가 들어 있습니다. 이 절차에서는 모눈에 두 행을 추가합니다. 행 중 하나는 크기가 내용에 맞게 조정되도록 높이를 Auto로 설정합니다. 다른 행에는 사용 가능한 나머지 높이가 사용되도록 높이를 *로 설정합니다.

기본 모눈 패널 컨트롤을 구성하려면

디자인 뷰에서 Grid를 선택합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.
속성 창에서 RowDefinitions 속성을 찾고 해당 속성 값 열에 있는 줄임표 단추를 클릭합니다.

컬렉션 편집기가 나타납니다.
추가를 두 번 클릭하여 두 행을 추가합니다.
첫 번째 행의 Height 속성을 *로 설정합니다.
두 번째 행의 Height 속성을 Auto로 설정합니다.
확인을 클릭하여 컬렉션 편집기를 닫고 WPF Designer로 돌아갑니다.

이제 모눈에 행이 두 개 있지만 한 행만 표시됩니다. Height 속성이 Auto로 설정된 행은 내용이 없으므로 일시적으로 숨겨집니다. 이 연습에서는 이러한 결과가 정상입니다. 나중에 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.
파일 메뉴에서 모두 저장을 클릭합니다.

ListView 추가 및 구성

이 절차에서는 ListView를 추가합니다. 또한 코드 숨김 파일에서 참조할 수 있도록 ListView에 이름을 지정하고 해당 레이아웃 속성을 구성합니다.

ListView를 추가 및 구성하려면

디자인 뷰에서 Grid를 선택합니다.
도구 상자의 컨트롤 그룹에서 ListView 컨트롤을 Grid로 끌어 옵니다.

속성 창에서 ListView에 대해 다음 속성을 설정합니다.

Property	값
Name	lvEmployees
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

파일 메뉴에서 모두 저장을 클릭합니다.

GridView 추가 및 구성

이 절차에서는 세 열이 있는 GridView를 추가하여 텍스트 파일의 데이터를 표시합니다. 또한 코드 숨김 파일에서 열을 참조하여 개별적으로 데이터를 바인딩할 수 있도록 열에 이름을 지정합니다. 자세한 내용은 방법: GridView를 사용하여 ListView 콘텐츠 표시를 참조하십시오.

GridView를 추가 및 구성하려면

XAML 편집기에서 ListView 요소를 찾습니다. 이 코드는 다음과 같습니다.
```
<ListView <ATTRIBUTES> />
```
팁

XAML 뷰에서 요소를 손쉽게 강조 표시하려면 디자인 뷰에서 컨트롤을 클릭하거나 문서 개요 창을 사용합니다.

ListView 요소를 다음과 같이 바꿉니다.

<ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

파일 메뉴에서 모두 저장을 클릭합니다.

단추 추가 및 구성

이 절차에서는 Button을 추가하고 해당 Click 이벤트를 지정합니다.

단추를 추가 및 구성하려면

디자인 뷰에서 Grid를 선택합니다.

팁

ListView가 Grid를 가리고 있으므로 Grid를 선택하기가 어려울 수 있습니다. Tab 키 또는 문서 개요 창을 사용하여 Grid를 선택할 수 있습니다.
도구 상자의 컨트롤 그룹에서 Button 컨트롤을 Grid로 끌어 옵니다.

속성 창에서 Button에 대해 다음 속성을 설정합니다.

Property	값
Name	btnGetData
Content	Get Data
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Width	75
Height	23
HorizontalAlignment	Right
VerticalAlignment	Bottom
Margin	5

XAML 편집기에서 Button 요소를 찾습니다. 이 요소는 다음과 같습니다.
```
<Button <ATTRIBUTES>>Button</Button>
```
팁

XAML 뷰에서 요소를 손쉽게 강조 표시하려면 디자인 뷰에서 컨트롤을 클릭하거나 문서 개요 창을 사용합니다.
XAML을 편집하여 Click 이벤트 특성을 추가합니다. 코드가 다음과 같아야 합니다.
```
<Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>
```
파일 메뉴에서 모두 저장을 클릭합니다.

데이터 바인딩 코드 추가

이 절차에서는 Button의 Click 이벤트에 대한 코드를 추가합니다. 런타임에 단추를 클릭하면 데이터를 가져와서 ListView 및 GridView에 바인딩하게 됩니다.

데이터 바인딩 코드를 추가하려면

프로젝트에 대해 선택한 언어에 따른 코드 숨김 파일(MainWindow.xaml.cs 또는 MainWindow.xaml.vb)을 엽니다.

코드 편집기 맨 위에 다음 코드를 추가합니다. 데이터에 바인딩하려면 System.Data 및 System.Data.OleDb 네임스페이스에 액세스해야 합니다.

Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

MainWindow 클래스에 다음 코드를 추가합니다. DataTable을 사용하여 데이터를 저장합니다.
```
Dim dtEmployees As DataTable
```
```
DataTable dtEmployees;
```

MainWindow 클래스에 다음 코드를 추가합니다. 사용자가 단추를 클릭하면 데이터를 가져와서 ListView에 바인딩합니다.

Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

MainWindow 클래스에 다음 코드를 추가하고 데이터 폴더에 대한 경로를 지정합니다. 데이터를 가져오려면 OleDbDataAdapter를 사용합니다.

Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

MainWindow 클래스에 다음 코드를 추가합니다. ListView에 데이터를 바인딩하려면 해당 DataContext를 DataTable로 설정합니다. 데이터 열은 GridView의 열에 표시합니다.

Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

파일 메뉴에서 모두 저장을 클릭합니다.

창 크기가 동적으로 조정되도록 설정

SizeToContent 속성은 내용의 크기가 변경될 때 Window의 크기가 변경되는 방식을 지정합니다. 기본적으로 이 속성은 Manual로 설정되며, 이 경우 사용자가 창의 크기를 내용에 맞게 직접 조정할 수 있습니다. 이 절차에서는 이 속성을 WidthAndHeight로 설정하며, 이 경우 내용이 변경될 때 창의 크기가 동적으로 조정됩니다.

창 크기가 동적으로 조정되도록 설정하려면

디자이너에서 MainWindow.xaml을 엽니다.
디자인 뷰에서 Window를 선택합니다.
속성 창에서 Window에 대해 다음 속성을 설정합니다.

Property

값

SizeToContent

WidthAndHeight

Width

Auto

Height

Auto
파일 메뉴에서 모두 저장을 클릭합니다.

Property	값
SizeToContent	WidthAndHeight
Width	Auto
Height	Auto

응용 프로그램 테스트

응용 프로그램을 테스트하려면

디버그 메뉴에서 디버깅 시작을 클릭합니다.

응용 프로그램이 시작되고 창이 열립니다. SizeToContent 속성을 WidthAndHeight로 설정하기 전에는 창이 GridView 머리글 및 Button을 포함할 수 있을 정도로만 큽니다.
Get Data를 클릭합니다.

응용 프로그램에서 데이터를 가져와서 GridView에 바인딩합니다. GridView, ListView 및 Window의 크기가 새 콘텐츠에 맞게 동적으로 모두 조정됩니다.
창을 닫습니다.

종합

완성된 MainWindow.xaml 파일은 다음과 같습니다.

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

다음 단계

이 연습에서는 세 열이 있는 GridView를 사용하여 데이터를 표시했습니다. 데이터를 각 열에 개별적으로 직접 바인딩했습니다. 데이터 템플릿을 사용하여 ListView 또는 GridView의 데이터를 정렬하고 스타일을 지정할 수도 있습니다. 자세한 내용은 데이터 템플릿 개요를 참조하십시오.

이 연습에서 데이터 템플릿을 사용해 볼 수도 있습니다. 예를 들어 다음과 같은 템플릿을 만들 수 있습니다.

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

그런 다음 다음과 같은 코드를 사용하여 GridView에 데이터 템플릿을 사용할 수 있습니다.

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

코드 숨김 파일에서 다음 코드를 제거하거나 주석 처리합니다.

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

참고 항목

다음을 통해 공유