.net column

.NET開発者のためのブログメディア
アプリ画面

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

2020年09月04日

WPFで複数のページを画面遷移する時は、NavigationWindowやFrameクラスを用いると簡単に実装できます。
この記事では、WPFのFrameクラスで画面遷移を実現する方法を解説します。さらに、モバイルアプリのようにスライドアニメーション付きで画面遷移する方法もあわせて紹介します。

PG
WPFでウィザード形式のような画面遷移をするアプリを作成したいのですが、どうすれば良いですか?
PL
WPFのFrameクラスと、NavigationService.Navigateメソッドを使って簡単に実装できますよ!

実行環境
・Windows 10
・Visual Studio 2019

WPFで画面遷移をする方法(XAMLの作成)

一口に画面遷移といっても、「画面の表示内容を切り替える」や「別のウィンドウで遷移先の画面をポップアップ表示する」など、WPFにはいくつかの実装方法があります。
今回は、次のイメージのようにWPFのFrame内で、2つのページ(Page)を切り替えて画面遷移するサンプルアプリを作成していきます。

アプリの概要

最初に、Visual Studioを起動し、新しいWPFアプリケーションプロジェクトを作成します。(今回はプログラム言語にC#を選択します)

WPFアプリケーションプロジェクトを作成

作成したプロジェクトのMainWindow.xamlを開き、次のように、Gridの下にFrame要素を追加します。

次は、画面遷移するためのPageを2つ追加します。
Pageは、[新しい項目の追加]の画面から、「ページ(WPF)」を選択して追加します。
2つのPageのファイル名はそれぞれ、Page1.xaml、Page2.xamlとします。

ページ(WPF)を追加

まず、Page1.xamlを開き次のように編集します。
画面下部のボタンをクリックすると、ページ2(Page2.xaml)の画面に遷移するようにします。

Page2.xamlを開き、次のように編集します。

WPFで画面遷移を実装する方法(C#のコード)

XAMLの準備ができたら、次はC#のコードでWPFの画面遷移を実装していきます。
まず、MainWindow.xaml.csを開き、コンストラクタで、アプリが起動した時に表示する最初のページを指定します。

次に、Page1.xaml.csを開き、ボタンクリックがクリックされた時に、Page2.xamlの画面に遷移する処理を記述します。

動作確認

ここまでで、XAMLおよびC#のコードの準備ができました。
Visual Studioでプログラムを実行して、画面遷移の動作を確認します。

画面遷移前

「ページ2へ遷移」をクリックすると、Page2に画面が切り替わればOKです。

画面遷移後

画面遷移に簡単なアニメーションを設定する方法

WPFのアニメーション機能を使って、画面遷移時にアニメーション効果を付けることができます。
モバイルアプリのように、ページがスライドしながら切り替わる簡単なアニメーションを設定してみましょう。
MainWindow.xamlを次の内容に書き換えます。

少し長いコードになりますが、MainWindow.xaml.csに次のコードを追加します。

準備が出来たらVisual Studioでプログラムを実行します。

アニメーション前

「ページ2へ遷移」をクリックすると、左へスライドするアニメーションを行いながら、Page2を表示します。

アニメーション中

アニメーションが終了すると、Page2が画面に完全に表示されます。

アニメーション後

PG
アニメーションを活用すると、見た目も凝ったアプリが作成できそうですね。
PL
今回はスライドアニメーションを使いましたが、フェードイン・フェードアウトのようなアニメーションもWPFでは実装できます。ぜひ試してみてください!

頻繁に使う画面遷移をマスターしよう!

画面遷移を行う処理は、WPFアプリケーション開発で必ずといっていいほど、よく使用します。基本の画面遷移をマスターして、WPFアプリケーション開発を効率よく進めましょう。

>>>Visual Studioを使った案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)