【Silverlight】 閉じるボタン付きのタブ(TabControl)を作成するには

◆ 閉じるボタン付きのTabItem(XAML)

<sdk:TabItem
    x:Class="Controls.CloseTabItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  
    Width="140"
>
    <sdk:TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock Name="headerContent" Text="" Width="100" />
            <Image Name="CloseButton" Source="閉じるボタンの画像"
             Width="12" Height="12" 
             MouseLeftButtonUp="CloseButton_MouseLeftButtonUp" />
        </StackPanel>
    </sdk:TabItem.Header>
</sdk:TabItem>

◆ 閉じるボタン付きのTabItem(C# Code)

using System;
using System.Windows;
using System.Windows.Controls;
using System.Linq;

namespace Controls
{
    public partial class CloseTabItem : TabItem
    {
        public CloseTabItem()
        {
            InitializeComponent();

            // 閉じるボタンの表示制御
            this.Loaded += (e, s) =>
            {
                if (IsLocked)
                {
                    this.CloseButton.Visibility = Visibility.Collapsed;
                }
            };

            IsLocked = false;
        }

        public string HeaderContent
        {
            get { return this.headerContent.Text; }
            set { this.headerContent.Text = value; }
        }
        
        // 閉じるボタンの表示設定
        public bool IsLocked { get; set; }

        /// マウス左クリック時のアクション
        private void CloseButton_MouseLeftButtonUp
            (object sender, RoutedEventArgs e)
        {
            // タブを削除
            var parent = this.Parent as TabControl;
            parent.Items.Remove(this);
        }
    }
}

◆ 使用例(XAML)

// TabControlに CloseTabItem を適用
<sdk:TabControl>
    <ctl:CloseTabItem HeaderContent="CloseTab"></ctl:CloseTabItem>
    <ctl:CloseTabItem HeaderContent="NoCloseTab"
        IsLocked="True"></ctl:CloseTabItem>
</sdk:TabControl>

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中