[WinUI 3][TabView] 任意のタブを選択状態にする

TabView には複数のタブを表示させることができますが、利便性を高めるために、任意のタブを裏から（コードから）選択したい場合があります。

この記事では TabView で任意のタブを選択状態にする方法について説明します。

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

任意のタブを選択状態にする例

環境

任意のタブを選択状態にする

TabView で任意のタブを選択状態にするには、SelectedIndex プロパティを使用します。一番左のタブを0番目と数えて、選択したいタブのインデックスを指定します。

XAML の例

以下は XAML <TabView> のタグで SelectedIndex プロパティに”1″を設定しています。これにより先頭から2番目のタブが選択状態になります。

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"
             SelectedIndex="1">

        <TabView.TabItems>
            <TabViewItem x:Name="myTab1" Header="Document1">
                <StackPanel Background="Orange">
                    <TextBlock Text="Document1 Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab2" Header="Document2">
                <StackPanel Background="BlueViolet">
                    <TextBlock Text="Document2 Content" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab3" Header="Document3">
                <StackPanel Background="SkyBlue">
                    <TextBlock Text="Document3 Content" />
                </StackPanel>
            </TabViewItem>
        </TabView.TabItems>
    </TabView>

</Window>

任意のタブを選択状態にする例

C# の例

C# でも同様にSelectedIndex に選択したいタブのインデックスを指定します。

以下は、SelectedIndex プロパティに2を設定しています。これにより先頭から3番目のタブが選択状態になります。

public MainWindow()
{
    this.InitializeComponent();

    myTabView.SelectedIndex = 2;
}

任意のタブを選択する例

WinUi Tips

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

Please follow and like us: