チュートリアル: Visual Studio 2019 で初めての WPF アプリケーションを作成するTutorial: Create your first WPF application in Visual Studio 2019

この記事では、ほとんどの WPF アプリケーションに共通する要素 (Extensible Application Markup Language (XAML) マークアップ、分離コード、アプリケーション定義) を含む Windows Presentation Foundation (WPF) デスクトップアプリケーションを開発する方法について説明します。コントロール、レイアウト、データバインディング、およびスタイル。This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. アプリケーションを開発するには、Visual Studio を使用します。To develop the application, you'll use Visual Studio.

このチュートリアルでは、次の作業を行う方法について説明します。In this tutorial, you learn how to:

  • WPF プロジェクトを作成します。Create a WPF project.
  • XAML を使用して、アプリケーションのユーザーインターフェイス (UI) の外観をデザインします。Use XAML to design the appearance of the application's user interface (UI).
  • アプリケーションの動作を構築するコードを記述します。Write code to build the application's behavior.
  • アプリケーションを管理するためのアプリケーション定義を作成します。Create an application definition to manage the application.
  • コントロールを追加し、レイアウトを作成してアプリケーション UI を作成します。Add controls and create the layout to compose the application UI.
  • アプリケーションの UI 全体で一貫した外観のスタイルを作成します。Create styles for a consistent appearance throughout the application's UI.
  • Ui にデータを設定し、データと UI の同期を保つために、UI をデータにバインドします。Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

チュートリアルを終了すると、選択したユーザーの経費報告書をユーザーが表示できるスタンドアロン Windows アプリケーションが作成されます。By the end of the tutorial, you'll have built a standalone Windows application that allows users to view expense reports for selected people. アプリケーションは、ブラウザースタイルのウィンドウでホストされるいくつかの WPF ページで構成されています。The application is composed of several WPF pages that are hosted in a browser-style window.

ヒント

このチュートリアルで使用されているサンプルコードは、Visual Basic とC#チュートリアルのWPF アプリのサンプルコードの両方で使用できます。The sample code that is used in this tutorial is available for both Visual Basic and C# at Tutorial WPF App Sample Code.

このページの上部にある言語セレクターを使用しC#て、と Visual Basic の間でサンプルコードのコード言語を切り替えることができます。You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.

必要条件Prerequisites

アプリケーションプロジェクトを作成するCreate the application project

