첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
유용한 소스 코드가 있으면 icodebroker@naver.com으로 보내주시면 감사합니다.
블로그 자료는 자유롭게 사용하세요.

[C#/WPF] TabControl 클래스 : FADE IN/OUT 탭 컨트롤 사용하기

C#/WPF 2020. 12. 6. 13:32

728x90
반응형

■ TabControl 클래스 : FADE IN/OUT 탭 컨트롤 사용하기

------------------------------------------------------------------------------------------------------------------------


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>

 

 

▶ 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

    }

}

 

 

▶ 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
Posted by 사용자 icodebroker
TAG , ,
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

◀ 이전페이지 1 ··· 432 433 434 435 436 437 438 439 440 ··· 8693 다음페이지 ▶

티스토리툴바