開発部/技術/Visual Studio 2008/WPF/画面遷移と値の受け渡し - axis-tech @ ウィキ

開発部 > 技術 > Visual Studio 2008 > WPF > 画面遷移と値の受け渡し

WPFでの画面遷移方法とページ間で値を受け渡す方法について紹介します。

WPFではNavigationServiceクラスを利用して画面遷移を実現します。
画面１⇒画面２という感じに画面遷移するサンプルを作ってみたいと思います。

画面１では画面２に渡す文字列と文字色を入力し、ハイパーリンクをクリックすることで画面２に遷移します。
XAMLはこんな感じです。

<Page x:Class="TestApplication.NavigationTest1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="NavigationTest1" Loaded="Page_Loaded">
    <StackPanel>
        <TextBox Name="txtTest" Width="150" Height="24" HorizontalAlignment="Left" Margin="5"></TextBox>
        <ComboBox Height="24" Name="cboColors" Width="120" HorizontalAlignment="Left" Margin="5" />
        <TextBlock Margin="5">
            次のページに移動するには<Hyperlink Name="hlTest" Click="hlTest_Click">ここ</Hyperlink>をクリックしてください。   
        </TextBlock>
    </StackPanel>
</Page>

画面２では画面１より渡された文字列、文字色をTextBlockに設定します。
XAMLはこんな感じ。

<Page x:Class="TestApplication.NavigationTest2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="NavigationTest2" Loaded="Page_Loaded">
    <Page.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="DarkGray" Offset="1"/>
        </LinearGradientBrush>
    </Page.Background>
    <StackPanel>
        <TextBlock Name="tbApplication" Margin="10" FontSize="30" />
    </StackPanel>
</Page>

ではC#コードのほうを見ていきましょう。
画面１のC#コードです。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Navigation;
using System.Reflection;
 
namespace TestApplication
{
    /// <summary>
    /// NavigationTest1.xaml の相互作用ロジック
    /// </summary>
    public partial class NavigationTest1 : Page
    {
        public NavigationTest1()
        {
            InitializeComponent();
        }
 
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            // コンボボックスにColorsクラスの一覧を設定
            foreach (PropertyInfo info in typeof(Colors).GetProperties())
            {
                cboColors.Items.Add(info.Name);
            }
            cboColors.SelectedIndex = 0;
 
        }
 
        private void hlTest_Click(object sender, RoutedEventArgs e)
        {
            // Applicationオブジェクトにテキストボックスの値を格納
            Application.Current.Properties["input"] = txtTest.Text;
 
            // 画面２を生成
            NavigationTest2 next = new NavigationTest2();
 
            // 画面２のプロパティに値を設定
            next.TextBlockForeground = 
              new SolidColorBrush((Color)ColorConverter.ConvertFromString(cboColors.SelectedItem.ToString()));
 
            // 画面２に遷移
            NavigationService.Navigate(next);
        }
    }
}

画面２のC#コードです。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
 
namespace TestApplication
{
    /// <summary>
    /// NavigationTest2.xaml の相互作用ロジック
    /// </summary>
    public partial class NavigationTest2 : Page
    {
        private SolidColorBrush _textBlockForeground = new SolidColorBrush();
 
        public SolidColorBrush TextBlockForeground
        {
            get; set;
        }
 
        public NavigationTest2()
        {
            InitializeComponent();
        }
 
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            tbApplication.Text = Application.Current.Properties["input"].ToString();
            tbApplication.Foreground = this.TextBlockForeground;
        }
    }
}

画面１のPage_LoadedでコンボボックスにColorsクラスの一覧を設定しています。
この処理に関しての詳しい説明はクラスのプロパティの一覧をComboBoxに設定するを参照してください。

ページ間での値の受け渡し方法には以下の2通りがあります。

ApplicationオブジェクトのPropertiesを使用する。
遷移先ページにプロパティを用意し、そこに値を設定する。

今回は画面２のTextBlockのテキストにApplicationオブジェクトから値を設定し、文字色は画面２のプロパティより設定しています。
両方とも紹介するためにこのようにしましたが、本来はちゃんと使い分けをしなくてはなりませんね。
ApplicationオブジェクトのPropertiesの値は明示的にクリアしない限り、アプリが実行されている間ずっと存在し続けるので気をつけなければいけません。
たくさんのページで共通で使用する値等を渡すときに採用するのが良さそうですね。
むしろ、そういった場合しか使わないほうがよいでしょう。

次に画面遷移方法ですが、前述したとおりNavigationServiceクラスを利用します。
画面２のインスタンスを生成してNavigationServiceクラスのNavigateメソッドに渡すことによって画面遷移を実現します。

では実行してみます。