グラフィックス目次

(1)

■ WPF の概要 ■

此のチュートリアルでは、殆どのWindows Presentation Foundation（WPF）アプリケーションに共

通の要素を含む WPF アプリケーションの開発の概要に付いて説明する。此の様な共通の要素には、

Extensible Application Markup Language（(XAML)マークアップ、分離コード、アプリケーション定義、コントロール、レイアウト、データバインディング、スタイル等が有る。此のチュートリアルでは、次の手順に従って、簡単なWPF アプリケーションを作成して行く。・XAML を定義して、アプリケーションのユーザーインターフェイス（UI）の外観を設計する。・アプリケーションの動作を構築するコードを記述する。・アプリケーション定義を作成して、アプリケーションを管理する。・コントロールの追加とレイアウトの作成を行い、アプリケーションのUI を構成する。・アプリケーションのUI 全体で一貫性の有る外観を作成する為のスタイルを作成する。・UI をデータにバインドして、データから UI を設定し、データと UI の同期を維持する。此のチュートリアルの最後には、ユーザーが選択した個人の経費報告書を表示出来るスタンドアロンの Windows アプリケーションが完成する。此のアプリケーションは、ブラウザースタイルのウィンドウでホストされる複数のWPF ページから構成される。

此のチュートリアルの構築に使用するサンプルコードは、Microsoft Visual Basic と C#の両方が用意されて居る。

■ アプリケーションプロジェクトの作成

此のセクションでは、アプリケーション定義、2 つのページ、及び、1 つのイメージが含まれるアプリケーションインフラストラクチャを作成する。

１．Visual Basic 又は Visual C#で ExpenseIt と謂う名前の新しい WPF アプリケーションプロジェクトを作成する。

※ 此のチュートリアルでは、.NET Framework 4 で使用出来る DataGrid コントロールを使用する。プロジェクトで.NET Framework 4 を対象として欲しい。詳細に付いては、「方法: .NET Framework のバージョンをターゲットにする」（ドキュメント内）を参照され度い。

２．Application.xaml（Visual Basic）又は App.xaml（C#）をダブルクリックして開く。

此のXAML ファイルでは、WPF アプリケーションと総てのアプリケーションリソースを定義する。

亦、此のファイルは、アプリケーションの起動時に自動的に表示するUI を指定する為にも使用さ

れる。此の例では、MainWindow.xaml を指定して居る。

Visual Basic では、XAML は次の様に成る（既定で下記の様に設定される）。

W

(2)

XAML <Application x:Class="Application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application> C#では、次の様に成る（既定で下記の様に設定される）。 XAML <Application x:Class="ExpenseIt.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application> ３．MainWindow.xaml を開く。此の XAML ファイルは、アプリケーションのメインウィンドウで有り、ページで作成されたコンテンツを表示する。Window クラスは、ウィンドウのプロパティ（タイトル、サイズ、アイコン等）を定義し、イベント（ウィンドウを閉じたり非表示にしたりする等）を処理する。

４．Window 要素を NavigationWindow に変更する（XAML を書き換える）。

此のアプリケーションでは、ユーザー操作に応じて様々なコンテンツに移動する。其の為、メインのWindow を NavigationWindow に変更する必要が有る。NavigationWindow は、Window の総てのプロパティを継承する。XAML ファイル内の NavigationWindow 要素は、NavigationWindow

クラスのインスタンスを作成する。詳細に付いては、「ナビゲーションの概要」を参照され度い。５．NavigationWindow 要素の次のプロパティを変更する（XAML 書換、プロパティ設定の孰れも可）。・Title プロパティを "ExpenseIt" に設定する。・Width プロパティを 500 ピクセルに設定する。・Height プロパティを 350 ピクセルに設定する。・NavigationWindow タグの間の Grid 要素を削除する。

Visual Basic では、XAML は次の様に成る。

XAML

<NavigationWindow x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

(3)

Title="ExpenseIt" Height="350" Width="500"> </NavigationWindow> C#では、次の様に成る XAML <NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

