이번에는,
Silverlight listbox 라는 컨트롤과 datatemplate 그리고 itemtemplate 대해서 한번 공부해 봅시다.


훈즈 닷넷 세미나에서 오일석님이 발표 해주신 데이터 바인딩 완전 정복 세션을 듣고
나름 대로 공부해서 올리는 것입니다.

세미나를 들을 당시에는 이해가 안되는게 있었는데 직접 자료 받아서 하나씩 하니까 이해가 되네요 ~~  후후~~



먼저 listbox라는 컨트롤을 한번 알아 보도록 하는게 좋을 것 같습니다. 

        <ListBox HorizontalAlignment="Center" VerticalAlignment="Center">
            <ListBoxItem Content="ListBoxItem 0"/>
            <ListBoxItem Content="ListBoxItem 1"/>
            <ListBoxItem Content="ListBoxItem 2"/>
        </ListBox>

위의 같은 ListBox 컨트롤의 결과는 다음과 같습니다.



평범 하게 ListBox라는 컨트롤 안에 ListBoxItem이라는 것을 추가 하니 위와 같이 나오는 것 같습니다.


위와 같은 식으로 데이터를 표현하는 방식이 필요하면 위의 예제와 같이 ListBox를 사용하면 될 것입니다.
하지만, 일반적으로 데이터를 표현하는 방식에 있어서 우리는 이미지도 들어가고 제목이나, 등록일 등 과
같은 여러가지 텍스트 정보도 들어가기 원할 수도 있습니다.

바로 다음과 같이 ListBox 컨트롤의 list 들이 표현되길 원할 수 있습니다.



위와 같이 ListBox안에 들어가는 list 들을 일반적인 형태가 아닌 이미지나, 텍스트등의 조합으로 데이터를 표현할때
사용하는 것이 바로 datatemplate와 itemtemplate 입니다.


위의 ListBox 의 xaml 코드는 다음과 같습니다.

<Grid>
        <ListBox HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="listbox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Image}"/>
                        <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>
</Grid>

눈여겨 볼 곳은 <ListBox.ItemTemplate></ListBox.ItemTemplate> 부분입니다.
우리는 <ListBox.ItemTemplate></ListBox.ItemTemplate> 태그 안의 <DataTemplate></DataTemplate>
부분을 통해서 데이터 표현의 렌더링을 제어 할 수 있는 것입니다.
즉, 이 부분의 UI 정의로 인해서 ListBox 라는 컨트롤안에 Image와 TextBlock 이라는 컨트롤을 하나로 묶어
ListBox의 각각의 list로 들어 갈 수 있도록 한 것입니다.

이렇게 데이터 표현의 랜더링을 제어하는 방법이 바로 DataTemplate 이고
이 DataTemplate을 만들어서 ItemTemplate에 연결하고, 연결된 ItemTemplate을 사용하여
개별 아이템을 렌더링 할 수 있게 된 것입니다.

여기서 하나더 살펴 볼 것은 바로 바인딩 인데 위의 코드를 보면 Image와 TextBlocl 컨트롤에 각각
Image와 Name이 바인딩 된 것을 볼 수 있습니다.
ListBox 컨트롤의 바인딩은 DataContext와 마찬가지로 ListBox 컨트롤의 ItemsSource 속성에
바인딩할 소스 설정을 하면 된다.
예제 에서는 다음과 같습니다.

listbox.ItemsSource = list;

List<Products>로 만든 바인딩 소스를 ListBox의 ItemsSource에 설정 하면 되는 것입니다.

예제 소스는 다음과 같습니다.




이 번에는 약간 아주 약간 다른 예제를 한번 더 해보죠~~
먼저 실행 결과는 다음과 같습니다.



실행 결과를 보면 ListBox에 들어가는 list 들의 UI 배치만 약간 달라졌습니다.
이런 것들은 그때 그때 Expression Blend를 사용하여 그려 주면 됩니다.

이 소스에서 살펴 볼 것은 <ListBox> 컨트롤 안에 들어가는 <ListBox.ItemTemplate>와 <DataTemplate>를
<ListBox>와 분리 시켰다는 것이다.
다음 소스와 같이 분리 시켰습니다.


 <UserControl.Resources>
       
        <DataTemplate x:Key="booklistTemplate">
          
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.33*"/>
                    <RowDefinition Height="0.33*"/>

                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30*"/>
                    <ColumnDefinition Width="70*"/>
                </Grid.ColumnDefinitions>
                <Image Margin="2,2,2,2" x:Name="image" Grid.RowSpan="3" Grid.ColumnSpan="1" Source="{Binding Image}" Stretch="UniformToFill" Width="50" Height="60" />
                <TextBlock Margin="2,2,2,2" Grid.Column="1" Text="{Binding Name}" TextWrapping="Wrap" FontSize="11" x:Name="txtTitle" VerticalAlignment="Center" Foreground="#FF272727"/>
                <TextBlock Height="Auto" Margin="2,2,2,2" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Text="{Binding Date}" TextWrapping="Wrap" FontSize="11" x:Name="txtUploader" Foreground="#FF474747"/>

            </Grid>
        </DataTemplate>
       
       
    </UserControl.Resources>


<UserControl.Resources> 라는 태그를 이용해 <ListBox>안에서 사용할 <DataTemplate>를 정의 하였습니다.
그리고 사용을 위해서 다음과 같이 <ListBox> 컨트롤을 정의 하였습니다.


<ListBox ItemTemplate="{StaticResource booklistTemplate}" Margin="24,212,16,8" d:LayoutOverrides="VerticalAlignment" x:Name="booklist"/>

위 정의에서 알 수 있듯이 ListBox의 ItemTemplate 속성에 <UserControl.Resources>에서 정의한 <DataTemplate> 를 사용 하였습니다.

이 예제의 소스는 다음과 같습니다.


왠지 저도 완벽하게 이해를 못한것 같네요 ㅎㅎㅎ
그래서 설명이 좀 이상해 진것 같습니다. 저도 쓰면서 뭔 말인지 이거 원~~
Posted by JMSOFT

댓글을 달아 주세요

  1. 감사해용 2009.06.02 20:54 신고  수정/삭제 댓글쓰기 댓글주소

    아..제가 알고싶었던 글이었습니다^^; 생소한 재믈코드에 익스프레션툴은 첨 시작하는 저에겐 어렵네용 감사합니다.

티스토리 툴바