最初の手順では、アプリケーションの定義、2つのページ、およびイメージを含むアプリケーションインフラストラクチャを作成します。The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Visual Basic または Visual C# ExpenseIt という名前の新しい WPF アプリケーションプロジェクトを作成します。Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Visual Studio を開き、 [作業の開始] メニューの [新しいプロジェクトの作成] を選択します。Open Visual Studio and select Create a new project under the Get started menu.

      [新しいプロジェクトの作成] ダイアログボックスが表示されます。The Create a new project dialog opens.

    2. 言語 ドロップダウンで、 C# または Visual Basic を選択します。In the Language dropdown, select either C# or Visual Basic.

    3. [WPF アプリ (.NET Framework)] テンプレートを選択し、 [次へ] を選択します。Select the WPF App (.NET Framework) template and then select Next.

      [新しいプロジェクトの作成] ダイアログ

      [新しいプロジェクトの構成] ダイアログボックスが開きます。The Configure your new project dialog opens.

    4. ExpenseIt プロジェクト名を入力し、 [作成] を選択します。Enter the project name ExpenseIt and then select Create.

      [新しいプロジェクトの構成] ダイアログ

      Visual Studio によってプロジェクトが作成され、 mainwindow.xamlという名前の既定のアプリケーションウィンドウのデザイナーが開きます。Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

  2. アプリケーション .xaml (Visual Basic) またはapp.xaml (C#) を開きます。Open Application.xaml (Visual Basic) or App.xaml (C#).

    この XAML ファイルは、WPF アプリケーションとすべてのアプリケーションリソースを定義します。This XAML file defines a WPF application and any application resources. また、このファイルを使用して、アプリケーションの起動時に自動的に表示される UI (この場合は Mainwindow.xaml) を指定しますYou also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

    XAML は、Visual Basic では次のようになります。Your XAML should look like the following in Visual Basic:

    <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#のようになります。And like the following in C#:

    <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>
    
  3. Mainwindow.xamlを開きます。Open MainWindow.xaml.

    この XAML ファイルは、アプリケーションのメインウィンドウであり、ページで作成されたコンテンツを表示します。This XAML file is the main window of your application and displays content created in pages. Window クラスは、ウィンドウのタイトル、サイズ、アイコンなどのプロパティを定義し、終了や非表示などのイベントを処理します。The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

  4. 次の XAML に示すように、Window 要素を NavigationWindowに変更します。Change the Window element to a NavigationWindow, as shown in the following XAML:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         ...
    </NavigationWindow>
    

    このアプリは、ユーザーの入力に応じてさまざまなコンテンツに移動します。This app navigates to different content depending on the user input. このため、メイン WindowNavigationWindowに変更する必要があります。This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow Windowのすべてのプロパティを継承します。NavigationWindow inherits all the properties of Window. XAML ファイルの NavigationWindow 要素は、NavigationWindow クラスのインスタンスを作成します。The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. 詳細については、「ナビゲーションの概要」を参照してください。For more information, see Navigation overview.

  5. NavigationWindow タグの間から Grid 要素を削除します。Remove the Grid elements from between the NavigationWindow tags.

  6. NavigationWindow 要素の XAML コードで、次のプロパティを変更します。Change the following properties in the XAML code for the NavigationWindow element:

    • Title プロパティを "ExpenseIt" に設定します。Set the Title property to "ExpenseIt".

    • Height プロパティを350ピクセルに設定します。Set the Height property to 350 pixels.

    • Width プロパティを500ピクセルに設定します。Set the Width property to 500 pixels.

    XAML は、Visual Basic に対して次のようになります。Your XAML should look like the following for Visual Basic:

    <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">
     
    </NavigationWindow>
    

    では、次のC#ようになります。And like the following for C#:

    <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>
    
  7. Mainwindow.xamlまたはMainWindow.xaml.csを開きます。Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    このファイルは、 mainwindow.xamlで宣言されたイベントを処理するコードを含む分離コードファイルです。This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. このファイルには、XAML で定義されたウィンドウの部分クラスが含まれています。This file contains a partial class for the window defined in XAML.

  8. を使用してC#いる場合は、NavigationWindowから派生するように MainWindow クラスを変更します。If you're using C#, change the MainWindow class to derive from NavigationWindow. (Visual Basic では、XAML でウィンドウを変更すると、自動的にこの処理が行われます)。コードC#は次のようになります。(In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:

    
    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>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : NavigationWindow
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    

アプリケーションへのファイルの追加Add files to the application

このセクションでは、アプリケーションに 2 つのページと 1 つのイメージを追加します。In this section, you'll add two pages and an image to the application.

  1. 新しいページをプロジェクトに追加し、 ExpenseItHome.xaml という名前を指定します。Add a new page to the project, and name it ExpenseItHome.xaml:

    1. ソリューションエクスプローラーで、[ ExpenseIt プロジェクト] ノードを右クリックし、[ > ページ追加] を選択します。In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. [新しい項目の追加] ダイアログでは、 [ページ (WPF)] テンプレートは既に選択されています。In the Add New Item dialog, the Page (WPF) template is already selected. ExpenseItHome 名を入力し、 [追加] を選択します。Enter the name ExpenseItHome, and then select Add.

    このページは、アプリケーションの起動時に表示される最初のページです。This page is the first page that's displayed when the application is launched. このレポートには、の経費明細書を表示するために選択する相手の一覧が表示されます。It will show a list of people to select from, to show an expense report for.

  2. ExpenseItHome.xaml を開きます。Open ExpenseItHome.xaml.

  3. Title を "ExpenseIt - Home" に設定します。Set the Title to "ExpenseIt - Home".

  4. DesignHeight を350ピクセルに設定し、DesignWidth を500ピクセルに設定します。Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    XAML は、Visual Basic に対して次のように表示されるようになりました。The XAML now appears as follows for Visual Basic:

    <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="350" d:DesignWidth="500"
      Title="ExpenseIt - Home">
        <Grid>
            
        </Grid>
    </Page>
    

    では、次のC#ようになります。And like the following for C#:

    <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="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid>
            
        </Grid>
    </Page>
    
  5. Mainwindow.xamlを開きます。Open MainWindow.xaml.

  6. NavigationWindow 要素に Source プロパティを追加し、それを "ExpenseItHome.xaml" に設定します。Add a Source property to the NavigationWindow element and set it to "ExpenseItHome.xaml".

    これにより、アプリケーションの起動時に最初に開かれるページに ExpenseItHome.xaml が設定されます。This sets ExpenseItHome.xaml to be the first page opened when the application starts.

    Visual Basic の XAML の例:Example XAML in Visual Basic:

    <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#場合:And in C#:

    <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>
    

    ヒント

    また、 [プロパティ] ウィンドウの [その他] カテゴリで、 [ソース] プロパティを設定することもできます。You can also set the Source property in the Miscellaneous category of the Properties window.

    プロパティウィンドウのソースプロパティ

  7. 別の新しい WPF ページをプロジェクトに追加し、次のように名前を指定します。Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. ソリューションエクスプローラーで、[ ExpenseIt プロジェクト] ノードを右クリックし、[ > ページ追加] を選択します。In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. [新しい項目の追加] ダイアログで、 [ページ (WPF)] テンプレートを選択します。In the Add New Item dialog, select the Page (WPF) template. [名前の指定] をクリックし、[ 追加] を選択します。Enter the name ExpenseReportPage, and then select Add.

    このページには、[ ExpenseItHome ] ページで選択されたユーザーの経費明細書が表示されます。This page will show the expense report for the person that is selected on the ExpenseItHome page.

  8. ExpenseReportPage.xamlを開きます。Open ExpenseReportPage.xaml.

  9. Title を "ExpenseIt - View Expense" に設定します。Set the Title to "ExpenseIt - View Expense".

  10. DesignHeight を350ピクセルに設定し、DesignWidth を500ピクセルに設定します。Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    Visual Basic では、このxamlは次のようになります。ExpenseReportPage.xaml now looks like the following in Visual Basic:

    <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="350" d:DesignWidth="500"
          Title="ExpenseIt - View Expense">
        <Grid>
            
        </Grid>
    </Page>
    

    およびでは、次C#のようになります。And like the following in C#:

    <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="350" d:DesignWidth="500"
        Title="ExpenseIt - View Expense">
    
        <Grid>
            
        </Grid>
    </Page>
    
  11. Expenseithome.xamlを開き、 ExpenseItHome.xaml.cs 、または ExpenseReportPage.xaml.cs 、またはを開きます。Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    新しいページファイルを作成すると、Visual Studio によってその分離コードファイルが自動的に作成されます。When you create a new Page file, Visual Studio automatically creates its code-behind file. これらの分離コード ファイルでは、ユーザー入力に対応するためのロジックを処理します。These code-behind files handle the logic for responding to user input.

    ExpenseItHome のコードは次のようになります。Your code should look like the following for ExpenseItHome:

    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>
        /// Interaction logic for ExpenseItHome.xaml
        /// </summary>
        public partial class ExpenseItHome : Page
        {
            public ExpenseItHome()
            {
                InitializeComponent();
            }
        }
    }
    
    Class ExpenseItHome
    
    End Class
    

    また、次のようなページがあります。And like the following for ExpenseReportPage:

    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>
        /// Interaction logic for ExpenseReportPage.xaml
        /// </summary>
        public partial class ExpenseReportPage : Page
        {
            public ExpenseReportPage()
            {
                InitializeComponent();
            }
        }
    }
    
    Class ExpenseReportPage
    
    End Class
    
  12. 透かしという名前のイメージをプロジェクトに追加します。Add an image named watermark.png to the project. 独自のイメージを作成したり、サンプルコードからファイルをコピーしたり、 microsoft/WPF-Samples GitHub リポジトリから取得したりすることができます。You can create your own image, copy the file from the sample code, or get it from the microsoft/WPF-Samples GitHub repository.

    1. プロジェクトノードを右クリックし、[既存の項目追加 > ] を選択するか、 Shiftキーを押し+Alt+Aキーを押します。Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. [既存項目の追加] ダイアログボックスで、すべての [ファイル] または [イメージファイル] のいずれかにファイルフィルターを設定し、使用するイメージファイルを参照して [追加] を選択します。In the Add Existing Item dialog, set the file filter to either All Files or Image Files, browse to the image file you want to use, and then select Add.

