■ ControlTemplate 엘리먼트를 사용해 아이콘 헤더를 갖는 TabItem 엘리먼트를 정의하는 방법을 보여준다.
▶ TabHeader.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
using System.ComponentModel; using System.Windows.Media; namespace TestProject { /// <summary> /// 탭 헤더 /// </summary> public class TabHeader : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 이벤트 - PropertyChanged /// <summary> /// 속성 변경시 이벤트 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 제목 /// <summary> private string title; /// <summary> /// 이미지 소스 /// <summary> private ImageSource imageSource; /// <summary> /// 선택 이미지 소스 /// <summary> private ImageSource selectedImageSource; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get { return this.title; } set { if(this.title == value) { return; } this.title = value; FirePropertyChangedEvent(nameof(Title)); } } #endregion #region 이미지 소스 - ImageSource /// <summary> /// 이미지 소스 /// </summary> public ImageSource ImageSource { get { return this.imageSource; } set { if(this.imageSource == value) { return; } this.imageSource = value; FirePropertyChangedEvent(nameof(ImageSource)); } } #endregion #region 선택 이미지 소스 - SelectedImageSource /// <summary> /// 선택 이미지 소스 /// </summary> public ImageSource SelectedImageSource { get { return this.selectedImageSource ?? this.imageSource; } set { if(this.selectedImageSource == value) { return; } this.selectedImageSource = value; FirePropertyChangedEvent(nameof(SelectedImageSource)); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> protected void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } } |
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:TestProject" Width="800" Height="600" Title="ControlTemplate 엘리먼트 : 아이콘 헤더 TabItem 엘리먼트 정의하기" FontFamily="나눔고딕코딩" FontSize="16"> <Window.Resources> <Style TargetType="TabItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TabItem"> <StackPanel Orientation="Vertical" Cursor="Hand"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 2" ContentSource="Header" /> <TextBlock Name="bottomBarTextBlock" Height="5" Background="Gold" /> </StackPanel> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="bottomBarTextBlock" Property="Background" Value="Green" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <Grid HorizontalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="5*" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}"> <Image Name="image" Height="32" Source="{Binding ImageSource}" /> </Border> <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="5 0 0 0" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}" FontWeight="Bold" FontSize="18" Text="{Binding Title}" /> </Grid> <DataTemplate.Triggers> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True"> <Setter TargetName="image" Property="Source" Value="{Binding SelectedImageSource}" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="Green" /> </Trigger> <Trigger Property="IsSelected" Value="False"> <Setter Property="Foreground" Value="Gray" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid Margin="10"> <TabControl HorizontalAlignment="Stretch" TabStripPlacement="Top"> <TabItem> <TabItem.Header> <local:TabHeader Title="테스트" ImageSource="IMAGE/sample1.png" SelectedImageSource="IMAGE/sample2.png" /> </TabItem.Header> </TabItem> <TabItem> <TabItem.Header> <local:TabHeader Title="테스트" ImageSource="IMAGE/sample1.png" SelectedImageSource="IMAGE/sample2.png" /> </TabItem.Header> </TabItem> <TabItem> <TabItem.Header> <local:TabHeader Title="테스트" ImageSource="IMAGE/sample1.png" SelectedImageSource="IMAGE/sample2.png" /> </TabItem.Header> </TabItem> </TabControl> </Grid> </Window> |
