.NET開発者のためのブログメディア
WPFとVisual Studioで画面遷移を実装する方法
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#を選択します）
作成したプロジェクトのMainWindow.xamlを開き、次のように、Gridの下にFrame要素を追加します。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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>
|
次は、画面遷移するためのPageを2つ追加します。
Pageは、[新しい項目の追加]の画面から、「ページ(WPF)」を選択して追加します。
2つのPageのファイル名はそれぞれ、Page1.xaml、Page2.xamlとします。
まず、Page1.xamlを開き次のように編集します。
画面下部のボタンをクリックすると、ページ２(Page2.xaml)の画面に遷移するようにします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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>
|
Page2.xamlを開き、次のように編集します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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>
|
WPFで画面遷移を実装する方法（C#のコード）
XAMLの準備ができたら、次はC#のコードでWPFの画面遷移を実装していきます。
まず、MainWindow.xaml.csを開き、コンストラクタで、アプリが起動した時に表示する最初のページを指定します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/// <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の画面に遷移する処理を記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/// <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を次の内容に書き換えます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>
|
少し長いコードになりますが、MainWindow.xaml.csに次のコードを追加します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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;
}
|
準備が出来たらVisual Studioでプログラムを実行します。
「ページ２へ遷移」をクリックすると、左へスライドするアニメーションを行いながら、Page2を表示します。
アニメーションが終了すると、Page2が画面に完全に表示されます。
- PG
- アニメーションを活用すると、見た目も凝ったアプリが作成できそうですね。
- PL
- 今回はスライドアニメーションを使いましたが、フェードイン・フェードアウトのようなアニメーションもWPFでは実装できます。ぜひ試してみてください！
頻繁に使う画面遷移をマスターしよう！
画面遷移を行う処理は、WPFアプリケーション開発で必ずといっていいほど、よく使用します。基本の画面遷移をマスターして、WPFアプリケーション開発を効率よく進めましょう。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)