アプリケーションのビルドと実行Build and run the application

  1. アプリケーションをビルドして実行するには、 F5キーを押すか、 [デバッグ] メニューの [デバッグの開始] をクリックします。To build and run the application, press F5 or select Start Debugging from the Debug menu.

    次の図は、NavigationWindow ボタンを持つアプリケーションを示しています。The following illustration shows the application with the NavigationWindow buttons:

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

  2. アプリケーションを閉じて、Visual Studio に戻ります。Close the application to return to Visual Studio.

レイアウトを作成するCreate the layout

レイアウトは、UI 要素を配置するための順序付けされた方法を提供し、UI のサイズが変更されたときの要素のサイズと位置も管理します。Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. 通常、レイアウトを作成するには、次のいずれかのレイアウト コントロールを使用します。You typically create a layout with one of the following layout controls:

  • Canvas-キャンバス領域に対する相対座標を使用して子要素を明示的に配置できる領域を定義します。Canvas - Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
  • DockPanel-子要素を水平方向または垂直方向に整列できる領域を定義します。DockPanel - Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
  • Grid-列と行で構成される柔軟性のあるグリッド領域を定義します。Grid - Defines a flexible grid area that consists of columns and rows.
  • StackPanel-子要素を水平方向または垂直方向の単一行に整列します。StackPanel - Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel-水平方向または垂直方向の単一行でコンテンツを整列し、仮想化します。VirtualizingStackPanel - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • 子要素を左から右へ順番に配置し、内容を含んでいるボックスの端にある次の行に分割します。 WrapPanelWrapPanel - Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. 後続の順序付けは、Orientation プロパティの値に応じて、上から下または右から左に順番に行われます。Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.

