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
'XAML 뽀개기' 카테고리의 다른 글
032. 데이터템플릿 & 트리거(DataTemplate & Trigger) #3 (0) | 2018.04.18 |
---|---|
031. 데이터템플릿 & 셀렉터(DataTemplate & Selector) #2 (0) | 2018.04.16 |
030. 데이타템플릿 & 컨버터(DataTemplate & Converter) #1 (0) | 2018.04.11 |
029. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #3 (0) | 2018.04.09 |
028. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #2 (0) | 2018.03.22 |
027. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #1 (0) | 2018.03.20 |
댓글을 달아 주세요