■ TabControl 클래스에서 FADE IN/OUT 탭 컨트롤을 사용하는 방법을 보여준다.
▶ CustomTabControl.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 |
<TabControl x:Class="TestProject.CustomTabControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" TabStripPlacement="Left" > <TabControl.Resources> <Style TargetType="TabItem"> <Setter Property="FocusVisualStyle" Value="{x:Null}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TabItem"> <Grid> <Border Name="border" CornerRadius="3" BorderThickness="1" Padding="10 2 10 2" Background="Transparent"> <Border.BorderBrush> <SolidColorBrush x:Name="borderBrush" Color="#00544a4a" /> </Border.BorderBrush> <Grid> <ContentPresenter Margin="3 3 10 3" VerticalAlignment="Center" HorizontalAlignment="Left" ContentSource="Header" /> <Path Name="ArrowPath" HorizontalAlignment="Right" VerticalAlignment="Center" StrokeThickness="1" Stroke="DimGray" RenderTransformOrigin="0.5 0.5" Fill="DimGray" Data="M 3 1 L 5 4 1 4 Z" Visibility="Collapsed"> <Path.RenderTransform> <RotateTransform Angle="90" /> </Path.RenderTransform> </Path> </Grid> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="border" Property="Background" Value="#10544a4a" /> <Setter TargetName="ArrowPath" Property="Visibility" Value="Visible" /> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard Duration="0:0:0.2"> <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="#56544a4a" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard Duration="0:0:0.2"> <ColorAnimation Storyboard.TargetName="borderBrush" Storyboard.TargetProperty="Color" To="#00544a4a" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </TabControl.Resources> <TabControl.Style> <Style TargetType="TabControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TabControl"> <Border BorderThickness="1" BorderBrush="#10000000" Background="#f8f8f4"> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" Margin="0 0 2 0" Padding="5"> <ScrollViewer VerticalScrollBarVisibility="Auto"> <TabPanel IsItemsHost="True" /> </ScrollViewer> </Border> <Border Grid.Column="1" Background="#10000000" /> <Border Grid.Column="2" Margin="5"> <Grid> <ContentPresenter Name="currentContentPresenter" /> <ContentPresenter Name="beforeContentPresenter" /> </Grid> </Border> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </TabControl.Style> </TabControl> |
▶ CustomTabControl.xaml.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 |
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media.Animation; namespace TestProject { /// <summary> /// 커스텀 탭 컨트롤 /// </summary> public partial class CustomTabControl : TabControl { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 현재 컨텐트 프리젠터 /// </summary> private ContentPresenter currentContentPresenter = null; /// <summary> /// 이전 컨텐트 프리젠터 /// </summary> private ContentPresenter beforeContentPresenter = null; /// <summary> /// FADE IN 애니메이션 /// </summary> private DoubleAnimation fadeInAnimation; /// <summary> /// FADE OUT 애니메이션 /// </summary> private DoubleAnimation fadeOutAnimation; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - CustomTabControl() /// <summary> /// 생성자 /// </summary> public CustomTabControl() { InitializeComponent(); this.fadeInAnimation = new DoubleAnimation(0, 1, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 }; this.fadeOutAnimation = new DoubleAnimation(1, 0, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 }; Loaded += TabControl_Loaded; SelectionChanged += TabControl_SelectionChanged; this.fadeOutAnimation.Completed += fadeOutAnimation_Completed; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 탭 컨트롤 로드시 처리하기 - TabControl_Loaded(sender, e) /// <summary> /// 탭 컨트롤 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void TabControl_Loaded(object sender, RoutedEventArgs e) { this.currentContentPresenter = GetTemplateChild("currentContentPresenter") as ContentPresenter; this.beforeContentPresenter = GetTemplateChild("beforeContentPresenter" ) as ContentPresenter; this.currentContentPresenter.Content = SelectedContent; } #endregion #region 탭 컨트롤 선택 변경시 처리하기 - TabControl_SelectionChanged(sender, e) /// <summary> /// 탭 컨트롤 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) { if(currentContentPresenter == null) { return; } this.currentContentPresenter.Content = (e.AddedItems[0] as ContentControl).Content; this.beforeContentPresenter.Content = (e.RemovedItems[0] as ContentControl).Content; this.beforeContentPresenter.Visibility = Visibility.Visible; this.currentContentPresenter.BeginAnimation(ContentPresenter.OpacityProperty, fadeInAnimation ); this.beforeContentPresenter.BeginAnimation (ContentPresenter.OpacityProperty, fadeOutAnimation); } #endregion #region FADE OUT 애니메이션 완료시 처리하기 - fadeOutAnimation_Completed(sender, e) /// <summary> /// FADE OUT 애니메이션 완료시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void fadeOutAnimation_Completed(object sender, EventArgs e) { this.beforeContentPresenter.Visibility = Visibility.Collapsed; } #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 |
<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="TabControl 클래스 : FADE IN/OUT 탭 컨트롤 사용하기" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <local:CustomTabControl Margin="10"> <TabItem Header="빨간색"> <Ellipse Margin="10" Fill="Red"/> </TabItem> <TabItem Header="녹색"> <Rectangle Margin="10" Fill="Green"/> </TabItem> <TabItem Header="파란색"> <Ellipse Margin="10" Fill="Blue"/> </TabItem> </local:CustomTabControl> </Grid> </Window> |
