【C# WPF】WPFウィンドウを使った画面遷移の方法

２つの画面があって、ボタンを押すたびに別の画面に切り替わるアプリを作ろうと思います。
遷移元の画面は非表示に変更して、ユーザーから見える画面は、どちらか１つにします。

実際に動かすと次のようになります。

WPFで画面を切り替える方法は、XAMLの記述で分類すると大まかに３つあります。

1. WPFウィンドウを使う方法
2. WPFページを使う方法
3. WPFユーザーコントロールを使う方法

ここでは、1番のWPFウィンドウを使用して画面遷移をする方法を採用します。
2番は「【C# WPF】WPFページを使った画面遷移の方法」で、3番は「【C# WPF】WPFユーザーコントロールを使った画面遷移の方法」説明しています。

最初の画面を調整

まず、最初の画面にボタンを追加します。最初の画面は、デフォルトでは「MainWindow.xaml」という名前になっていると思います（以下「MainWindow.xaml」と呼んで説明します）

追加したボタンは次の画面に遷移するためのボタンになります。
次の画面との見分けが付きやすいようにラベルも追加し、背景色もつけておきます。

「MainWindow.xaml」は次のようになります。

<Grid>
    <StackPanel>
        <Label Content="MainWindow画面" Background="PaleGreen"/>
        <Button Content="画面遷移" x:Name="Button1" Click="Button1_Click"/>
    </StackPanel>
</Grid>

つぎに、「MainWindow.xaml.cs」に下のロジックを追記をします。

他の画面からこの画面に遷移できるように、画面のインスタンスを返すメソッドを定義し、この画面に遷移する度にインスタンスが生成されて重複しないように制御するロジックも加えます。

private static MainWindow? _Instance;
public static MainWindow GetInstance()
{
    _Instance ??= new();
    return _Instance;
}

もう一枚の画面を用意

遷移先になるもう一枚の画面を準備して、最初の画面と同様の調整を加えます。

まず画面の追加です。

• 「ソリューション エクスプローラー」を表示して、プロジェクトの行の上で右クリックし、出てきたメニューから「追加」→「ウィンドウ(WPF)」と選びます。
• 「新しい項目の追加」が開くので、好きな名前（以下、デフォルトの「Windows1.xaml」で説明します）にして「追加」をクリックします。

すると、新しい画面の「～～.xaml」と「～～.xaml.cs」というファイルが追加されます。デフォルトでは「Window1.xaml」と「Window1.xaml.cs」いう名前になっていると思います（以下その名前で説明します）

最初の画面と同様にボタンとロジックを追加します。

<Grid>
    <StackPanel>
        <Label Content="Window1画面" Background="PaleTurquoise"/>
        <Button Content="画面遷移" x:Name="Button1" Click="Button1_Click"/>
    </StackPanel>
</Grid>

private static Window1? _Instance;
public static Window1 GetInstance()
{
    _Instance ??= new();
    return _Instance;
}

画面の遷移をするボタンにロジックを追記

ふたつの画面に、ボタンをクリックされた時のロジックを加えます。

自分の画面のインスタンスを隠し、相手の画面のインスタンスを表示することで、画面を遷移させるわけです。

下のコードは「MainWindow.xaml.cs」の例です。同じ内容で画面名を逆にしたコードを「Window1.xaml.cs」にも追記します。

private void Button1_Click(object sender, RoutedEventArgs e)
{
    GetInstance().Hide();
    Window1.GetInstance().Show();
}

アプリ起動時の画面を調整

デフォルトの設定ではアプリ起動時に「MainWindow.xaml」がスタートしてしまい、上で作ったGetInstance()の制御から漏れてしまうので、インスタンスが重複してしまいます。
そこで、アプリ起動時にもGetInstance()が利用されるように変更し、重複を防止します。

具体的には、App.xamlの「StartupUri=”MainWindow.xaml”」を「Startup=”OnStartup”」に変更し、対応するメソッドを「App.xaml.cs」に追記することになります。

まず、「App.xaml」のApplicationタグの最後の行を変更します。

<Application x:Class="WpfApp1.App"
             ～～中略～～
            Startup="OnStartup">

つぎに、「App.xaml.cs」に次のメソッドを追記します。

private void OnStartup(object sender, StartupEventArgs e)
{
    WpfApp1.MainWindow.GetInstance().Show();
}

MainWindowの場合は、それだけでは限定できないのでネームスペースをつけて限定します。

終了ボタンを調整する

最後に終了ボタンを押された時の処理を調整します。
ここまでのままだと、画面の終了ボタンがクリックされた時、その画面は終了しますが、遷移元の画面が隠れたままで残ってしまうので、アプリが終了しません。
そこで、各画面で終了イベントを発生させてアプリ全体を終了させるように調整します。

各画面のxamlに画面を閉じる時のイベントを加えます。
具体的には「Closing=”Window_Closing”」をWindowタグの中に追記します。

<Window
	～～中略～～
	Closing="Window_Closing"
	～～中略～～ >

各画面の「～～.xaml.cs」に画面を閉じる時のイベントが発生した時に、アプリを終了するロジックを追記します。

protected virtual void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    Application.Current.Shutdown();
}

これで、ウィンドウによる画面遷移ができるように、なりました。

まとめ

WPFでのウィンドウによる画面遷移の方法をまとめると次のようになります。

• 各画面の「～～.xaml」に以下を追記
  • 画面を閉じるイベントを加える
• 各画面の「～～.xaml.cs」に以下を追記
  • 画面のインスタンスを返すメソッドを定義する
  • 画面遷移のイベントが発生したら、自分の画面を隠し、遷移先の画面を表示する
  • 画面を閉じるイベントが発生したら、アプリを終了する
• App.xaml
  • アプリの開始方法をOnStartupに変更する
• App.xaml.cs
  • OnStartupメソッドで最初の画面を表示する