728x90
반응형
728x170
▶ CustomTabControl.xaml
<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>
728x90
▶ CustomTabControl.xaml.cs
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
}
}
300x250
▶ MainWindow.xaml
<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>728x90
반응형
그리드형
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] Image 클래스 : LayoutUpdated 이벤트를 사용해 이미지 픽셀 보정하기 (0) | 2020.12.13 |
|---|---|
| [C#/WPF] FrameworkElement 클래스 : 장평을 설정하는 커스텀 텍스트 블럭 사용하기 (0) | 2020.12.13 |
| [C#/WPF] Grid 클래스 : 환형 패널 사용하기 (0) | 2020.12.12 |
| [C#/WPF] ObjectDataProvider 엘리먼트 : Colors 클래스의 색상 정적 속성 구하기 (0) | 2020.12.07 |
| [C#/WPF] 파노라마 뷰 사용하기 (0) | 2020.12.06 |
| [C#/WPF] TabControl 클래스 : FADE IN/OUT 탭 컨트롤 사용하기 (0) | 2020.12.06 |
| [C#/WPF] FrameworkElement 엘리먼트 : FocusVisualStyle 속성을 사용해 포커스 사각형 제거하기 (0) | 2020.12.05 |
| [C#/WPF] UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기 (0) | 2020.12.05 |
| [C#/WPF] EventTrigger 엘리먼트 : RoutedEvent 속성을 사용해 복권 긁는 효과 사용하기 (0) | 2020.12.05 |
| [C#/WPF] UIElement 클래스 : 복제하기 (0) | 2020.12.05 |
| [C#/WPF] Viewport2DVisual3D 엘리먼트 : 곡선 형태의 ScrollBar 사용하기 (0) | 2020.12.05 |
댓글을 달아 주세요