これらの各レイアウトコントロールは、その子要素に対して特定の種類のレイアウトをサポートしています。Each of these layout controls supports a particular type of layout for its child elements. ExpenseIt のページのサイズを変更することができ、各ページには、水平方向および垂直方向に他の要素と共に配置された要素があります。ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. この例では、Grid はアプリケーションのレイアウト要素として使用されます。In this example, the Grid is used as layout element for the application.

ヒント

Panel 要素の詳細については、「パネルの概要」を参照してください。For more information about Panel elements, see Panels overview. レイアウトの詳細については、「 layout」を参照してください。For more information about layout, see Layout.

このセクションでは、 ExpenseItHome.xamlGrid に列と行の定義を追加することによって、3つの行と10ピクセルの余白を含む単一列テーブルを作成します。In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml.

  1. ExpenseItHome.xaml で、Grid 要素の Margin プロパティを "10, 0, 10, 10" に設定します。これは、左、上、右、下の余白に対応します。In ExpenseItHome.xaml, set the Margin property on the Grid element to "10,0,10,10", which corresponds to left, top, right and bottom margins:

    <Grid Margin="10,0,10,10">
    

    ヒント

    また、 [プロパティ] ウィンドウの [レイアウト] カテゴリで、余白の値を設定することもできます。You can also set the Margin values in the Properties window, under the Layout category:

    プロパティウィンドウの余白の値

  2. 次の XAML を Grid タグの間に追加して、行と列の定義を作成します。Add the following XAML between the Grid tags to create the row and column definitions:

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

    2つの行の HeightAutoに設定されます。つまり、行のサイズは、行の内容に基づいて決定されます。The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. 既定の HeightStar サイズ変更です。これは、行の高さが使用可能な領域の加重比率であることを意味します。The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. たとえば、2つの行のそれぞれに "*" の Height がある場合、それぞれの行の高さは使用可能な領域の半分になります。For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    Grid に次の XAML が含まれるようになります。Your Grid should now contain the following XAML:

    <Grid Margin="10,0,10,10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    </Grid>
    

コントロールの追加Add controls

このセクションでは、ホームページの UI を更新して、人の一覧を表示します。ここでは、1人のユーザーを選択して経費報告書を表示します。In this section, you'll update the home page UI to show a list of people, where you select one person to display their expense report. コントロールとは、ユーザーがアプリケーションと対話できるようにする UI オブジェクトのことです。Controls are UI objects that allow users to interact with your application. 詳しくは、「 コントロール」をご覧ください。For more information, see Controls.

この UI を作成するには、 ExpenseItHome.xaml に次の要素を追加します。To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • ListBox (people の一覧)。A ListBox (for the list of people).
  • (リストヘッダーの) LabelA Label (for the list header).
  • Button (クリックすると、一覧で選択されているユーザーの経費明細書が表示されます)。A Button (to click to view the expense report for the person that is selected in the list).

各コントロールは、Grid.Row 添付プロパティを設定することによって、Grid の行に配置されます。Each control is placed in a row of the Grid by setting the Grid.Row attached property. 添付プロパティの詳細については、「添付プロパティの概要」を参照してください。For more information about attached properties, see Attached Properties Overview.

  1. ExpenseItHome.xaml で、Grid タグの間に次の XAML を追加します。In ExpenseItHome.xaml, add the following XAML somewhere between the Grid tags:

    
    <!-- People list -->
    <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
        <Label VerticalAlignment="Center" Foreground="White">Names</Label>
    </Border>
    <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
    </ListBox>
    
    <!-- View report button -->
    <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
    

    ヒント

    コントロールは、 [ツールボックス] ウィンドウからデザインウィンドウにドラッグして、 [プロパティ] ウィンドウでプロパティを設定することによって作成することもできます。You can also create the controls by dragging them from the Toolbox window onto the design window, and then setting their properties in the Properties window.

  2. アプリケーションをビルドして実行します。Build and run the application.

    次の図は、作成したコントロールを示しています。The following illustration shows the controls you created:

名前の一覧を表示している、このサンプルスクリーンショット

イメージとタイトルを追加するAdd an image and a title

