첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
다운로드

▶ 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
반응형
그리드형
Posted by 사용자 icodebroker

댓글을 달아 주세요