[TabItem close button]텝아이템 닫기 구현

프로젝트 구성

실제 필요한 파일은 ClosableTab.cs / CloseableHeader.xaml 가 전부 입니다.

ClosableTab.cs은 TabItem  상속받는다 클래스를 만든다.

전체소스는 아래쪽에..~

[실제 바인딩 된 모습]

 

 

Header 만들기

CloseableHeader.xaml 이 파일은  상단의 탭헤더가 될것입니다.

 

ClosableTab 에서 보면 헤더를  CloseableHeader.xaml 파일로 지정합니다.

CloseableHeader.xaml  소스

<UserControl x:Class="RibbonWpfApplication.CloseableHeader"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        
        <Button Content="X"  Height="19" HorizontalAlignment="Right" Margin="0,3,4,0" Name="button_close" VerticalAlignment="Top" Width="20" FontFamily="Courier" FontWeight="Bold" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" FontStretch="Normal" Visibility="Visible" FontSize="14" Padding="0" ToolTip="Close"/>
        <Label Content="TabItem"  Height="23" HorizontalAlignment="Left" Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />
    </Grid>
</UserControl>

클릭했을때 탭컨트롤 추가하기

ClosableTab theTabItem = new ClosableTab();
theTabItem.Title = "Small title";
MainTabControl.Items.Add(theTabItem);
theTabItem.Focus();

 

ClosableTab.cs  Full 소스

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Input;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace RibbonWpfApplication
{
    class ClosableTab : TabItem
    {


        // Constructor
        public ClosableTab()
        {
            // 아까만들었던던 CloseableHeader.xaml을 이용해서 헤더를 붙입니다.
            CloseableHeader closableTabHeader = new CloseableHeader();

            // Assign the usercontrol to the tab header
            this.Header = closableTabHeader;

            // Attach to the CloseableHeader events (Mouse Enter/Leave, Button Click, and Label resize)
            closableTabHeader.button_close.MouseEnter += new MouseEventHandler(button_close_MouseEnter);
            closableTabHeader.button_close.MouseLeave += new MouseEventHandler(button_close_MouseLeave);
            closableTabHeader.button_close.Click += new RoutedEventHandler(button_close_Click);
            closableTabHeader.label_TabTitle.SizeChanged += new SizeChangedEventHandler(label_TabTitle_SizeChanged);
        }



        /// <summary>
        /// Property - Set the Title of the Tab
        /// </summary>
        public string Title
        {
            set
            {
                ((CloseableHeader)this.Header).label_TabTitle.Content = value;
            }
        }
        

        //
        // - - - Overrides  - - -
        //

        // Override OnSelected - Show the Close Button
        protected override void OnSelected(RoutedEventArgs e)
        {
            base.OnSelected(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
        }

        // Override OnUnSelected - Hide the Close Button
        protected override void OnUnselected(RoutedEventArgs e)
        {
            base.OnUnselected(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Hidden;
        }

        // Override OnMouseEnter - Show the Close Button
        protected override void OnMouseEnter(MouseEventArgs e)
        {
            base.OnMouseEnter(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
        }

        // Override OnMouseLeave - Hide the Close Button (If it is NOT selected)
        protected override void OnMouseLeave(MouseEventArgs e)
        {
            base.OnMouseLeave(e);
            if (!this.IsSelected)
            {
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Hidden;
            }
        }
        


        //
        // - - - Event Handlers  - - -
        //


        // Button MouseEnter - When the mouse is over the button - change color to Red
        void button_close_MouseEnter(object sender, MouseEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Foreground = Brushes.Red;
        }

        // Button MouseLeave - When mouse is no longer over button - change color back to black
        void button_close_MouseLeave(object sender, MouseEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Foreground = Brushes.Black;
        }


        // Button Close Click - Remove the Tab - (or raise an event indicating a "CloseTab" event has occurred)
        void button_close_Click(object sender, RoutedEventArgs e)
        {
            ((TabControl)this.Parent).Items.Remove(this);
        }


        // Label SizeChanged - When the Size of the Label changes (due to setting the Title) set position of button properly
        void label_TabTitle_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Margin = new Thickness(((CloseableHeader)this.Header).label_TabTitle.ActualWidth + 5, 3, 4, 0);
        }





    }
}

완료된 모습

(아래의 x 표를 클릭하면 탭을 제거할수 있습니다)

더 자세한 설명:

http://www.codeproject.com/KB/WPF/WpfTabCloseButton.aspx