このセクションでは、ホームページの UI をイメージとページタイトルで更新します。In this section, you'll update the home page UI with an image and a page title.

  1. ExpenseItHome.xamlColumnDefinitions に別の列を追加し、230ピクセルの固定 Width を使用します。In ExpenseItHome.xaml, add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

    
        <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="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <Grid.Resources>
               
                <!-- Expense Report Data -->
                <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
                    <x:XData>
                        <Expenses xmlns="">
                            <Person Name="Mike" Department="Legal">
                                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                            </Person>
                            <Person Name="Lisa" Department="Marketing">
                                <Expense ExpenseType="Document printing"
                      ExpenseAmount="50"/>
                                <Expense ExpenseType="Gift" ExpenseAmount="125" />
                            </Person>
                            <Person Name="John" Department="Engineering">
                                <Expense ExpenseType="Magazine subscription" 
                     ExpenseAmount="50"/>
                                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                                <Expense ExpenseType="Software" ExpenseAmount="500" />
                            </Person>
                            <Person Name="Mary" Department="Finance">
                                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                            </Person>
                        </Expenses>
                    </x:XData>
                </XmlDataProvider>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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>
         
            <!-- People list -->
           
            <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>
           
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  2. RowDefinitionsに、合計4行の行を追加します。Add another row to the RowDefinitions, for a total of four rows:

    
        <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="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <Grid.Resources>
               
                <!-- Expense Report Data -->
                <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
                    <x:XData>
                        <Expenses xmlns="">
                            <Person Name="Mike" Department="Legal">
                                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                            </Person>
                            <Person Name="Lisa" Department="Marketing">
                                <Expense ExpenseType="Document printing"
                      ExpenseAmount="50"/>
                                <Expense ExpenseType="Gift" ExpenseAmount="125" />
                            </Person>
                            <Person Name="John" Department="Engineering">
                                <Expense ExpenseType="Magazine subscription" 
                     ExpenseAmount="50"/>
                                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                                <Expense ExpenseType="Software" ExpenseAmount="500" />
                            </Person>
                            <Person Name="Mary" Department="Finance">
                                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                            </Person>
                        </Expenses>
                    </x:XData>
                </XmlDataProvider>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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>
         
            <!-- People list -->
           
            <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>
           
            <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  3. コントロールを2番目の列に移動するには、3つのコントロール (Border、ListBox、および Button) のそれぞれで [Grid.Column] プロパティを1に設定します。Move the controls to the second column by setting the Grid.Column property to 1 in each of the three controls (Border, ListBox, and Button).

  4. 各コントロールを1行下に移動します。そのためには、3つのコントロール (Border、ListBox、および Button) と Border 要素のそれぞれに対して、Grid.Row 値を1ずつインクリメントします。Move each control down a row by incrementing its Grid.Row value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.

    3つのコントロールの XAML は、次のようになります。The XAML for the three controls now looks like the following:

      <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
          <ListBoxItem>Mike</ListBoxItem>
          <ListBoxItem>Lisa</ListBoxItem>
          <ListBoxItem>John</ListBoxItem>
          <ListBoxItem>Mary</ListBoxItem>
      </ListBox>
    
      <!-- View report button -->
      <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
    Height="25" HorizontalAlignment="Right">View</Button>
    
  5. <Grid> タグと </Grid> タグの間に次の XAML を追加して、Panel.Background プロパティをウォーターマークの .png画像ファイルに設定します。Set the Panel.Background property to the watermark.png image file, by adding the following XAML anywhere between the <Grid> and </Grid> tags:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Border 要素の前に、「経費報告書の表示」という内容の Label を追加します。Before the Border element, add a Label with the content "View Expense Report". このラベルはページのタイトルです。This label is the title of the page.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
    </Label>
    
  7. アプリケーションをビルドして実行します。Build and run the application.

次の図は、先ほど追加したものの結果を示しています。The following illustration shows the results of what you just added:

新しいイメージの背景とページのタイトルを示す、ページのサンプルスクリーンショット

イベントを処理するコードを追加するAdd code to handle events

  1. ExpenseItHome.xaml で、Button 要素に Click イベントハンドラーを追加します。In ExpenseItHome.xaml, add a Click event handler to the Button element. 詳細については、「方法: 単純なイベントハンドラーを作成する」を参照してください。For more information, see How to: Create a simple event handler.

      <!-- View report button -->
      <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
    Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>
    
  2. ExpenseItHome.xaml.vb または ExpenseItHome.xaml.cs を開きます。Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  3. 次のコードを ExpenseItHome クラスに追加して、ボタンクリックイベントハンドラーを追加します。Add the following code to the ExpenseItHome class to add a button click event handler. イベントハンドラーによって、[処理されたSereportpage ] ページが開きます。The event handler opens the ExpenseReportPage page.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage();
        this.NavigationService.Navigate(expenseReportPage);
    
    }
    
    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
    

[印刷] ページの UI を作成するCreate the UI for ExpenseReportPage

[ ExpenseItHome ] ページで選択されたユーザーの経費明細書が表示されます。ExpenseReportPage.xaml displays the expense report for the person that's selected on the ExpenseItHome page. このセクションでは、[の使用]ページの UI を作成します。In this section, you'll create the UI for ExpenseReportPage. また、さまざまな UI 要素に背景色と塗りつぶしの色を追加します。You'll also add background and fill colors to the various UI elements.

  1. ExpenseReportPage.xamlを開きます。Open ExpenseReportPage.xaml.

  2. Grid タグの間に次の XAML を追加します。Add the following XAML between the Grid tags:

     <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" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
     FontWeight="Bold" FontSize="18" Foreground="#0066cc">
         Expense Report For:
     </Label>
     <Grid Margin="10" Grid.Column="1" Grid.Row="1">
    
         <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition />
         </Grid.RowDefinitions>
    
         <!-- Name -->
         <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
             <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
             <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
         </StackPanel>
    
         <!-- Department -->
         <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
             <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
             <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
         </StackPanel>
    
         <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
               HorizontalAlignment="Left">
             <!-- Expense type and Amount table -->
             <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >
                 <DataGrid.ColumnHeaderStyle>
                     <Style TargetType="{x:Type DataGridColumnHeader}">
                         <Setter Property="Height" Value="35" />
                         <Setter Property="Padding" Value="5" />
                         <Setter Property="Background" Value="#4E87D4" />
                         <Setter Property="Foreground" Value="White" />
                     </Style>
                 </DataGrid.ColumnHeaderStyle>
                 <DataGrid.Columns>
                     <DataGridTextColumn Header="ExpenseType" />
                     <DataGridTextColumn Header="Amount"  />
                 </DataGrid.Columns>
             </DataGrid>
         </Grid>
     </Grid>
    

    この UI は ExpenseItHome.xaml に似ていますが、レポートデータが DataGridに表示される点が異なります。This UI is similar to ExpenseItHome.xaml, except the report data is displayed in a DataGrid.

  3. アプリケーションをビルドして実行します。Build and run the application.

  4. [表示] ボタンを選択します。Select the View button.

    経費明細書ページが表示されます。The expense report page appears. また、[戻る] ナビゲーションボタンが有効になっていることにも注意してください。Also notice that the back navigation button is enabled.

次の図は、ページに追加された UI 要素を示しています。The following illustration shows the UI elements added to ExpenseReportPage.xaml.

このページでは、[ページの作成] で作成した UI を示しています。

スタイルコントロールStyle controls

