[WinUI 3][TabView] 任意のタブを削除する

TabView に表示される各タブの右側には[X]ボタンがありますが、クリックしてもタブは削除されません。タブを削除するには、自ら削除するためのコードを実装する必要があります。

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

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

タブを削除する例

環境

[X]ボタンクリック時にタブを削除する

タブに表示されている [X] ボタンをクリックした時にタブが削除されるようにするには、TabCloseRequested イベントを使用します。

以下に コード例を示します。この例では [X]ボタンがクリックされた時に、myTabView_TabCloseRequested イベントが発生するようにしています（12行目）。

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"
             TabCloseRequested="myTabView_TabCloseRequested">

        <TabView.TabItems>
            <TabViewItem x:Name="myTab1" Header="Home">
                <StackPanel>
                    <TextBlock Text="Home Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab2" Header="Document1">
                <StackPanel>
                    <TextBlock Text="Document1 Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab3" Header="Document2">
                <StackPanel>
                    <TextBlock Text="Document2 Content" />
                </StackPanel>
            </TabViewItem>
        </TabView.TabItems>
    </TabView>

</Window>

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

このイベントの引数 args .Tab には、[X]ボタンが押されたタブの情報が格納されています。ですので、TabView（この例ではmyTabView） のTabItems.Remove メソッドを使用してタブを削除します。

C# の例

private void myTabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
{
    myTabView.TabItems.Remove(args.Tab);
}

タブを削除する例

WinUi Tips

本サイトでまとめている WinUI Tips の一覧はこちらから確認できます。

Please follow and like us: