SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Windows Template Studio雛形コードの使い方~Pivot & Tabs プロジェクト~

今度は、Pivotを用いたプロジェクトを作ってみます。

Pivotのプロジェクトは、前回使用したBlankプロジェクトと共通点も多く、割とシンプルな構成になっています。
チェックすべき箇所も少ないので、CodeBehind版/MVVM Basic版の両方をまとめて見ていきます。

プロジェクトの作成

それぞれ、以下のような設定でプロジェクトを作成します。

CodeBehind版
  • ProjectType: Pivot and Tabs
  • Framework: Code Behind
  • Pages, Features: Blank Pageを一つ追加
MVVM Basic版
  • ProjectType: Pivot and Tabs
  • Framework: MVVM Basic
  • Pages, Features: Blank Pageを一つ追加

Pivotでページ切替を行うので、プロジェクト作成時に以下のボタンで、Blank Pageを一つ追加しておきましょう。
f:id:minami_SC:20170529103629p:plain

Pivotプロジェクトの構成

Pivotプロジェクトは、今まで使ってきたBlankとほぼ同じプロジェクト構成になっています。
ここでは、Blankとの違いだけを確認します。

以下のファイルが、Blankプロジェクトと比較して新たに追加された要素となります。

CodeBehind MVVM Basic
f:id:minami_SC:20170529104412p:plain f:id:minami_SC:20170529104420p:plain

App.xaml.cs
ActivationServiceをPivotPageを指定で生成するようになっています。
ということで、アプリを起動するとPivotPage.xamlが表示されます。

        private ActivationService CreateActivationService()
        {
            return new ActivationService(this, typeof(Views.PivotPage));
        }

PivotPage
PivotPageでは、Pivotコントロールを使って、MainPageとBlankPageの表示切り替えを行っています。
ただPivotコントロールがあるだけのシンプルなページですね。

<Page
    x:Class="Pivot_MvvmBasic.Views.PivotPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:model="using:Pivot_MvvmBasic.Models"
    xmlns:views="using:Pivot_MvvmBasic.Views"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Pivot x:Uid="PivotPage">
            <PivotItem x:Uid="PivotItem_Main">
                <Frame>
                    <views:MainPage/>
                </Frame>
            </PivotItem>
            <PivotItem x:Uid="PivotItem_Blank">
                <Frame>
                    <views:BlankPage/>
                </Frame>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

PivotPage.xaml.cs
コードビハインドは、CodeBehind/MVVMBasicなどの、選択したプロジェクトタイプに合わせた内容のコードが生成されています。
特筆すべき点はないので、ここは省略します。

PivotViewModel.cs MVVM Basicのプロジェクトタイプの場合は、以下のようなVMが作成されます。
特に何もしていない、

    public class PivotViewModel : Observable
    {
        public PivotViewModel() 
        {
        }
    }

実行すると、こんな感じのウィンドウが表示されます。
f:id:minami_SC:20170529103651p:plain