多くの場合、UI で同じ種類のすべての要素に対して、さまざまな要素の外観が同じになります。The appearance of various elements is often the same for all elements of the same type in a UI. UI では、スタイルを使用して、複数の要素間で外観を再利用できるようにします。UI uses styles to make appearances reusable across multiple elements. スタイルの再利用性により、XAML の作成と管理が簡単になります。The reusability of styles helps to simplify XAML creation and management. このセクションでは、これまでの手順で定義した要素ごとの属性を、スタイルに置き換えます。This section replaces the per-element attributes that were defined in previous steps with styles.

  1. アプリケーション .xaml または app.xaml を開きます。Open Application.xaml or App.xaml.

  2. Application.Resources タグの間に次の XAML を追加します。Add the following XAML between the Application.Resources tags:

    
    <!-- Header text style -->
    <Style x:Key="headerTextStyle">
        <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
        <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
        <Setter Property="Label.FontWeight" Value="Bold"></Setter>
        <Setter Property="Label.FontSize" Value="18"></Setter>
        <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
    </Style>
    
    <!-- Label style -->
    <Style x:Key="labelStyle" TargetType="{x:Type Label}">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Margin" Value="0,0,0,5" />
    </Style>
    
    <!-- DataGrid header style -->
    <Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Height" Value="35" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Background" Value="#4E87D4" />
        <Setter Property="Foreground" Value="White" />
    </Style>
    
    <!-- List header style -->
    <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
        <Setter Property="Height" Value="35" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Background" Value="#4E87D4" />
    </Style>
    
    <!-- List header text style -->
    <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
    
    <!-- Button style -->
    <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="125" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Margin" Value="0,10,0,0" />
        <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
    

    この XAML は、次のスタイルを追加します。This XAML adds the following styles:

    • headerTextStyle: ページ タイトル Labelの書式を設定します。headerTextStyle: To format the page title Label.

    • labelStyle: Label コントロールの書式を設定します。labelStyle: To format the Label controls.

    • columnHeaderStyle: DataGridColumnHeaderの書式を設定します。columnHeaderStyle: To format the DataGridColumnHeader.

    • listHeaderStyle: リスト ヘッダーの Border コントロールの書式を設定します。listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: リストヘッダー Labelの書式を設定します。listHeaderTextStyle: To format the list header Label.

    • buttonStyle: ExpenseItHome.xamlButton を書式設定します。buttonStyle: To format the Button on ExpenseItHome.xaml.

    スタイルは、Application.Resources property 要素のリソースと子であることに注意してください。Notice that the styles are resources and children of the Application.Resources property element. ここでは、スタイルはアプリケーション内のすべての要素に適用されます。In this location, the styles are applied to all the elements in an application. .NET アプリでのリソースの使用例については、「アプリケーションリソースの使用」を参照してください。For an example of using resources in a .NET app, see Use Application Resources.

  3. ExpenseItHome.xaml で、Grid の要素間のすべてを次の XAML に置き換えます。In ExpenseItHome.xaml, replace everything between the Grid elements with the following 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>
    
       <!-- People list -->
      
       <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>
       <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
           <ListBoxItem>Mike</ListBoxItem>
           <ListBoxItem>Lisa</ListBoxItem>
           <ListBoxItem>John</ListBoxItem>
           <ListBoxItem>Mary</ListBoxItem>
       </ListBox>
    
       <!-- View report button -->
       <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
    

    各コントロールの外観を定義する VerticalAlignmentFontFamily などのプロパティは、これらのスタイルを適用することで、削除されて置き換えられます。The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. たとえば、headerTextStyle は "経費報告書の表示" Labelに適用されます。For example, the headerTextStyle is applied to the "View Expense Report" Label.

  4. ExpenseReportPage.xamlを開きます。Open ExpenseReportPage.xaml.

  5. Grid の要素間のすべてを次の XAML に置き換えます。Replace everything between the Grid elements with the following 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 Margin="10" Grid.Column="1" Grid.Row="1">
    
          <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
              <RowDefinition />
          </Grid.RowDefinitions>
    
          <!-- Name -->
          <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
              <Label Style="{StaticResource labelStyle}">Name:</Label>
              <Label Style="{StaticResource labelStyle}"></Label>
          </StackPanel>
    
          <!-- Department -->
          <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
      Orientation="Horizontal">
              <Label Style="{StaticResource labelStyle}">Department:</Label>
              <Label Style="{StaticResource labelStyle}"></Label>
          </StackPanel>
    
          <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
                HorizontalAlignment="Left">
              <!-- Expense type and Amount table -->
              <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" 
                        AutoGenerateColumns="False" RowHeaderWidth="0" >
                  <DataGrid.Columns>
                      <DataGridTextColumn Header="ExpenseType" />
                      <DataGridTextColumn Header="Amount"  />
                  </DataGrid.Columns>
              </DataGrid>
          </Grid>
      </Grid>
    

    この XAML は、Label 要素と Border 要素にスタイルを追加します。This XAML adds styles to the Label and Border elements.

  6. アプリケーションをビルドして実行します。Build and run the application. ウィンドウの外観は、以前と同じです。The window appearance is the same as previously.

    前回のセクションと同じ外観の、このサンプルスクリーンショット。

  7. アプリケーションを閉じて、Visual Studio に戻ります。Close the application to return to Visual Studio.

コントロールへのデータのバインドBind data to a control

このセクションでは、さまざまなコントロールにバインドされている XML データを作成します。In this section, you'll create the XML data that is bound to various controls.

  1. ExpenseItHome.xaml で、開いている Grid 要素の後に、次の XAML を追加して、各ユーザーのデータを含む XmlDataProvider を作成します。In ExpenseItHome.xaml, after the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person:

    <Grid.Resources>
        <!-- Expense Report Data -->
        <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
            <x:XData>
                <Expenses xmlns="">
                    <Person Name="Mike" Department="Legal">
                        <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                        <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                    </Person>
                    <Person Name="Lisa" Department="Marketing">
                        <Expense ExpenseType="Document printing"
              ExpenseAmount="50"/>
                        <Expense ExpenseType="Gift" ExpenseAmount="125" />
                    </Person>
                    <Person Name="John" Department="Engineering">
                        <Expense ExpenseType="Magazine subscription" 
             ExpenseAmount="50"/>
                        <Expense ExpenseType="New machine" ExpenseAmount="600" />
                        <Expense ExpenseType="Software" ExpenseAmount="500" />
                    </Person>
                    <Person Name="Mary" Department="Finance">
                        <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                    </Person>
                </Expenses>
            </x:XData>
        </XmlDataProvider>
    </Grid.Resources>
    

    データは Grid リソースとして作成されます。The data is created as a Grid resource. 通常、このデータはファイルとして読み込まれますが、わかりやすくするために、データはインラインで追加されます。Normally this data would be loaded as a file, but for simplicity the data is added inline.

  2. <Grid.Resources> 要素内に、次の <xref:System.Windows.DataTemplate> 要素を追加します。この要素は、ListBox内のデータを <XmlDataProvider> 要素の後に表示する方法を定義します。Within the <Grid.Resources> element, add the following <xref:System.Windows.DataTemplate> element, which defines how to display the data in the ListBox, after the <XmlDataProvider> element:

    <Grid.Resources>
        <!-- Name item template -->
        <DataTemplate x:Key="nameItemTemplate">
            <Label Content="{Binding XPath=@Name}"/>
        </DataTemplate>
    </Grid.Resources>
    

    データテンプレートの詳細については、「データテンプレートの概要」を参照してください。For more information about data templates, see Data templating overview.

  3. 既存の ListBox を次の XAML に置き換えます。Replace the existing ListBox with the following XAML:

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
             ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
             ItemTemplate="{StaticResource nameItemTemplate}">
    </ListBox>
    

    この XAML は、ListBoxItemsSource プロパティをデータソースにバインドし、データテンプレートを ItemTemplateとして適用します。This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

