XAML or HTML

006. 클래스와 데이타템플릿(Class & DataTemplate)

XAML 뽀개기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class Person
{
    public string RealName { get; set; }
    public int Age { get; set; }
}
 
public class Family : List<Person>
{
    public Family()
    {
        Add(new Person() { RealName = "길동", Age = 40 });
        Add(new Person() { RealName = "철수", Age = 30 });
        Add(new Person() { RealName = "영희", Age = 20 });
    }
}
cs

 

목록형의 아이템 구성은 예제처럼 간단하지 않고 복잡할 있습니다. 하지만 복잡한 구성일지라도 Class 이용해 표현 가능합니다.

 

1
2
3
4
5
6
<DataTemplate x:Key="DataTemplate_ListBoxItem">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding RealName}" Margin="0,0,10,0"/>
        <TextBlock Text="{Binding Age}"/>
    </StackPanel>
</DataTemplate>
cs

 

XAML에서 목록형의 아이템 템플릿은 Class 구성에 맞추어 DataTemplate에서 정의합니다.

 

 

결과는 위와 같습니다.

 

1
2
3
4
5
6
7
8
9
10
<Grid.Resources>
    <x:Array x:Key="Peoples" Type="{x:Type local:Person}">
        <local:Person RealName="홍길동" Age="40"/>
        <local:Person RealName="박철수" Age="30"/>
        <local:Person RealName="김영희" Age="20"/>
    </x:Array>
 
    <local:Family x:Key="Family"/>
</Grid.Resources>
 
cs

 

Class에서 정의한 모델은 리소스에 정의한 XAML 안에서 사용할 있습니다.

 

1
2
3
4
5
6
<ListBox ItemsSource="{Binding Source={StaticResource Peoples}}" 
         ItemTemplate="{DynamicResource DataTemplate_ListBoxItem}"/>
 
<ListBox ItemsSource="{Binding Source={StaticResource Family}}" 
         ItemTemplate="{DynamicResource DataTemplate_ListBoxItem}" 
         Grid.Column="1"/>
cs

 

이전에 정의한 Class DataTemplate 위와 같이 정의합니다.

 

1
2
3
4
5
6
7
8
9
10
<ListBox ItemTemplate="{DynamicResource DataTemplate_ListBoxItem}" 
         Grid.Column="2">
    <ListBox.ItemsSource>
        <x:Array Type="{x:Type local:Person}">
            <local:Person RealName="홍길동" Age="40"/>
            <local:Person RealName="박철수" Age="30"/>
            <local:Person RealName="김영희" Age="20"/>
        </x:Array>
    </ListBox.ItemsSource>
</ListBox>
cs

 

이전 포스트에서도 다루었지만 목록형의 ItemsSource는 위와 같이 정의할 있습니다.


 

 

1
2
3
<ListBox ItemsSource="{Binding Source={StaticResource Family}}" 
         DisplayMemberPath="RealName"
         Grid.Column="3"/>
cs

 

DataTemplate 정의할 필요가 없을 때에는 DisplayMemberPath 속성을 이용해 간단히 목록을 표현할 있습니다.



샘플 코드 : https://github.com/CharlesKwon/XamlSimplified