[WinUI 3][TabView] ドラッグしてタブの順番を入れ替える

TabView のタブは、ドラッグして表示順を変更することが可能です。

この記事では タブの表示順をドラッグして変更する方法について説明します。

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

ドラッグしてタブの順番を入れ替える例

環境

ドラッグしてタブの順番を入れ替える

タブの順番をドラッグして入れ替えるには、CanDragTabs プロパティ True を設定します。

以下に例を示します。12行目で CanDragTabs に True を設定しています。

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"
             CanDragTabs="True"
             TabWidthMode="SizeToContent">

        <TabView.TabItems>
            <TabViewItem x:Name="myTab1" Header="Home">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Home" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Home" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab2" Header="Document">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Document" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Document" />
                </StackPanel>
            </TabViewItem>
            <TabViewItem x:Name="myTab3" Header="Tab">
                <TabViewItem.IconSource>
                    <SymbolIconSource Symbol="Document" />
                </TabViewItem.IconSource>
                <StackPanel>
                    <TextBlock Text="Document" />
                </StackPanel>
            </TabViewItem>
        </TabView.TabItems>
    </TabView>
</Window>

C# の例

public MainWindow()
{
    this.InitializeComponent();
    myTabView.CanDragTabs = True;
}

ドラッグしてタブの順番を入れ替える例

WinUi Tips

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

Please follow and like us: