WPFってどうやって画面遷移すんの(^~^)?(Frame, Page 編)

へぎょー(^~^) へべん(^~^) 公開下書き

前の話し

📖 WPFって何だぜ(^~^)?

気が早い人向け

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

今回の話し

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

kifuwarabe-futsu.png
「 ひとまず ページの切り替えを覚えろだぜ」

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

ohkina-hiyoko-futsu2.png
「 👆 Frame と Page っていうのが あるようよ」

Frame と Page

20210831pg168.png

<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>

ramen-tabero-futsu2.png
「 👆 最初はこんな感じだな」

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

ramen-tabero-futsu2.png
「 👆 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>

ramen-tabero-futsu2.png
「 👆 つまり こう」

20210831pg169.png

ramen-tabero-futsu2.png
「 👆 実行しても何も変わり映えしないけど」

kifuwarabe-futsu.png
「 HTML にも iframe (インナーフレーム)ってタグが有ったしな。
ページの場所を指定したら ページが出てくるような場所を取ってるんじゃないか?」

20210831pg170a1.png

ramen-tabero-futsu2.png
「 👆 じゃあ プロジェクトに ページを追加しようぜ?」

20210831pg171.png

ramen-tabero-futsu2.png
「 👆 ページ(WPF) な」

20210831pg172.png

<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>

ramen-tabero-futsu2.png
「 👆 ページも 何にもないぜ」

kifuwarabe-futsu.png
「 Page2 も作れだぜ」

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

ramen-tabero-futsu2.png
「 👆 ページ1 の Gridタグの間に このコードを挟むらしいぜ」

20210831pg173.png

<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">ページ2へ遷移</Button>
    </Grid>
</Page>

ramen-tabero-futsu2.png
「 👆 つまり こう」

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

ramen-tabero-futsu2.png
「 👆 ページ2には これだけ Gridタグに挟めばいいようだぜ」

20210831pg174.png

<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>

ramen-tabero-futsu2.png
「 👆 つまり こう」

kifuwarabe-futsu.png
「 Page2 も できたようだな」

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

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

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

20210831pg175a1.png

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;
        }
    }
}

ramen-tabero-futsu2.png
「 👆 つまり こう」

20210831pg176.png

ramen-tabero-futsu2.png
「 👆 多分 Frame に Page1 が出てるんだろ これ」

20210831pg177a1.png

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

20210831pg178a1.png

ramen-tabero-futsu2.png
「 👆 Button_Click という名前のスケルトンができてるから、」

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

ramen-tabero-futsu2.png
「 👆 上記のコードを書けだぜ。そしてビルド」

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

20210831pg179.png

ramen-tabero-futsu2.png
「 👆 そして実行。 ページ2へ遷移 と書いてあるボタンをクリックすると」

20210831pg180.png

ramen-tabero-futsu2.png
「 👆 Page2 へ遷移したぜ」

kifuwarabe-futsu.png
「 やったな!」

ohkina-hiyoko-futsu2.png
「 やったわね」

ramen-tabero-futsu2.png
「 やったぜ!」

何度でもクリック!→

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位 の最近の記事