コントロールへのデータの接続Connect data to controls

次に、[ ExpenseItHome ] ページで選択されている名前を取得して、 [ページの追加] のコンストラクターに渡すコードを追加します。Next, you'll add code to retrieve the name that's selected on the ExpenseItHome page and pass it to the constructor of ExpenseReportPage. [調整されたSereportpage ] は、渡された項目を使用してそのデータコンテキストを設定します。これは、"ページのバインド先" に定義されているコントロールです。ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

  1. ExpenseReportPage.xaml.vb または ExpenseReportPage.xaml.csを開きます。Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. オブジェクトを取得するコンストラクターを追加して、選択した個人の経費報告書データを渡せるようにします。Add a constructor that takes an object so you can pass the expense report data of the selected person.

    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;
        }
    
    }
    
    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
    
  3. ExpenseItHome.xaml.vb または ExpenseItHome.xaml.cs を開きます。Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. 選択したユーザーの経費報告書データを渡す新しいコンストラクターを呼び出すように、Click イベントハンドラーを変更します。Change the Click event handler to call the new constructor passing the expense report data of the selected person.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
        this.NavigationService.Navigate(expenseReportPage);
    
    }
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ' View Expense Report
        Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
        Me.NavigationService.Navigate(expenseReportPage)
    
    End Sub
    

データテンプレートを使用したデータのスタイルStyle data with data templates

このセクションでは、データテンプレートを使用して、データバインドリストの各項目の UI を更新します。In this section, you'll update the UI for each item in the data-bound lists by using data templates.

  1. ExpenseReportPage.xamlを開きます。Open ExpenseReportPage.xaml.

  2. "Name" および "Department" Label 要素の内容を適切なデータソースプロパティにバインドします。Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. データバインディングの詳細については、「データバインディングの概要」を参照してください。For more information about data binding, see Data binding overview.

    <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
    </StackPanel>
    
    <!-- Department -->
    <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>
    
  3. 開いている Grid 要素の後に、経費報告書データの表示方法を定義する次のデータテンプレートを追加します。After the opening Grid element, add the following data templates, which define how to display the expense report data:

    <!--Templates to display expense report data-->
    <Grid.Resources>
        <!-- Reason item template -->
        <DataTemplate x:Key="typeItemTemplate">
            <Label Content="{Binding XPath=@ExpenseType}"/>
        </DataTemplate>
        <!-- Amount item template -->
        <DataTemplate x:Key="amountItemTemplate">
            <Label Content="{Binding XPath=@ExpenseAmount}"/>
        </DataTemplate>
    </Grid.Resources>
    
  4. DataGridTextColumn 要素を DataGrid 要素の下の DataGridTemplateColumn に置き換え、テンプレートを適用します。Replace the DataGridTextColumn elements with DataGridTemplateColumn under the DataGrid element and apply the templates to them.

    <!-- Expense type and Amount table -->
    <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
       
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
            <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
        </DataGrid.Columns>
        
    </DataGrid>
    
  5. アプリケーションをビルドして実行します。Build and run the application.

  6. ユーザーを選択し、 [表示] ボタンを選択します。Select a person and then select the View button.

次の図は、コントロール、レイアウト、スタイル、データバインディング、適用されたデータテンプレートを適用した ExpenseIt アプリケーションの両方のページを示しています。The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

名前の一覧と経費報告書を表示するアプリの両方のページ。

注意

このサンプルでは、WPF の特定の機能について説明します。セキュリティ、ローカライズ、アクセシビリティなどのベストプラクティスについては説明しません。This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. WPF と .NET アプリ開発のベストプラクティスの包括的な説明については、次のトピックを参照してください。For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:

次のステップNext steps

このチュートリアルでは、Windows Presentation Foundation (WPF) を使用して UI を作成するためのいくつかの手法について学習しました。In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). これで、データバインドされた .NET アプリの構成要素についての基本的な理解ができました。You should now have a basic understanding of the building blocks of a data-bound .NET app. WPF のアーキテクチャおよびプログラミング モデルの詳細については、次のトピックを参照してください。For more information about the WPF architecture and programming models, see the following topics:

アプリケーションの作成の詳細については、次のトピックを参照してください。For more information about creating applications, see the following topics:

関連項目See also