【C# WPF】WPFユーザーコントロールを使った画面遷移の方法

WPFで画面を遷移させる方法がいくつかありますが、ここでは「WPFユーザーコントロール」を使う方法をまとめます。

この方法は、ほぼ「WPFページ」を使った画面遷移の方法と同じなので、すでに知っている方は「ナビゲーション用のバーについて」まで読み飛ばしても良いでしょう。

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

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

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

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

スポンサーリンク目次

画面に遷移用のボタンとFrameを追加
WPFユーザーコントロールを追加
画面を切り替えるコードを追記
ナビゲーション用のバーについて
まとめ

画面に遷移用のボタンとFrameを追加

まず、画面のxamlファイルにボタンを追加します。デフォルトで作成した場合は「MainWindow.xaml」という名前なので以下は、この名前で説明します。

次のようにコードを追加します。

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" NavigationUIVisibility="Hidden"/> </StackPanel> </Grid>

ボタンには見分けが付きやすいように「ユーザーコントロール1」などと表記しておきます。そして「WPFユーザーコントロール」を配置するためのFrameを加えます。

ここでFrameに「NavigationUIVisibility=”Hidden”」という属性をつけていますが、これは後のナビゲーションバーについての部分で説明します。

WPFユーザーコントロールを追加

画面を遷移させるために「ユーザーコントロール(WPF)」を２つ作成します。

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

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

UserControl1.xaml <Grid> <StackPanel> <Label Content="ユーザーコントロール１：ラベル" Background="DeepSkyBlue"/> <TextBox x:Name="TextBox1" Text="ユーザーコントロール１：テキスト"/> </StackPanel> </Grid>

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

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

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

MainWindow.xaml.cs public MainWindow() { InitializeComponent(); UserControl1 = new UserControl1(); UserControl2 = new UserControl2(); } public UserControl UserControl1 { get; set; } public UserControl UserControl2 { get; set; } private void Button1_Click(object sender, RoutedEventArgs e) { Frame1.Navigate(UserControl1); } private void Button2_Click(object sender, RoutedEventArgs e) { Frame1.Navigate(UserControl2); }

プロパティをUserControlクラスではなく、Uriクラスに代えても動作するのは「WPFページ」と同じです。

ナビゲーション用のバーについて

ここまでは、「WPFユーザーコントロール」を使った画面遷移の方法と「WPFページ」を使った画面遷移の方法は、ほとんど同じです。しかしナビゲーション用のバーについては少し異なります。

先ほど、Frameを記載した際に「NavigationUIVisibility=”Hidden”」として説明を続けました。その理由は、「WPFユーザーコントロール」の場合には、「WPFページ」と違って、ナビゲーション用のバーの表示に少し問題があるからです。

次の図のようにプルダウンを表示させると「無題」という表示になってしまうのです。

Uriクラスを使った場合は「UserControl2.xaml」などとxamlのファイル名になってしまいます。いずれにせよ、ユーザーからすると「？？」となるので、ほめられた表示ではありません。

したがって「WPFユーザーコントロール]を使う場合は、ナビゲーション用のバーを表示させない方が良いでしょう。

なんとか「WPFユーザーコントロール」もナビゲーション用のバーも使いたいという場合は、「MainWindow」に直接「WPFユーザーコントロール」を配置せず、「WPFページ」を間に挟む方法で回避できます。

入れ子にするわけですね。

まず「MainWindow」のFrameには「WPFページ」を配置して画面遷移させます。ここまでは「WPFページを使った画面遷移の方法と同じです。

次に「WPFページ」にFrameに追記して、そこに「WPFユーザーコントロール」を配置します。

例えば、「WPFページ」のxamlは次のようにします。

Page1.xaml <Grid> <StackPanel> <Frame x:Name="FrameOfPage1"/> </StackPanel> </Grid>

そして、Page1のxaml.csは次のようにします。プロパティを追加して、コンストラクタで生成とNavigateを行って表示させます。

Page1.xaml.cs public Page1() { InitializeComponent(); UserControl1 = new UserControl1(); FrameOfPage1.Navigate(UserControl1); } public UserControl UserControl1 { get; set; }

この方法だと、ナビゲーション用のバーのプルダウンに表示されるのは「WPFページ」のタイトルになります。

これで「WPFユーザーコントロール」を使いながら、ナビゲーション用のバーのプルダウンもユーザーが判りやすい表示になります。

まとめ

これで、「WPFユーザーコントロール」を使って画面遷移ができるように、なりました。「WPFページ」を使う方法と、ほとんど同じなので、まとめは「【C# WPF】WPFページを使った画面遷移の方法」を参照してください。

「WPFユーザーコントロール」だけ特に注意するポイントは次の通りです。

「WPFユーザーコントロール」を使って画面遷移を行う場合には、ナビゲーション用のバーを表示させないほうが良い（プルダウンの表示がユーザー向けではないため）
どうしても「WPFユーザーコントロール」とナビゲーション用のバーを両方使いたい場合は、間に「WPFページ」をはさんで入れ子にすると良い

📎📎📎📎📎📎📎📎📎📎