前の話し

📖　WPFって何だぜ（＾～＾）？

気が早い人向け

📖　wpf-frame-page-practice - Git Hub に置いたもの

今回の話し

「　WPFで　どうやって画面遷移すんだぜ？　ウィンドウだけでなく　ダイアログボックスも遷移するぜ？」

「　ひとまず　ページの切り替えを覚えろだぜ」

📖　WPFとVisual Studioで画面遷移を実装する方法

「　👆　Frame と Page っていうのが　あるようよ」

Frame と Page

<Window x:Class="WpfFramePagePractice.MainWindow"
        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:local="clr-namespace:WpfFramePagePractice"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

「　👆　最初はこんな感じだな」

<Frame Name="frame" NavigationUIVisibility="Hidden"/>

「　👆　Gridタグに　上記の　Frame タグを挟めばいいらしいぜ」

<Window x:Class="WpfFramePagePractice.MainWindow"
        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:local="clr-namespace:WpfFramePagePractice"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Frame Name="frame" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

「　👆　つまり　こう」

「　👆　実行しても何も変わり映えしないけど」

「　HTML にも　iframe　（インナーフレーム）ってタグが有ったしな。
ページの場所を指定したら　ページが出てくるような場所を取ってるんじゃないか？」

「　👆　じゃあ　プロジェクトに　ページを追加しようぜ？」

「　👆　ページ（WPF） な」

<Page x:Class="WpfFramePagePractice.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:WpfFramePagePractice"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page1">

    <Grid>

    </Grid>
</Page>

「　👆　ページも　何にもないぜ」

「　Page2 も作れだぜ」

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Label FontSize="50" Grid.Row="0">Page1</Label>
        <Button Grid.Row="1">ページ２へ遷移</Button>

「　👆　ページ1　の　Gridタグの間に　このコードを挟むらしいぜ」

<Page x:Class="WpfFramePagePractice.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:WpfFramePagePractice"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page1">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Label FontSize="50" Grid.Row="0">Page1</Label>
        <Button Grid.Row="1">ページ２へ遷移</Button>
    </Grid>
</Page>

「　👆　つまり　こう」

<Label FontSize="50">Page2</Label>

「　👆　ページ２には　これだけ　Gridタグに挟めばいいようだぜ」

<Page x:Class="WpfFramePagePractice.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:WpfFramePagePractice"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page2">

    <Grid>
        <Label FontSize="50">Page2</Label>
    </Grid>
</Page>

「　👆　つまり　こう」

「　Page2 も　できたようだな」

「　Frame と Page1 と Page2 が　バラバラに在っても　何にもならないから
遷移をするコードを書く必要が　あるはずなのよね」

        Uri uri = new Uri("/Page1.xaml", UriKind.Relative);
        frame.Source = uri;

「　👆　MainWindowのコンストラクタの　InitializeComponent();　のあとに
上記の２行を追加すればいいみたいだぜ」

using System;
using System.Windows;

namespace WpfFramePagePractice
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Uri uri = new Uri("/Page1.xaml", UriKind.Relative);
            frame.Source = uri;
        }
    }
}

「　👆　つまり　こう」

「　👆　多分　Frame　に　Page1　が出てるんだろ　これ」

「　👆　ボタンをクリックして選んで、プロパティ ウィンドウの 雷みたいなマークのボタンをクリックして、
Click とかいてある行の　テキストボックスを　ダブルクリックしろだぜ」

「　👆　Button_Click という名前のスケルトンができてるから、」

        var page2 = new Page2();
        NavigationService.Navigate(page2);

「　👆　上記のコードを書けだぜ。そしてビルド」

「　そういやお父ん　ビルドすること　説明すんの　よく忘れるよな」

「　👆　そして実行。　ページ２へ遷移　と書いてあるボタンをクリックすると」

「　👆　Page2　へ遷移したぜ」

「　やったな！」

「　やったわね」

「　やったぜ！」