６．MainWindow.xaml.vb 又は MainWindow.xaml.cs を開く。

此のファイルは、MainWindow.xaml で宣言されたイベントを処理するコードを含む分離コードファイルで有る。此のファイルには、XAML で定義されたウィンドウの部分クラスが含まれて居る。

７．C#を使用して居る場合は、MainWindow クラスが NavigationWindow から派生する様に変更する。

Visual Basic では、XAML でウィンドウを変更すると自動的に此の処理が行われる。

コードは、次の様に成る。 Visual Basic Class MainWindow End Class Visual C# using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt {

(4)

/// <summary>

/// Interaction logic for MainWindow.xaml /// </summary>

public partial class MainWindow : NavigationWindow

{ public MainWindow() { InitializeComponent(); } } } ■ アプリケーションへのファイルの追加此のセクションでは、2 つのページと 1 つのイメージをアプリケーションに追加する。１．ExpenseItHome.xaml と謂うプロジェクトに、新しいページ（WPF）を追加する。 [プロジェクト] → [新しい項目の追加] で [ページ（WPF）] を追加する。此のページは、アプリケーションの起動時に最初に表示されるページで有る。此処に個人の一覧が表示され、ユーザーは経費報告書の表示対象と成る個人を選択出来る。２．ExpenseItHome.xaml を開く。

３．Title を "ExpenseIt - Home" に設定する。

Visual Basic では、XAML は次の様に成る。

XAML <Page x:Class="ExpenseItHome" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - Home"> <Grid> </Grid> </Page> C#では、次の様に成る。

(5)

XAML <Page x:Class="ExpenseIt.ExpenseItHome" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - Home"> <Grid> </Grid> </Page> ４．MainWindow.xaml を開く。

５．NavigationWindow の Source プロパティを "ExpenseItHome.xaml" に設定する。

此れに依り、ExpenseItHome.xaml は、アプリケーションの起動時に最初に表示されるページに設

定される。Visual Basic では、XAML は次の様に成る。

XAML

<NavigationWindow x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow> C#では、次の様に成る。 XAML <NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

６．ExpenseReportPage.xaml と謂うプロジェクトに、新しいページ（WPF）を追加する。

此のページには、ExpenseItHome.xaml で選択された個人の経費報告書が表示される。

７．ExpenseReportPage.xaml を開く。

(6)

Visual Basic では、XAML は次の様に成る。 XAML <Page x:Class="ExpenseReportPage" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - View Expense">

<Grid> </Grid> </Page> C#では、次の様に成る。 XAML <Page x:Class="ExpenseIt.ExpenseReportPage" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - View Expense">

<Grid>

</Grid> </Page>

９．ExpenseItHome.xaml.vb と ExpenseReportPage.xaml.vb を開くか、又は、ExpenseItHome.xaml.cs とExpenseReportPage.xaml.cs を開く。新しいページファイルを作成すると、分離コードファイルが自動的に作成される。此等の分離コードファイルでは、ユーザー入力に応答する為のロジックを処理する。コードは、次の様に成る。 Visual Basic Class ExpenseItHome End Class Visual C# using System; using System.Collections.Generic;

(7)

using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary>

/// Interaction logic for ExpenseItHome.xaml /// </summary>

public partial class ExpenseItHome : Page { public ExpenseItHome() { InitializeComponent(); } } } Visual Basic Class ExpenseReportPage End Class Visual C# using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary>

(8)

/// Interaction logic for ExpenseReportPage.xaml /// </summary>

public partial class ExpenseReportPage : Page { public ExpenseReportPage() { InitializeComponent(); } } } Ａ．watermark.png と謂う名前のイメージをプロジェクトに追加する。独自のイメージを作成する事も、サンプルコードからファイルをコピーする事も出来る。 [プロジェクト] → [既存項目の追加] で、ファイルの種類を [イメージファイル] に変更し、画像ファイルを指定する。 ■ アプリケーションのビルドと実行此のセクションでは、アプリケーションをビルドして実行する。１．F5 キーを押すか、[デバッグ] メニューの [デバッグ開始] をクリックして、アプリケーションをビルドして実行する。次の図は、NavigationWindow ボタンの有るアプリケーションを示して居る。２．アプリケーションを閉じて Visual Studio に戻る。 ■ レイアウトの作成レイアウトは、UI 要素の配置を整える他、UI のサイズが変更された場合に各要素のサイズと位置を管理する。通常、レイアウトを作成するには、次のレイアウトコントロールの孰れかを使用する。・Canvas ・DockPanel ・Grid ・StackPanel ・VirtualizingStackPanel ・WrapPanel

(9)

此等の各レイアウトコントロールは、其の子要素に対して特別な種類のレイアウトをサポートする。 ExpenseIt のページはサイズの変更が可能で、各ページの要素は縦にも横にも他の要素と揃えられて居る。従って、此のアプリケーションに取ってはGrid が最適なレイアウト要素で有る。 ※ Panel 要素の詳細に付いては、「パネルの概要」を参照され度い。レイアウトの詳細に付いては、「レイアウト」を参照され度い。此のセクションでは、ExpenseItHome.xaml の Grid に列と行の定義を追加して、10 ピクセルのマージンを持つ3 行 1 列のテーブルを作成する。１．ExpenseItHome.xaml を開く。２．Grid 要素の Margin プロパティを "10,0,10,10" に設定する。"10,0,10,10" の各値は、左、上、右、下のマージンに対応して居る。３．Grid タグの間に次の XAML を追加し、行と列の定義を作成する。 XAML <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> 2 つの行の Height は Auto に設定される。此れは、行のサイズが其の行に含まれるコンテンツに基づいて設定される事を意味する。既定では、Height は Star サイズ値で有る。詰まり、行は、使用可能なスペースの加重比率で示される。例えば、2 つの行夫々の高さが "*" の場合、各行の高さは、使用可能なスペースの半分で有る。 Grid は、次の XAML の様に成る。 XAML <Grid Margin="10,0,10,10"> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> </Grid>

(10)

■ コントロールの追加此のセクションでは、ホームページの UI を更新して個人の一覧を表示する。ユーザーは、此の一覧から選択して、特定の個人の経費報告書を表示出来る。コントロールとは、ユーザーがアプリケーションと対話出来る様にするUI オブジェクトの事で有る。詳細に付いては、「コントロール」を参照され度い。此のUI を作成する為に、ExpenseItHome.xaml に次の要素を追加する。・ListBox（個人の一覧を表示する）。・Label（一覧のヘッダーとして使用する）。・Button（クリック時に、一覧で選択された個人の経費報告書を表示する）。各コントロールは、Grid.Row 添付プロパティを設定する事で、Grid の行に配置される。添付プロパティの詳細に付いては、「添付プロパティの概要」を参照され度い。１．ExpenseItHome.xaml を開く。２．Grid タグの間に次の XAML を追加する。 XAML

<Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label>

</Border>

３．アプリケーションをビルドして実行する。

次の図は、此のセクションの XAML で作成された

(11)

■ イメージとタイトルの追加此のセクションでは、ホームページのUI を更新して、イメージとページタイトルを表示する。１．ExpenseItHome.xaml を開く。２．ColumnDefinitions に、Width が 230 ピクセルで固定された新しい列を追加する。 XAML <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> ３．RowDefinitions に新しい行を追加する。 XAML <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> ４．Grid.Column を 1 に設定して、コントロールを 2 列目に移動する。Grid.Row を 1 増加して、各コントロールを1 行下へ移動する。 XAML

<Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label>

</Border>

５．Grid の Background を watermark.png イメージファイルに設定する。

XAML

<Grid.Background>

(12)

</Grid.Background>

６．Border の前に、ページのタイトルに成る "View Expense Report" と謂うコンテンツが指定された Label を追加する。

XAML

View Expense Report </Label> ７．アプリケーションをビルドして実行する。次の図は、此のセクションの結果を示して居る。 ■ イベントを処理するコードの追加１．ExpenseItHome.xaml を開く。２．Button 要素に Click イベントハンドラを追加する。詳細に付いては、「方法 : 単純なイベントハンドラを作成する」を参照され度い。 XAML

<Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"

(13)

３．ExpenseItHome.xaml.vb 又は ExpenseItHome.xaml.cs を開く。

４．Click イベントハンドラに次のコードを追加する。此れに依り、ウィンドウが ExpenseReportPage.xaml ファイルに移動する。

Visual Basic

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) ' View Expense Report

Dim expenseReportPage As New ExpenseReportPage() Me.NavigationService.Navigate(expenseReportPage)

End Sub Visual C#

private void Button_Click(object sender, RoutedEventArgs e) {

// View Expense Report

ExpenseReportPage expenseReportPage = new ExpenseReportPage(); this.NavigationService.Navigate(expenseReportPage); } ■ ExpenseReportPage の UI の作成 ExpenseReportPage.xaml には、ExpenseItHome.xaml で選択した個人の経費報告書が表示される。此のセクションでは、コントロールを追加して、ExpenseReportPage.xaml の UI を作成する。亦、様々なUI 要素の背景と塗り潰しの色も追加する。１．ExpenseReportPage.xaml を開く。２．Grid タグの間に次の XAML を追加する。此のUI は、DataGrid で表示されるレポートデータ以外は、ExpenseItHome.xaml で作成した UI に似て居る。 XAML <Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

(14)

Expense Report For: </Label>

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>

(15)

３．アプリケーションをビルドして実行する。

※ DataGrid が見付からないか存在しないエラーが発生した場合は、プロジェクトで.NET Framework

4 を対象する。詳細に付いては、「方法: .NET Framework のバージョンをターゲットにする」（ドキュメント内）を参照され度い。４．[View]をクリックする。経費報告書のページが表示される。 ExpenseReportPage.xaml に追加された UI 要素を次の図に示す。"戻る" ナビゲーションボタンが有効に成って居る事に注目され度い。 ■ コントロールのスタイル設定多くの場合、UI では、要素の種類が同じで有れば、外観も総て同じに成る。UI では、複数の要素間で外観を再利用出来る様に、スタイルが使用される。スタイルの再利用性に依り、XAML の作成と管理が簡略化される。スタイルの詳細に付いては、「スタイルとテンプレート」を参照され度い。此のセクションでは、此れ迄の手順で定義した要素毎の属性をスタイルに置き換える。１．Application.xaml 又は App.xaml を開く。２．Application.Resources タグの間に次の XAML を追加する。 XAML

(16)

<Setter Property="HorizontalAlignment" Value="Right" /> </Style> 此のXAML では、次のスタイルが追加される。・headerTextStyle：ページタイトルの Label を書式設定する。・labelStyle：Label コントロールを書式設定する。・columnHeaderStyle：DataGridColumnHeader を書式設定する。・listHeaderStyle：一覧のヘッダーの Border コントロールを書式設定する。・listHeaderTextStyle：一覧のヘッダーの Label を書式設定する。・buttonStyle：ExpenseItHome.xaml の Button を書式設定する。

(17)

スタイルは、Application.Resources プロパティ要素のリソースで有り、子でも有る。此処では、スタイルはアプリケーション内の総ての要素に適用される。.NET Framework アプリケーションでリソースを使用する例に付いては、「方法 : アプリケーションリソースを使用する」を参照され度い。３．ExpenseItHome.xaml を開く。４．Grid 要素間の総ての内容を次の XAML に置き換える。 XAML <Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}" > View Expense Report

</Label>

<Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}"> <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>

</Border>

各コントロールの外観を定義する VerticalAlignment や FontFamily 等のプロパティは、スタイルを適用する事に依り、削除されて置き換えられる。例えば、headerTextStyle は、"View Expense

(18)

