XAML or HTML

032. 데이터템플릿 & 트리거(DataTemplate & Trigger) #3

XAML 뽀개기

이전 포스트에서는 데이타템플릿, 스타일을 컨버터, 셀렉터를 활용해 하나의 컨트롤에서 다양한 형태를 보여줄 있었습니다. 이번 포스트에서는 트리거를 이용하는 방법을 살펴봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Style & Template Trigger -->
<DataTemplate x:Key="DataTemplate_Message" DataType="{x:Type local:ExchangeMessage}">
    <StackPanel>
        <TextBlock x:Name="PART_Name" Text="{Binding Name}"/>
        <Border x:Name="PART_Background" Background="White" CornerRadius="5" Margin="0,3">
            <TextBlock Text="{Binding Message}" TextWrapping="Wrap" Grid.Column="1" FontSize="11" Margin="5,3,5,7"/>
        </Border>
        <TextBlock x:Name="PART_Time" Text="{Binding ConfirmedTime, StringFormat=hh:mm:ss}" FontSize="8"/>
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsMine}" Value="True">
            <Setter Property="Background" Value="#FFFFEB33" TargetName="PART_Background"/>
            <Setter Property="HorizontalAlignment" Value="Right" TargetName="PART_Time"/>
            <Setter Property="Visibility" TargetName="PART_Name">
                <Setter.Value>Collapsed</Setter.Value>
            </Setter>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>
cs

 

이번에는 데이타템플릿이 하나만 필요합니다. 다른 사람의 메시지를 기본 템플릿으로 정의하고 데이타트리거를 이용해 메시지일 때에 달라져야하는 속성들을 정의합니다. 이전 예제와 동일한 형태로 정의하므로 자세한 프로퍼티 사항들은 생략합니다. 필요한 요소들을 TargetName 지정해야하므로 x:Name 선언하는 것에 주의합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Style x:Key="Style_Message" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <ContentPresenter x:Name="PART_ListBoxItem" 
                                  HorizontalAlignment="Left" 
                                  Margin="5,0,20,5"/>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsMine}" Value="True">
                        <Setter Property="HorizontalAlignment" Value="Right" TargetName="PART_ListBoxItem"/>
                        <Setter Property="Margin" Value="20,0,5,5" TargetName="PART_ListBoxItem"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        <Setter.Value>
    </Setter>
</Style>
cs


스타일도 데이타템플릿과 동일한 방법으로 데이타프리거를 이용합니다. PART_ListBoxItem의 HorizontalAlignment 속성은 Left, Margin은 5,0,20,5로 선언합니다. 기본으로 선언한 스타일은 다른 사람의 메시지 스타일이 됩니다. 다음엔 데이터트리거를 이용해서 내 메시지일 떄에 달라져야하는 속성들의 값을 반대로 정의합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Style & Template Trigger -->
<ListBox ItemTemplate="{StaticResource DataTemplate_Message}" 
         ItemContainerStyle="{StaticResource Style_Message}"
         Grid.Column="1">
    <ListBox.ItemsSource>
        <x:Array Type="{x:Type local:ExchangeMessage}">
            <local:ExchangeMessage Name="X Friend" Message="Charles~ R u there?" ConfirmedTime="2018-03-01 12:24:33" IsMine="False"/>
            <local:ExchangeMessage Name="Me" Message="Yeah~ i'm here. What's up?" ConfirmedTime="2018-03-01 12:25:44" IsMine="True"/>
            <local:ExchangeMessage Name="X Friend" Message="Do u have time tonight? Let's get it!" ConfirmedTime="2018-03-01 12:26:55" IsMine="False"/>
        </x:Array>
    </ListBox.ItemsSource>
</ListBox>
cs

 

ItemTemplate ItemContainerStyle 선언하는 것은 이전과 다를 것이 없습니다.

 

 

실행해서 태스트해봅니다

 

컨버터를 사용할지 셀렉터를 사용할지 트리거를 사용할지는 여러분이 판단하시길 바랍니다. 여러 조건과 상황에 따른 옳은 판단이 중요할 같습니다.

 

참고 : JERRIE PELSER > 3 Techniques you can use to make your data templates dynamic