C#入門 WPFで画面遷移のプログラミングに挑戦！

WPFで画面遷移の実装

今回はC#でWPFアプリケーションの制作にポンコツ２人組が挑戦してみました。開発環境はVisualStudio2019です。 Page1とPage2にそれぞれ画面遷移するアプリケーションです。画面遷移の際に文字列をパラメータとして渡すようにしています。 C#初心者が制作したものなのでいろいろとおかしい部分が多いと思います。プログラムを流用する際は適宜修正してください。

※この記事は2023/08/30時点の情報です。

※本サイトはプロモーションが含まれています。

MainWindow.xaml
Frameを配置しました。この中が他のページと切り替わるイメージです。

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
</Window>

MainWindow.xaml.cs
初期ページにPage1を指定しています。Page1の引数には"サンプル"という文字列を渡しています。

using System.Windows;

namespace WpfApp2
{
    /// 
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 最初に表示するページを設定
            MainFrame.Navigate(new Page1("サンプル"));
        }
    }
}

Page1.xaml
テキストとボタンのみのシンプルなページです。ボタンをクリックするとPage2に遷移します。

<Page x:Class="WpfApp2.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Page1">

    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="This is Page 1" FontSize="24"/>
            <Button Content="Go to Page 2" Click="GoToPage2_Click"/>
        </StackPanel>
    </Grid>
</Page>

Page1.xaml.cs
受け取った引数をコンソールに出力しています。ボタンをクリックした時の処理も実装しています。 Page2の引数には"サンプル3"という文字列を渡しています。

using System.Windows;
using System.Windows.Controls;

namespace WpfApp2
{
    public partial class Page1 : Page
    {
        public Page1(string param)
        {
            InitializeComponent();
            System.Console.WriteLine("パラメータ：" + param);
        }

        private void GoToPage2_Click(object sender, RoutedEventArgs e)
        {
            // Page2へ遷移
            NavigationService.Navigate(new Page2("サンプル3"));
        }
    }
}

Page2.xaml
テキストとボタンのみのシンプルなページです。ボタンをクリックするとPage1に遷移します。

<Page x:Class="WpfApp2.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Page2">

    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="This is Page 2" FontSize="24"/>
            <Button Content="Go to Page 1" Click="GoToPage1_Click"/>
        </StackPanel>
    </Grid>
</Page>

Page2.xaml.cs
受け取った引数をコンソールに出力しています。ボタンをクリックした時の処理も実装しています。 Page1の引数には"サンプル2"という文字列を渡しています。

using System.Windows;
using System.Windows.Controls;

namespace WpfApp2
{
    public partial class Page2 : Page
    {
        public Page2(string param)
        {
            InitializeComponent();
            System.Console.WriteLine("パラメータ：" + param);
        }

        private void GoToPage1_Click(object sender, RoutedEventArgs e)
        {
            // Page1へ遷移
            NavigationService.Navigate(new Page1("サンプル2"));
        }
    }
}

以下がアプリケーションを実行した画面です。上のスクリーンショットがPage1、下がPage2です。いろいろ試行錯誤しましたが、何とかC#のWPFで画面遷移することができました。

C#のWPFでPage1からPage2へ画面遷移