Report" と謂う Label に適用される。５．ExpenseReportPage.xaml を開く。６．Grid 要素間の総ての内容を次の XAML に置き換える。 XAML <Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}"> Expense Report For:

</Label>

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Department:</Label>

(19)

<DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" /> <DataGridTextColumn Header="Amount" /> </DataGrid.Columns> </DataGrid> </Grid> </Grid> 此れに依り、Label 要素と Border 要素にスタイルが追加される。７．アプリケーションをビルドして実行する。此のセクションで XAML を追加した後も、アプリケーションの外観はスタイルに依る更新の前と変わらない。 ■ コントロールへのデータのバインド此のセクションでは、様々なコントロールにバインドされるXML データを作成する。１．ExpenseItHome.xaml を開く。

２．開始のGrid 要素の後に、各個人のデータを含む XmlDataProvider を作成する次の XAML を追加する。データは Grid リソースとして作成される。通常、此れはファイルとして読み込まれるが、解り易くする為に、データをインラインで追加して居る。 XAML <Grid Margin="10,0,10,10"> <Grid.Resources>

(20)

３．Grid リソースでは、次の DataTemplate を追加する。此れに依り、ListBox にデータを表示する方法が定義される。データテンプレートの詳細に付いては、「データテンプレートの概要」を参照され度い。 XAML <Grid.Resources> ...

</Grid.Resources>

４．既存のListBox を次の XAML に置き換える。

XAML

<ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"

ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" ItemTemplate="{StaticResource nameItemTemplate}">

</ListBox>

此のXAML は、ListBox の ItemsSource プロパティをデータソースにバインドし、データテンプレー

(21)

■ コントロールへのデータの接続此のセクションでは、ExpenseItHome.xaml ページ上の個人の一覧で選択されて居る現在の項目を取得し、其の参照をExpenseReportPage のコンストラクターに渡してインスタンス化するコードを作成する。ExpenseReportPage は、渡された項目を使用してデータコンテキストを設定する。此の項目が、 ExpenseReportPage.xaml で定義されたコントロールのバインド先に成る。１．ExpenseReportPage.xaml.vb 又は ExpenseReportPage.xaml.cs を開く。２．オブジェクトを取得するコンストラクターを追加して、選択した個人の経費報告書データを渡せる様にする。 Visual Basic

Partial Public Class ExpenseReportPage Inherits Page

Public Sub New() InitializeComponent() End Sub

' Custom constructor to pass expense report data Public Sub New(ByVal data As Object)

Me.New()

' Bind to expense report data. Me.DataContext = data End Sub

End Class Visual C#

public partial class ExpenseReportPage : Page {

public ExpenseReportPage() {

InitializeComponent(); }

// Custom constructor to pass expense report data public ExpenseReportPage(object data):this() {

// Bind to expense report data. this.DataContext = data; } } ３．ExpenseItHome.xaml.vb 又は ExpenseItHome.xaml.cs を開く。４．選択した個人の経費報告書データを渡す新しいコンストラクターを呼び出す様にClick イベントハンドラを変更する。

(22)

Visual Basic

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) ' View Expense Report

Dim expenseReportPage As ExpenseReportPage = _

New ExpenseReportPage(Me.peopleListBox.SelectedItem) Me.NavigationService.Navigate(expenseReportPage)

End Sub Visual C#

private void Button_Click(object sender, RoutedEventArgs e) {

// View Expense Report

ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem); this.NavigationService.Navigate(expenseReportPage); } ■ データテンプレートを使用したデータのスタイル設定此のセクションでは、データテンプレートを使用して、データバインドリスト内の各項目のUI を更新する。１．ExpenseReportPage.xaml を開く。

２．"Name" 及び "Department" の Label 要素の内容を適切なデータソースプロパティにバインドする。データバインディングの詳細に付いては、「データバインドの概要」を参照され度い。

XAML

<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Department:</Label>

<Label Style="{StaticResource labelStyle}"

Content="{Binding XPath=@Department}"></Label> </StackPanel>

３．開始の Grid 要素の後に、経費報告書データの表示方法を定義する次のデータテンプレートを追加

