UWPでTabPageを表示する

13165 ワード
UWP TabView WPF Forms C# C# テキストリンク

UWPのTabViewコントロールの使い方　

サンプルコード

FormsではTabControl/TabPage、UWPではTabViewになっている。

参照追加(NuGet)

最初に、TabViewを使用できるようにパッケージ追加する。
(NuGet パッケージ名：Microsoft.UI.Xamlで検索)

次に、追加したプロジェクトのApp.xamlに下記を追加

App.xaml
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

TabView　コード

MainPage.xaml
<muxc:TabView
    x:Name="ContentTabView"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
</muxc:TabView>

この時点では、タブが1つもないTabViewが表示される。

・タブ追加

MainPage.xaml
<muxc:TabView
    x:Name="ContentTabView"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">

    <muxc:TabView.TabItems>
        <muxc:TabViewItem Content="Hello TabView !!" Header="TabPage Xaml"  />
    </muxc:TabView.TabItems>

</muxc:TabView>

タブが表示される。
※TabViewはデフォルトでタイトルバーに表示されるが、別途設定が必要こちら

タブの×ボタンでタブを閉じたり、＋ボタンでタブを追加できる。
まだイベントを実装していないので、この時点では押しても特に何も起こらない。
タブの×ボタンを非表示にする場合はTabViewItemのIsClosableをfalseに設定する。

MainPage.xaml
<muxc:TabViewItem Content="Hello TabView!!" Header="TabPage Xaml"  IsClosable="false"/>

タブの＋ボタンを非表示にする場会は、TabViewのIsAddTabButtonVisibleをfalseに設定する。

MainPage.xaml
<muxc:TabView
    x:Name="ContentTabView"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    IsAddTabButtonVisible="false">

・タブ追加(コードビハインド)

GridのLoadedイベントハンドラーに追加

MainPage.xaml.cs
private void Grid_Loaded(object sender, RoutedEventArgs e)
{
    var item = new TabViewItem()
    {
        Header = "TabPage Code",
        Content = "Hello TabView!!"
    };
    ContentTabView.TabItems.Add(item);
}

ここまではタブを選択したり、＋ボタンを押せない。
TabViewはタイトルバー上に表示されるので、別途タイトルバーを設定し、各コントロールがマウスフォーカスを受け取れるようにする必要がある。
そこで、TabViewにフッターを作成しタイトルバーに設定する。

・フッターを作成

MainPage.xaml
<muxc:TabView.TabStripFooter>
    <StackPanel
        x:Name="TitleBar"
        Background="Transparent"
        Orientation="Horizontal">
        <TextBlock
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            FontSize="18"
            Text="TabView Fotter" />
    </StackPanel>
</muxc:TabView.TabStripFooter>

作成したフッターをタイトルバーに設定する。

MainPage.xaml.cs
Window.Current.SetTitleBar(TitleBar);

フッターが追加され、タブが選択できるようになった。

・DataTemplate

TabViewはListViewと同じようにデータテンプレートを使用できる。

バインドするクラスを作成

TabItemInfo.cs
public class TabItemInfo
{
    public string Hedder { get; set; }
    public Frame ContentPage { get; set; }
    public TabItemInfo(){ }
}

下記でデータテンプレートを設定する。

MainPage.xaml
<muxc:TabView
    x:Name="ContentTabView"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    TabItemsSource="【バインドするItemsSourceプロパティ名】">

    <muxc:TabView.TabItemTemplate>
        <DataTemplate x:DataType="local:TabItemInfo">
            <muxc:TabViewItem Content="{x:Bind ContentPage, Mode=OneWay}" Header="{x:Bind Hedder, Mode=OneWay}" />
        </DataTemplate>
    </muxc:TabView.TabItemTemplate>

</muxc:TabView>

・イベント追加

タブのボタンイベントやドラッグイベントを追加する。

タブの追加ボタン(＋ボタン)押下イベント

MainPage.xaml
<muxc:TabView
    ...
    AddTabButtonClick="ContentTabView_AddTabButtonClick">
</muxc:TabView>

タブの閉じるボタン(×ボタン)押下イベント

MainPage.xaml
<muxc:TabView
    ...
    TabCloseRequested="ContentTabView_TabCloseRequested"
</muxc:TabView>

ドラッグイベント

下記のプロパティにtrueを設定することで、ドラッグ操作でタブを並び替えることができる。
なお、独自にDataTemplateを実装している場合、ドラッグで並び替えようとするとエラーが発生する。

MainPage.xaml
<muxc:TabView
    ...
    CanDragTabs="true"
    CanReorderTabs="true"
</muxc:TabView>

タブをTabViewの外にドロップした場合

タブをドロップした場所で新しいウィンドウを開くなどしたいときに便利。

MainPage.xaml
<muxc:TabView
    ...
    TabDroppedOutside="ContentTabView_TabDroppedOutside"
</muxc:TabView>

まとめ

マイクロソフト　TabView
https://docs.microsoft.com/ja-jp/windows/uwp/design/controls-and-patterns/tab-view

XamlControlsGallery　TabView
https://github.com/microsoft/Xaml-Controls-Gallery/tree/master/XamlControlsGallery/TabViewPages