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

Visual Studio WPF

.NET
C#
Visual Studio
WPF
プログラミング言語
開発環境(IDE)

公開日時: 2020-09-04 　更新日時: 2022-06-09

この記事でわかること

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

プログラマー: WPFでウィザード形式のような画面遷移をするアプリを作成したいのですが、どうすれば良いですか？

プロジェクト リーダー: WPFのFrameクラスと、NavigationService.Navigateメソッドを使って簡単に実装できますよ！

実行環境
・Windows 10
・Visual Studio 2019

WPFで画面遷移をする方法（XAMLの作成）

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

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

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

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

<Window x:Class="SampleNaviApplication.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:SampleNaviApplication"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800" >

<Grid>

</Grid>

</Window>

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

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

<Page x:Class="SampleNaviApplication.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:SampleNaviApplication"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Background="LawnGreen"
      Title="Page1">

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

<Page x:Class="SampleNaviApplication.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:SampleNaviApplication"

mc:Ignorable="d"

d:DesignHeight="450" d:DesignWidth="800"

Background="LawnGreen"

Title="Page1">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</Page>

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

<Page x:Class="SampleNaviApplication.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:SampleNaviApplication"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Background="LightCoral"
      Title="Page2">
    <Grid>
        <Label FontSize="50">Page2</Label>
    </Grid>
</Page>

<Page x:Class="SampleNaviApplication.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:SampleNaviApplication"

mc:Ignorable="d"

d:DesignHeight="450" d:DesignWidth="800"

Background="LightCoral"

Title="Page2">

<Grid>

</Grid>

</Page>

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

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

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

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

/// <summary>

/// MainWindow.xaml の相互作用ロジック

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

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

frame.Source = uri;

}

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

/// <summary>
/// Page1.xaml の相互作用ロジック
/// </summary>
public partial class Page1 : Page
{
    public Page1()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var page2 = new Page2();
        NavigationService.Navigate(page2);
    }
}

/// <summary>

/// Page1.xaml の相互作用ロジック

/// </summary>

public partial class Page1 : Page