(23)

XAML

<Grid.Resources>

</Grid.Resources>

４．経費報告書データを表示するDataGrid 列にテンプレートを適用する。

ExpenseReportPage.xaml の DataGrid の部分を、下記の様に書き換える。

XAML

<DataGrid ItemsSource="{Binding XPath=Expense}"

ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >

<DataGrid.Columns>

<DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}" /> <DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" /> </DataGrid.Columns> </DataGrid> ５．アプリケーションをビルドして実行する。６．個人を選択し、[View] をクリックする。次の図は、コントロール、レイアウト、スタイル、データバインド、及びデータテンプレートが適用された ExpenseIt アプリケーションの両方のページを示して居る。

(24)

http://msdn.microsoft.com/ja-jp/library/ms752299(v=vs.110).aspx http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx

(25)

■ 方法：.NET Framework のバージョンをターゲットにする ■

此のドキュメントでは、特定の.NET Framework のバージョンを対象にしてプロジェクトを作成する方法、及び、既存のプロジェクトで対象とするフレームワークを変更する方法に付いて説明する。C++プロジェクトの.NET Framework のバージョンを変更する方法の詳細に付いては、「方法: ターゲットフレームワークおよびプラットフォームのツールセットを変更する」を参照され度い。

※ Visual Studio Express Edition では、プロジェクトの作成時に.NET Framework のバージョンやプロファイルを指定出来ない。但し、後で、プロジェクトの対象をインストールされて居る.NET Framework の総てのバージョンに再設定出来る。 ■ プロジェクト作成時に.NET Framework のバージョンを指定する次の手順では、プロジェクトを作成する時に、特定の.NET Framework のバージョンを対象とする方法を示す。使用出来るプロジェクトテンプレートは、選択するフレームワークのバージョンに依り異なる。プロジェクトを作成する時に.NET Framework バージョンのを対象にする１．メニューバーで [ファイル]、[新規]、[プロジェクト] の順にクリックする。２．[新しいプロジェクト] のダイアログボックスの上部に有る一覧で、対象とするプロジェクトの対象と成る.NET Framework のバージョンを選択する。

※ 通常、.NET Framework の 1 種類のバージョン而巳 Visual Studio と共にインストールされる。異なるバージョンのを対象とする場合は、最初にインストールされて居る必要が有る。詳細に付いては、「Visual Studio のマルチターゲットの概要」を参照され度い。３．インストールされたテンプレートの一覧で、作成するプロジェクトの種類を選択する。テンプレートの一覧が自動的に選択した.NET Framework のバージョンに依ってサポートされて居るプロジェクト而巳を表示する様にフィルター処理する。次に [OK] をクリックする。 ■ 既存のプロジェクトの.NET Framework の対象バージョンの変更

次の手順では、既存のVisual Basic、Visual C#、Visual F#のプロジェクトの対象とするフレームワークを変更する方法を示す。既存のプロジェクトの.NET Framework の対象バージョンを変更するには１．変更するプロジェクトを開く。２．[ソリューションエクスプローラー] のツールバーで、[プロパティ] のボタンをクリックする。３．亦、[ソリューションエクスプローラー] のプロジェクトノードを選択し、ノードを右クリックして開いたコンテキストメニューの [プロパティ] を選択する。４．[アプリケーション] のタブの設定が表示される。５．[ターゲットフレームワーク] のドロップダウンリストで、目的の.NET Framework のバージョンを選択した後、[OK] をクリックする。

(26)

次に、プロジェクトをアンロードし、再読み込みを行う。此れで、選択したフレームワークのバージョンが対象と成る。 ※ .NET Framework のバージョンを変更する時に、コードが別のバージョンへの参照が含まれて居る場合、エラーメッセージが表示される事が有る。此等のエラーを解決するには、参照を変更する必要が有る。詳細に付いては、「.NET Framework を対象とするエラーのトラブルシューティング」を参照され度い。

グラフィックス 目次

W

グラフィックス目次