[WinUI 3][TabView] [+]ボタンをクリックして新しいタブを追加する

TabView

2022.04.25

TabView は、タブの並びに [+]ボタンを表示することができますが、この [+]ボタンの処理は自分で実装する必要があります。

この記事では TabView で[+]ボタンが押された時に、新規でタブを追加する方法について説明します。

公式サイト情報はコチラを参照してください。

新規タブを追加する例

環境
タブの並びに [+]ボタンを表示する
[+] ボタンクリック時にタブを追加する
任意の位置にタブを挿入する
WinUi Tips

環境

開発環境	Microsoft Visual Studio Enterprise 2019 Version 16.11.5
Framework	Microsoft .NET Framewohttps://blog.hiros-dot.net/?p=11007rk Version 4.8.04161

タブの並びに [+]ボタンを表示する

タブの並びに [+] ボタンを表示するには、 IsAddTabButtonVisible プロパティに True を設定します。既定値は True になっています。

以下に XAML のコード例を示します。

XAML の例

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
             x:Name="myTabView"
             IsAddTabButtonVisible="True">
        
        <TabView.TabItems>
            <TabViewItem x:Name="myTab1" Header="Home">
                <StackPanel>
                    <TextBlock Text="Home Content" />
                </StackPanel>
            </TabViewItem>

        </TabView.TabItems>
    </TabView>
</Window>

[+]ボタンを追加する例

[+] ボタンクリック時にタブを追加する

[+] ボタンのクリックイベントは AddTabButtonClick に設定します。

以下の XAML はボタンがクリックされた時に（つまりAddTabButtonClickに）

TabView_AddTabButtonClick というイベントハンドラが実行されるようにする例です。

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
             x:Name="myTabView"
             IsAddTabButtonVisible="True"
             AddTabButtonClick="TabView_AddTabButtonClick">
        
        <TabView.TabItems>
            <TabViewItem x:Name="myTab1" Header="Home">
                <StackPanel>
                    <TextBlock Text="Home Content" />
                </StackPanel>
            </TabViewItem>

        </TabView.TabItems>
    </TabView>
</Window>

次に TabView_AddTabButtonClick イベントの実装例を以下に示します。

はじめに TabViewItem を作成し（4行目）、ヘッダーとアイコンの設定をします（7,8行目）。

次に、タブ内のコンテンツ配置場所として、StackPanel を追加します（12,13行目）。

最後に、作成した TabViewItem を TabView に追加します（16行目）。

C# の例

private void TabView_AddTabButtonClick(Microsoft.UI.Xaml.Controls.TabView sender, object args)
{
    // 新しいタブを作成する
    TabViewItem newItem = new TabViewItem
    {
        // ヘッダーとアイコンの設定
        Header = $"Document",
        IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Document }
    };

    // StackPanel を作成して タブのコンテンツにする
    StackPanel sp = new StackPanel();
    newItem.Content = sp;

    // 作成したタブを追加
    myTabView.TabItems.Add(newItem);
}