[WPF] Data Template WPF 2012. 3. 14. 17:06

데이터 템플릿은 객체가 렌더링 될 시 적용가능한 UI의 한 부분으로 DataTemplate타입의 속성(Property)를  가지고 있다.

다음은 그 예제 이다. 먼저 cs 파일을 보자

using System.Collections.ObjectModel;

namespace WpfApplication5
{
    /// <summary>
    /// Window1.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class Window1 : Window
    {
        private string company = string.Empty;
        public string m_company
        {
            get
            {
                return company;
            }
            set
            {
                company = value;
            }
        }

        private string name = string.Empty;
        public string m_name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
            }
        }

        public Window1() : this("company", "name") { }

        public Window1(string company, string name)
        {
            //InitializeComponent();
            this.company = company;
            this.name = name;
        }
    }

    public class datas : ObservableCollection<Window1> { }

단순하게 객체 하나에 ObservableCollection에 모두 집어 넣는다는 것을 감을 잡을 수 있다.

다음은 XAML 코드이다.

<Window x:Class="WpfApplication5.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cs="clr-namespace:WpfApplication5"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <cs:datas x:Key="list">
            <cs:Window1 m_company="1번회사" m_name="first"/>
            <cs:Window1 m_company="2번회사" m_name="second"/>
            <cs:Window1 m_company="3번회사" m_name="third"/>
        </cs:datas>
    </Window.Resources>

    <StackPanel DataContext="{StaticResource list}" >
        <TextBlock Name="blah" FontSize="20" Margin="10,0,0,0"  Text="Company List:"/>
        <ListBox Width="260" Margin="10" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock>
                    <TextBlock Text="{Binding Path=m_company}" />
                    <TextBlock Text=" : " />
                    <TextBlock Text="{Binding Path=m_name}" />
                  </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>       
    </StackPanel>
</Window>

위에서 보면 리소스에 하나의 데이터 집합들이 있음을 볼 수 있다.

그리고 StackPanel 쪽에서 보면 DataContext를 위의 리소스 상의 키 값으로 물려주고 리스트 박스 쪽에 바인딩을 시켜 그 내용을 볼 수 있음을 확인 할 수 있다.

조금 응용을 해서 좀 더 이쁘게 보이려면 다음과 같이 하면 된다.

<DataTemplate>
       <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
              <Grid>
                            <Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions>
                            <Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="Company:"/>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=m_company}" />
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="Name:"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=m_name}"/>
              </Grid>
       </Border>
</DataTemplate>