Windows GUIプログラミング入門6 画面遷移(2)

# ■はじめに
今回はインストーラーでよく使われるウィザード形式の画面を作ります。

![wbg6-00.png](https://qiita-image-store.s3.amazonaws.com/0/142879/dac8ec26-4871-6d53-0fb2-e872a54d6aea.png)

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

# ■開発環境
* Windows 10
* Visual Studio Community 2015 Update 3
* .NET Framework 4.x

# ■作ってみる

タグの`Window`を、、、
![wbg6-01.png](https://qiita-image-store.s3.amazonaws.com/0/142879/fa1755c7-7493-4cc5-b9e4-80a6567df6f4.png)

`NavigationWindow`に、、、
![wbg6-02.png](https://qiita-image-store.s3.amazonaws.com/0/142879/a3bb6c53-c0b9-eac4-139b-f3dd8313e748.png)

書き換えます。
![wbg6-03.png](https://qiita-image-store.s3.amazonaws.com/0/142879/c1d21d73-8ed9-ca29-d2e6-0c419447411e.png)

コードビハインドで基底クラスの`Window`を、、、
![wbg6-05.png](https://qiita-image-store.s3.amazonaws.com/0/142879/ef4c003d-a21a-47e0-4e4f-a7f8f32e4f41.png)

`NavigationWindow`に書き換えます。
![wbg6-06.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d69ffac7-5a8c-4550-eed5-99bccfcb713b.png)

新しい項目の追加で「ページ(WPF)」を3つ追加します。
名前は`Page1.xaml`, `Page2.xaml`, `Page3.xaml`にします。
![wbg6-07.png](https://qiita-image-store.s3.amazonaws.com/0/142879/8bfaef74-491c-fbde-bfa1-20839cea2752.png)

ドキュメントアウトラインで`NavigationWindow`を選択し、プロパティの「その他の指定」で`Source`プロパティを`Page1.xaml`に設定します。
![wbg6-08.png](https://qiita-image-store.s3.amazonaws.com/0/142879/db79250c-43ab-0db4-ede2-f0cfd6d2c122.png)

Page1を以下のように編集します。
![wbg6-10.png](https://qiita-image-store.s3.amazonaws.com/0/142879/df0c9ed0-c676-6ee2-aa7c-33ea8f2ea52e.png)

```Xml:Page1.xaml
<Page x:Class="WpfApplication6.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(1/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="1ページ目" FontSize="36" Margin="10"/>

        <StackPanel Grid.Row="1">
            <CheckBox Content="チェック1" Margin="10"/>
            <TextBox Text="てきすと" Margin="10"/>
        </StackPanel>
        
        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="次へ" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>
```

NavigationService.Navigateの引数に表示したいページを渡します。

```CSharp:Page1.xaml.cs（抜粋）
private static Page2 page2 = null;

// コンストラクタ
public Page1()
{
    InitializeComponent();
}

// 「次へ」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (page2 == null)
    {
        // 次に表示するページ（ページ2）を生成、以後使いまわし
        page2 = new Page2();
    }

    // ページ2へ移動
    this.NavigationService.Navigate(page2);
}
```

Page2を以下のように編集します。
![wbg6-11.png](https://qiita-image-store.s3.amazonaws.com/0/142879/226903dc-4eea-88e2-1b17-369080fa65dc.png)

```Xml:Page2.xaml
<Page x:Class="WpfApplication6.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(2/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="2ページ目" FontSize="36" Margin="10"/>

        <TextBox Grid.Row="1" Text="TextBox"/>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="次へ" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>
```

```CSharp:Page2.xaml.cs（抜粋）
private static Page3 page3 = null;

// コンストラクタ
public Page2()
{
    InitializeComponent();
}

// 「次へ」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (page3 == null)
    {
        // 次に表示するページ（ページ3）を生成、以後使いまわし
        page3 = new Page3();
    }

    // ページ3へ移動
    this.NavigationService.Navigate(page3);
}
```

Page3を以下のように編集します。
![wbg6-12.png](https://qiita-image-store.s3.amazonaws.com/0/142879/58bff973-5a12-15d6-90db-3cf32b0cf348.png)

```Xml:Page3.xaml
<Page x:Class="WpfApplication6.Page3"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(3/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="3ページ目" FontSize="36" Margin="10"/>
        <TextBlock Grid.Row="1"  Text="あああああ" FontSize="36" Margin="10"/>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="完了" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>
```

```CSharp:Page3.xaml.cs（抜粋）
// コンストラクタ
public Page3()
{
    InitializeComponent();
}

// 「完了」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    // メイン画面を閉じる
    App.Current.MainWindow.Close();
}
```

# ■動かしてみる
![wbg6-20.png](https://qiita-image-store.s3.amazonaws.com/0/142879/28beacd8-e663-fb70-799c-99024fb6f8b1.png)
「次へ」ボタンを押して2ページ目に移動します。

![wbg6-21.png](https://qiita-image-store.s3.amazonaws.com/0/142879/52aae998-3cfa-fb1e-a484-a2bb2141e887.png)
「次へ」ボタンを押して3ページ目に移動します。

![wbg6-22.png](https://qiita-image-store.s3.amazonaws.com/0/142879/0a4e210c-f0ae-8720-229f-fdbf5723d281.png)
「完了」ボタンを押すとプログラムは終了します。
上に表示されているボタンはブラウザの「戻る」「進む」ボタンと同じ働きです。
これを表示したくない場合は、`NavigationWindow`の`ShowsNavigationUI`プロパティを`false`に設定します。

3ページ目から戻るボタンで2ページ目に戻りました。
進むボタンが有効になりました。
![wbg6-23.png](https://qiita-image-store.s3.amazonaws.com/0/142879/58ce2e4b-8c6a-850c-f51c-21a39e625461.png)

進むボタンのドロップダウンからもページ移動できます。
![wbg6-24.png](https://qiita-image-store.s3.amazonaws.com/0/142879/56311a56-3ad1-9e76-2379-3dc3690b9b42.png)

おしまい

---
# ■参考サイト
* [NavigationWindow クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.navigation.navigationwindow.aspx)

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](http://qiita.com/Kosen-amai/items/f2451acb2addd221193f "Windows GUIプログラミング入門5 画面レイアウト(2)、画面遷移(1)") 　 [次の記事 ＞](http://qiita.com/Kosen-amai/items/3ca00ebdbdee7776b67b "Windows GUIプログラミング入門7 システムカラー、画面レイアウト(3)")