{

public Page1()

{

InitializeComponent();

}

private void Button_Click(object sender, RoutedEventArgs e)

{

var page2 = new Page2();

NavigationService.Navigate(page2);

}

動作確認

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

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

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

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

<Window x:Class="SampleNaviApplication.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:SampleNaviApplication"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" >
    <Grid>
        <Image Name="image"/> <!--★追加-->
        <Frame Name="frame" NavigationUIVisibility="Hidden" Background="#FFF" Navigating="Frame_Navigating"/> <!--★BackgroundおよびNavigatingイベントを追加-->
    </Grid>
</Window>

<Window x:Class="SampleNaviApplication.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:SampleNaviApplication"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800" >

<Grid>

</Grid>

</Window>

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

private bool _allowDirectNavigation = false;
private NavigatingCancelEventArgs _navArgs = null;

/// <summary>
/// 画面遷移前にFrameから発生するイベント
/// デフォルトの処理をキャンセルし、アニメーションしながら画面遷移するようにします。
/// </summary>
private void Frame_Navigating(object sender, NavigatingCancelEventArgs e)
{
    if (frame.Content != null && !_allowDirectNavigation)
    {
        e.Cancel = true;
        _navArgs = e;

        // 遷移前のページを画像に変換しイメージに設定
        var visual = frame;
        var bounds = VisualTreeHelper.GetDescendantBounds(visual);
        var bitmap = new RenderTargetBitmap(
            (int)bounds.Width,
            (int)bounds.Height,
            96.0,
            96.0,
            PixelFormats.Pbgra32);
        var dv = new DrawingVisual();
        using (var dc = dv.RenderOpen())
        {
            var vb = new VisualBrush(visual);
            dc.DrawRectangle(vb, null, bounds);
        }
        bitmap.Render(dv);
        bitmap.Freeze();
        image.Source = bitmap;
        
        // フレームに遷移先のページを設定
        _allowDirectNavigation = true;
        frame.Navigate(_navArgs.Content);
        
        // フレームを右からスライドさせるアニメーション
        ThicknessAnimation animation0 = new ThicknessAnimation();
        animation0.From = new Thickness(frame.ActualWidth, 0, -1 * frame.ActualWidth, 0);
        animation0.To = new Thickness(0, 0, 0, 0);
        animation0.Duration = TimeSpan.FromMilliseconds(300);
        frame.BeginAnimation(MarginProperty, animation0);

        // 遷移前ページを画像可した要素を左にスライドするアニメーション
        ThicknessAnimation animation1 = new ThicknessAnimation();
        animation1.From = new Thickness(0, 0, 0, 0);
        animation1.To = new Thickness(-1 * frame.ActualWidth, 0, frame.ActualWidth, 0);
        animation1.Duration = TimeSpan.FromMilliseconds(300);

        image.BeginAnimation(MarginProperty, animation1);
    }
  
    _allowDirectNavigation = false;
}

private bool _allowDirectNavigation = false;

private NavigatingCancelEventArgs _navArgs = null;

/// <summary>

/// 画面遷移前にFrameから発生するイベント

/// デフォルトの処理をキャンセルし、アニメーションしながら画面遷移するようにします。

/// </summary>

private void Frame_Navigating(object sender, NavigatingCancelEventArgs e)

{

if (frame.Content != null && !_allowDirectNavigation)

{

e.Cancel = true;

_navArgs = e;

// 遷移前のページを画像に変換しイメージに設定

var visual = frame;

var bounds = VisualTreeHelper.GetDescendantBounds(visual);

var bitmap = new RenderTargetBitmap(

(int)bounds.Width,

(int)bounds.Height,

96.0,

PixelFormats.Pbgra32);

var dv = new DrawingVisual();

using (var dc = dv.RenderOpen())

{

var vb = new VisualBrush(visual);

dc.DrawRectangle(vb, null, bounds);

}

bitmap.Render(dv);

bitmap.Freeze();

image.Source = bitmap;

// フレームに遷移先のページを設定

_allowDirectNavigation = true;

frame.Navigate(_navArgs.Content);

// フレームを右からスライドさせるアニメーション

ThicknessAnimation animation0 = new ThicknessAnimation();

animation0.From = new Thickness(frame.ActualWidth, 0, -1 * frame.ActualWidth, 0);

animation0.To = new Thickness(0, 0, 0, 0);

animation0.Duration = TimeSpan.FromMilliseconds(300);

frame.BeginAnimation(MarginProperty, animation0);

// 遷移前ページを画像可した要素を左にスライドするアニメーション

ThicknessAnimation animation1 = new ThicknessAnimation();

animation1.From = new Thickness(0, 0, 0, 0);

animation1.To = new Thickness(-1 * frame.ActualWidth, 0, frame.ActualWidth, 0);

animation1.Duration = TimeSpan.FromMilliseconds(300);

image.BeginAnimation(MarginProperty, animation1);

}

_allowDirectNavigation = false;

}

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

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

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

プログラマー: アニメーションを活用すると、見た目も凝ったアプリが作成できそうですね。

プロジェクト リーダー: 今回はスライドアニメーションを使いましたが、フェードイン・フェードアウトのようなアニメーションもWPFでは実装できます。ぜひ試してみてください！

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

WPFで画面遷移をする方法（XAMLの作成）

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

動作確認

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

WPFで画面遷移をする方法（XAMLの作成）

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

動作確認

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

Visual StudioとC#を使って簡単なアプリを作成する方法

Visual Studioの使い方解説その2【C#コードの実行】

【C#活用】WPFでMVVMパターンを実装する際の注意点

WPFのDataGridの使い方。データを表示・カスタマイズする方法

WPFのデータバインディングとは？C#によるデータの操作方法