PR

【C# WPF】WPFページを使った画面遷移の方法

C#
2023.12.12

WPFで画面を遷移させる方法がいくつかありますが、ここでは「WPFページ」を使う方法をまとめます。

この方法では画面の一部を差し替えて画面を切り替えます。例えば、次のようにボタンから下の部分を切り替える画面を作ることができます。

WPFで画面を切り替える方法は、XAMLの記述で分類すると大まかに３種類あります。
1「WPFウィンドウ」を使う方法
2「WPFページ」を使う方法
3「WPFユーザーコントロール」を使う方法

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

使用環境（MVVMは使いません）
・Window 11
・Visual Studio 2022
・.NET 7.0 (C# 11.0)

スポンサーリンク

メインの画面を調整

まず、メインの画面のxamlファイルにボタンを追加します。

デフォルトでは「MainWindow.xaml」という名前なので以下は、この名前で説明します。画面を遷移させるためのボタンになります。

さらに、「WPFページ」を配置するためにFrameを加えます。

MainWindow.xaml
<Grid>
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Button Content="ページ1" x:Name="Button1" Click="Button1_Click" Margin="5,5,5,5"/>
            <Button Content="ページ2" x:Name="Button2" Click="Button2_Click" Margin="5,5,5,5"/>
        </StackPanel>
        <Frame x:Name="Frame1"/>
    </StackPanel>
</Grid>

WPFページを作成

Frameの中に表示する「WPFページ」を作成します。切り替えるので２つ作ります。

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

分かりやすいように、Page1.xamlのGridにラベルやテキストボックスを追加しておきましょう。
今回は、次のようにしました。

Page1.xaml
<Grid>
    <StackPanel>
        <Label Content="ページ１：ラベル" Background="Honeydew"/>
        <TextBox x:Name="TextBox1" Text="ページ１：テキスト"/>
    </StackPanel>
</Grid>

同様にして、Page2も作成します。

画面を切り替えるコードを追記

「MainWindow.xaml.cs」に画面を切り替えるコードを追記します。
まず、Page1とPage2を保持するプロパティを定義し、コンストラクタで生成しておきます。
次に、ボタンのイベントでプロパティを指定してFrameを切り替えます。

MainWindow.xaml.cs
public Page Page1 { get; set; }
public Page Page2 { get; set; }

public MainWindow()
{
    InitializeComponent();
    Page1 = new Page1();
    Page2 = new Page2();
}

private void Button1_Click(object sender, RoutedEventArgs e)
{
    Frame1.Navigate(Page1);
}

private void Button2_Click(object sender, RoutedEventArgs e)
{
    Frame1.Navigate(Page2);
}

なお、プロパティをUriクラスに変更しても動作します（片方のページだけを変更してもOK）

例えば、Page1を変更する場合は、次のように書き換えます。

MainWindow.xaml.cs
//Page1 = new Page1();
public Uri Uri1 { get; set; }
MainWindow.xaml.cs
//Page1 = new Page1();
Uri1 = new Uri("Page1.xaml", UriKind.Relative);
MainWindow.xaml.cs
//Frame1.Navigate(Page1);
Frame1.Navigate(Uri1);

以上で基本的な部分はOKです。このままでも動作します。

初期表示の調整

今のままだと初期画面のFrameには何も表示されません。表示しておきたい場合が多いと思います。
初期画面で「WPFページ」をする方法は簡単で、画面のコンストラクタでも、ボタンのイベントで行ったことをすればいいだけです。
次のように変更して起きましょう。

MainWindow.xaml.cs
public MainWindow()
{
    InitializeComponent();
    Page1 = new Page1();
    Page2 = new Page2();
    Frame1.Navigate(Page1);
}

ナビゲーション用のバーの調整

画面を切り替えるとFrameの上端にナビゲーション用のバーが出てきます。
これも最初から表示しておきたい場合が多いと思います。
ナビゲーション用のバーの表示は、Frameタグに「NavigationUIVisibility」という属性をつけると制御できます。
最初から表示する場合は、次のように “Visible” と指定します。

MainWindow.xaml
<Frame x:Name="Frame1" NavigationUIVisibility="Visible"/>

なお、ナビゲーション用のバーを表示したくない場合は “Hidden” にします。

まとめ

これで、「WPFページ」を使って画面遷移ができるように、なりました。まとめると、次のようになります。

  • メイン画面の「～～.xaml」に以下を追記
    • Frameを記載する
    • 画面遷移用のボタンを追加する
  • 各ページを作成
  • メイン画面の「～～.xaml.cs」に以下を追記
    • 各ページを保持するプロパティを追加する
    • コンストラクタで上記のプロパティを生成する
    • 画面遷移を行う箇所でNavigateメソッドを実行する

コメント

スポンサーリンク
タイトルとURLをコピーしました