チュートリアル: 初めての WPF デスクトップ アプリケーションWalkthrough: My First WPF Desktop Application

このチュートリアルを、Windows Presentation Foundation (WPF) 開発入門としてご利用ください。This walkthrough provides an introduction to Windows Presentation Foundation (WPF) development. ここでは、ほとんどの WPF デスクトップ アプリケーションに共通する要素 (XAML マークアップ、分離コード、アプリケーション定義、コントロール、レイアウト、データ バインディング、スタイル) を含む基本的なアプリケーションを作成します。You'll create a basic application that includes the elements that are common to most WPF desktop applications: XAML markup, code-behind, application definitions, controls, layout, data binding, and styles.

アプリケーション プロジェクトの作成Creating the Application Project

このセクションでは、プロジェクトとメイン ウィンドウまたはフォームを含むアプリケーション インフラストラクチャを作成します。In this section, you'll create the application infrastructure, which includes the project and a main window or form.

プロジェクトを作成するにはTo create the project

  1. メニュー バーで、 [ファイル][新規作成][プロジェクト]の順にクリックします。On the menu bar, choose File, New, Project.

  2. [新しいプロジェクト] ダイアログで、 [Visual C#] ノードまたは [Visual Basic] ノードを展開し、 [Windows] ノードを選択して [Windows] ノードを展開してから [従来の (クラシック) デスクトップ] ノードを選択します。In the New Project dialog, expand either the Visual C# or Visual Basic node and choose the Windows node, and then expand the Windows node and choose the Classic Desktop node.

  3. テンプレートの一覧で、 [WPF アプリケーション] テンプレートを選択します。In the template list, choose the WPF Application template.

  4. [名前] ボックスに「 ExpenseIt」と入力して、 [OK] を選択します。In the Name textbox enter ExpenseIt, and then choose the OK button.

    プロジェクトが作成され、プロジェクト ファイルが ソリューション エクスプローラーに追加され、 MainWindow.xaml という名前の既定のアプリケーション ウィンドウのデザイナーが表示されます。The project is created and the project files are added to Solution Explorer, and the designer for the default application window named MainWindow.xaml is displayed.

メイン ウィンドウを変更するにはTo modify the main window

  1. デザイナーで [MainWindow.xaml] タブがアクティブでなければ、このタブを選択します。In the designer, choose the MainWindow.xaml tab if it isn't already the active designer tab.

  2. C# を使用する場合は、<Window x:Class="ExpenseIt.MainWindow" という行を見つけ、その行を <NavigationWindow x:Class="ExpenseIt.MainWindow" に置き換えます。If you're using C#, find the line <Window x:Class="ExpenseIt.MainWindow" and replace it with <NavigationWindow x:Class="ExpenseIt.MainWindow".

    Visual Basic を使用する場合は、<Window x:Class=" MainWindow" という行を見つけ、その行を <NavigationWindow x:Class="MainWindow" に置き換えます。If you're using Visual Basic, find the line <Window x:Class=" MainWindow" and replace it with <NavigationWindow x:Class="MainWindow".

    <Window タグを <NavigationWindowに変更すると、Intellisense によって終了タグも </NavigationWindow> に自動的に変更されます。Notice that when you change the <Window tag to <NavigationWindow, Intellisense automatically changes the closing tag to </NavigationWindow> as well.

    注意

    タグを変更した後、 [エラー一覧] ウィンドウが開いていると、エラーがいくつか表示される場合があります。After changing the tag, if the Error List window is open you may notice several errors. 心配しないでください。この後の手順で加える変更でそれらのエラーは解消されます。Don't worry, the changes you make in the next few steps will make these go away.

  3. <Grid></Grid> のタグを選択して削除します。Choose the <Grid> and </Grid> tags and delete them.

    NavigationWindow に、グリッドなどの他の UI 要素を含めることはできません。A NavigationWindow can't contain other UI elements such as a Grid.

  4. [プロパティ] ウィンドウで、 Common カテゴリ ノードを展開し [Title] プロパティを選択してから、「 ExpenseIt 」と入力して Enter キーを押します。In the Properties window, expand the Common category node and choose the Title property, and then enter ExpenseIt and press the Enter key.

    [XAML] ウィンドウの [Title] 要素がこの新しい値と一致していることに注目してください。Notice that the Title element in the XAML window changes to match the new value. XAML のプロパティは、[XAML] ウィンドウまたは [プロパティ] ウィンドウのいずれかで変更でき、それらの変更は同期されます。You can modify XAML properties in either the XAML window or the Properties window, and the changes are synchronized.

  5. [XAML] ウィンドウで [Height] 要素の値を 375に設定し、 [Width] プロパティの値を 500で行うことができます。In the XAML window, set the value of the Height element to 375, and set the value of the Width property to 500.

    これらの要素は、 [プロパティ] ウィンドウの [レイアウト] カテゴリにある [高さ] プロパティと [幅] プロパティに対応します。These elements correspond to the Height and Width properties, found in the Layout category in the Properties window.

    MainWindow.xaml ファイルは C# では次のようになります。Your MainWindow.xaml file should now look like this 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"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500">    
    </NavigationWindow>  
    

    また、Visual Basic では次のようになります。Or like this 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"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500">    
    </NavigationWindow>  
    

分離コード ファイルを変更するには (C#)To modify the code-behind file (C#)

  1. ソリューション エクスプローラー[MainWindow.xaml] ノードを展開し、 MainWindow.xaml.cs ファイルを開きます。In Solution Explorer, expand the MainWindow.xaml node and open the MainWindow.xaml.cs file.

  2. public partial class MainWindow : Window という行を見つけ、その行を public partial class MainWindow : NavigationWindowに置き換えます。Find the line public partial class MainWindow : Window and replace it with public partial class MainWindow : NavigationWindow.

    これにより、 MainWindow クラスが NavigationWindowから派生するように変更されます。This changes the MainWindow class to derive from NavigationWindow. Visual Basic では、これは XAML でウィンドウを変更すると自動的に実行されます。そのため、コードを変更する必要はありません。In Visual Basic, this happens automatically when you change the window in XAML, so no code changes are necessary.

ファイルのアプリケーションへの追加Adding Files to the Application

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

ホーム画面を追加するにはTo add a home screen

  1. ソリューション エクスプローラー[ExpenseIt] ノードのショートカット メニューを開き、 [追加][ページ]を選択します。In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Page.

  2. [新しい項目の追加] ダイアログで [名前] テキスト ボックスを選択して「 ExpenseItHome」と入力し、 [追加] ボタンを選択します。In the Add New Item dialog, choose the Name text box and enter ExpenseItHome, and then choose the Add button.

    このページが、アプリケーションの起動時に表示される最初のウィンドウになります。This page is the first window that is displayed when the application is launched.

  3. デザイナーで [ExpenseItHome.xaml] タブがアクティブでなければ、このタブを選択します。In the designer, choose the ExpenseItHome.xaml tab if it isn't already the active designer tab.

  4. <Title> 要素を選択し、タイトルを "ExpenseIt – ホーム" に変更します。Choose the <Title> element and change the title to ExpenseIt - Home.

    ExpenseItHome.xaml ファイルは C# では次のようになります。Your ExpenseItHome.xaml file should now look like this in 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"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - Home">    
        <Grid>  
    
        </Grid>  
    </Page>  
    

    Visual Basic では、最初の行がわずかに異なります。In Visual Basic, the first line will by slightly different:

    <Page x:Class="ExpenseItHome"  
    
  5. デザイナーで MainWindow.xaml タブを選択します。In the designer, choose the MainWindow.xaml tab.

  6. Title="ExpenseIt" Height="375" Width="500"> 要素を見つけ、 Source="ExpenseItHome.xaml" プロパティを追加します。Find the line Title="ExpenseIt" Height="375" Width="500"> element and add a Source="ExpenseItHome.xaml" property.

    これにより、 ExpenseItHome.xaml が、アプリケーションの起動時に最初に開くページになります。This sets ExpenseItHome.xaml to be the first page opened when the application starts. MainWindow.xaml ファイルは C# では次のようになります。Your MainWindow.xaml file should now look like this 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"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:ExpenseIt"  
            mc:Ignorable="d"  
            Title="ExpenseIt" Height="375" Width="500" Source="ExpenseItHome.xaml">    
    </NavigationWindow>  
    

    Visual Basic では、最初の行がわずかに異なります。In Visual Basic, the first line will by slightly different:

    <NavigationWindow x:Class="MainWindow"
    

    これまでに設定したプロパティと同様に、 Source [プロパティ] ウィンドウの [その他] カテゴリの プロパティを設定できます。As with the properties that you set earlier, you could have set the Source property in the Miscellaneous category of the Properties window.

詳細ウィンドウを追加するにはTo add a details window

  1. ソリューション エクスプローラー[ExpenseIt] ノードのショートカット メニューを開き、 [追加][ページ]を選択します。In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Page.

  2. [新しい項目の追加] ダイアログで [名前] テキスト ボックスを選択して「 ExpenseReportPage」と入力し、 [追加] ボタンを選択します。In the Add New Item dialog, choose the Name text box and enter ExpenseReportPage, and then choose the Add button.

    このウィンドウには、個々の経費明細書が表示されます。This window will display an individual expense report.

  3. デザイナーで [ExpenseReportPage.xaml] タブがアクティブでなければ、このタブを選択します。In the designer, choose the ExpenseReportPage.xaml tab if it isn't already the active designer tab.

  4. <Title> 要素を選択し、タイトルを "ExpenseIt – 経費の表示" に変更します。Choose the <Title> element and change the title to ExpenseIt - View Expense.

    ExpenseReportPage.xaml ファイルは C# では次のようになります。Your ExpenseReportPage.xaml file should now look like this 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"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - View Expense">    
        <Grid>  
    
        </Grid>  
    </Page>  
    

    Visual Basic では、最初の行がわずかに異なります。In Visual Basic, the first line will be slightly different:

    <Page x:Class="ExpenseReportPage"  
    
  5. メニュー バーで、 [デバッグ][デバッグ開始] の順に選択して (または F5 キーを押して) アプリケーションを実行します。On the menu bar, choose Debug, Start Debugging (or press F5) to run the application.

    次の図は、ナビゲーション ウィンドウ ボタンが配置されたアプリケーションを示しています。The following illustration shows the application with the navigation window buttons.

    ExpenseIt のサンプルのスクリーン ショットExpenseIt sample screen shot

  6. アプリケーションを閉じてデザイン モードに戻ります。Close the application to return to design mode.

ユーザー インターフェイスの作成Creating the User Interface

レイアウトを使用すると、順序付けされた方法で要素を配置できます。また、フォームのサイズが変更された場合の要素のサイズと位置が管理されます。Layout provides an ordered way to place elements, and also manages the size and position of those elements when a form is resized. このセクションでは、3 つの行を持つ単一列のグリッドを作成します。In this section, you'll create a single-column grid with three rows. 2 つのページにコントロールを追加し、いくつかのコードを追加して、最後にコントロールの再利用可能なスタイルを定義します。You'll add controls to the two pages, add some code, and finally define reusable styles for the controls.

レイアウトを作成するにはTo create the layout

  1. ExpenseItHome.xaml を開き、 <Grid> 要素を選択します。Open ExpenseItHome.xaml and choose the <Grid> element.

  2. [プロパティ] ウィンドウで [高さ] カテゴリ ノードを展開し、 [余白] の値を 10100、 and 10、 which corresponds to left、 right、 top and bottom margins.In the Properties window, expand the Layout category node and set the Margin values to 10, 10, 0, and 10, which corresponds to left, right, top and bottom margins.

    要素 Margin="10,0,10,10" は XAML 内の <Grid> 要素に追加されます。The element Margin="10,0,10,10" is added to the <Grid> element in the XAML. 繰り返しになりますが、 [プロパティ] ウィンドウの代わりに XAML コード内にこれらの値を直接入力しても同じ結果になります。Once again, you could have entered these values directly in the XAML code instead of in the Properties window with the same result.

  3. 次の XAML コードを Grid 要素に追加して、行と列の定義を作成します。Add the following XAML code to the Grid element to create the row and column definitions:

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

コントロールを追加するにはTo add controls

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

  2. 次の XAML コードを </Grid> タグのすぐ上に追加して、BorderListBox、および Button コントロールを作成します。Add the following XAML code just above the </Grid> tag to create the Border, ListBox and Button controls:

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

    これらのコントロールがデザイン ウィンドウに表示されたことを確認してください。Notice that the controls appear in the design window. コントロールを [ツールボックス] ウィンドウからデザイン ウィンドウにドラッグし、 [プロパティ] ウィンドウでプロパティを設定することよって、コントロールを作成することもできます。You could also have created the controls by dragging them from the Toolbox window onto the design window and setting their properties in the Properties window.

  3. アプリケーションをビルドして実行します。Build and run the application. 次の図は、この手順によって XAML で作成されるコントロールの実行時の外観を示しています。The following illustration shows the run time appearance of the controls that are created by the XAML in this procedure.

    ExpenseIt のサンプルのスクリーン ショットExpenseIt sample screen shot

  4. アプリケーションを閉じてデザイン モードに戻ります。Close the application to return to design mode.

背景イメージを追加するにはTo add a background image

  1. 次のイメージを選択し、 watermark.pngの順にクリックします。Choose the following image and save it as watermark.png.

    チュートリアルのウォーターマーク イメージWatermark image for walkthrough

    注意

    または、独自のイメージを作成し、 watermark.pngの順にクリックします。Alternatively you can create your own image and save it as watermark.png.

  2. ソリューション エクスプローラー[ExpenseIt] ノードのショートカット メニューを開き、 [追加][既存の項目]を選択します。In Solution Explorer, open the shortcut menu for the ExpenseIt node and choose Add, Existing Item.

  3. [既存項目の追加] ダイアログで、追加したばかりの watermark.png イメージを探して選択し、 [追加] ボタンを選択します。In the Add Existing Item dialog, find the watermark.png image that you just added, choose it and then choose the Add button.

    注意

    [ファイルの種類] リストを展開し、 [イメージ ファイル]を選択する必要がある場合があります。You may need to expand the File Types list and choose Image Files.

  4. ExpenseItHome.xaml ファイルを開き、次の XAML コードを </Grid> タグのすぐ上に追加し、背景イメージを作成します。Open the ExpenseItHome.xaml file and add the following XAML code just above the </Grid> tag to create a background image:

    <Grid.Background>  
        <ImageBrush ImageSource="watermark.png"/>  
    </Grid.Background>    
    

タイトルを追加するにはTo add a title

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

  2. <Grid.ColumnDefinitions> を見つけ、そのすぐ下に次を追加します。Find the line <Grid.ColumnDefinitions> and add the following just below it:

    <ColumnDefinition Width="230" />    
    

    これにより、他の列の左側に、追加の列が 230 ピクセルの固定幅で作成されます。This creates an additional column to the left of the other columns with a fixed width of 230 pixels.

  3. <Grid.RowDefinitions> を見つけ、そのすぐ下に次を追加します。Find the line <Grid.RowDefinitions> and add the following just below it:

    <RowDefinition />    
    

    これにより、グリッドの上部に行が追加されます。This adds a row to the top of the grid.

  4. Grid.Column の値を 1 に設定して、2 番目の列にコントロールを移動します。Move the controls to the second column by setting the Grid.Column value to 1. それぞれの Grid.Row の値を 1 つずつ増やして、各コントロールを 1 行下に移動します。Move each control down a row, by increasing each Grid.Row value by 1.

    1. <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">を見つけます。Find the line <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">. Grid.Column="0"Grid.Column="1" に変更して、 Grid.Row="0"Grid.Row="1"に変更します。Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="0" to Grid.Row="1".

    2. <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1"を見つけます。Find the line <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1". Grid.Column="0"Grid.Column="1" に変更して、 Grid.Row="1"Grid.Row="2"に変更します。Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="1" to Grid.Row="2".

    3. <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"を見つけます。Find the line <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125". Grid.Column="0"Grid.Column="1" に変更して、 Grid.Row="2"Grid.Row="3"に変更します。Change Grid.Column="0" to Grid.Column="1" and change Grid.Row="2" to Grid.Row="3".

  5. <Border 要素の直前に、次の XAML コードを追加してタイトルを表示します。Just before the <Border element add the following XAML code to display the title:

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS"   
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">  
        View Expense Report  
    </Label>    
    

    ExpenseItHome.xaml ファイルの内容は、C# では次のようになります。The contents of ExpenseItHome.xaml should now look like this in 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"   
          xmlns:local="clr-namespace:ExpenseIt"  
          mc:Ignorable="d"   
          d:DesignHeight="300" d:DesignWidth="300"  
          Title="ExpenseIt - Home">  
        <Grid Margin="10,0,10,10">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="230" />  
                <ColumnDefinition />  
            </Grid.ColumnDefinitions>  
            <Grid.RowDefinitions>  
                <RowDefinition />  
                <RowDefinition Height="Auto"/>  
                <RowDefinition />  
                <RowDefinition Height="Auto"/>  
            </Grid.RowDefinitions>  
            <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">  
                <Label VerticalAlignment="Center" Foreground="White">Names</Label>  
            </Border>  
            <!-- People list -->  
            <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS"   
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">  
                View Expense Report  
            </Label>  
            <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>  
            <Grid.Background>  
                <ImageBrush ImageSource="watermark.png"/>  
            </Grid.Background>  
        </Grid>  
    </Page>  
    

    Visual Basic では、最初の行がわずかに異なります。In Visual Basic, the first line will be slightly different:

    <Page x:Class="ExpenseItHome"  
    
  6. この時点でアプリケーションをビルドして実行すると、次の図のようになります。If you build and run the application at this point, it should look like the following illustration:

    ExpenseIt のサンプルのスクリーン ショットExpenseIt sample screen shot

コードをボタンに追加するにはTo add code to the button

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

  2. Button 要素を選択し、XAML コード Click="Button_Click" を、HorizontalAlignment="Right" 要素の直後に追加します。Chose the Button element and add the following XAML code immediately after the HorizontalAlignment="Right" element: Click="Button_Click".

    これにより、ボタンの Click イベントのイベント ハンドラーが追加されます。This adds an event handler for the button's Click event. Button 要素のコードは、次のようになります。The Button element code should now look like this:

    <!-- 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>  
    
  3. ExpenseItHome.xaml.cs または ExpenseItHome.xaml.vb ファイルを開きます。Open the ExpenseItHome.xaml.cs or ExpenseItHome.xaml.vb file.

  4. ExpenseItHome クラスに次のコードを追加します。Add the following code to the ExpenseItHome class:

    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  
    

    このイベント ハンドラーは、ボタンがクリックされたときに経費明細書ページを開きます。This event handler opens the Expense Report Page when the button is clicked.

レポート ページの UI を作成するにはTo create the UI for the report page

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

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

  2. <Grid></Grid> のタグの間に次の XAML を追加します。Add the following XAML code between the <Grid> and </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 はホーム ページで作成した UI と似ていますが、 DataGrid コントロールにレポート データが表示されます。This UI is similar to the UI created for the home page, but the report data is displayed in a DataGrid control.

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

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

    経費明細書ページが表示されます。The expense report page appears.

    次の図は、経費明細書ページを示しています。The following illustration shows the Expense Report Page. [戻る] ナビゲーション ボタンが有効になっていることを確認してください。Notice that the back navigation button is enabled.

    ExpenseIt のサンプルのスクリーン ショットExpenseIt sample screen shot

コントロールのスタイルを設定するにはTo style controls

  1. App.xaml ファイル (C#) または Application.xaml ファイル (Visual Basic) を開きます。Open the App.xaml file (C#) or Application.xaml file (Visual Basic).

  2. <Application.Resources></Application.Resources> のタグの間に次の XAML を追加します。Add the following XAML between the <Application.Resources> and </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: Button [ExpenseItHome.xaml] ページの の書式を設定します。buttonStyle: To format the Button on the ExpenseItHome.xaml pppage.

  3. ExpenseItHome.xaml を開き、<Grid></Grid> の要素の間にあるすべてを次の XAML に置き換えます。Open ExpenseItHome.xaml and replace everything between the <Grid> and </Grid> elements with the following XAML:

    <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>  
            <!-- People list -->  
                  <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>  
            <Grid.Background>  
                <ImageBrush ImageSource="watermark.png"  />  
            </Grid.Background>  
    

    各コントロールの外観を定義する VerticalAlignmentFontFamily などのプロパティは、これらのスタイルを適用することで、削除されて置き換えられます。The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles.

  4. ExpenseReportPage.xaml を開き、<Grid> と最後の </Grid> の要素の間にあるすべてを次の XAML に置き換えます。Open ExpenseReportPage.xaml and replace everything between the <Grid> and final </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>    
    

    これにより、スタイルが <Label><Border> の要素に追加されます。This adds styles to the <Label> and <Border> elements.

データへの接続Connecting to Data

このセクションでは、データ プロバイダーとデータ テンプレートを作成して、データを表示するコントロールを接続します。In this section, you'll create a data provider and a data template, and then connect the controls to display the data.

データをコントロールにバインドするにはTo bind data to a control

  1. ExpenseItHome.xaml を開き、 <Grid> 要素を選択します。Open ExpenseItHome.xaml and choose the <Grid> element..

  2. 次の XAML コードを追加します。Add the following XAML code:

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

    このコードにより、各ユーザーのデータを格納する XmlDataProvider クラスが作成されます。This code creates an XmlDataProvider class that contains the data for each person. 通常、これはファイルとして読み込まれますが、説明を簡単にするため、データをインラインで追加します。Normally this would be loaded as a file, but for simplicity the data is added inline.

  3. <Grid.Resources> 要素内に、次の XAML コードを追加します。Inside the <Grid.Resources> element, add the following XAML code:

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

    これにより、 Data Template ListBox にデータを表示する方法を定義するが追加されます。This adds a Data Template which defines how to display the data in the ListBox.

  4. 既存の <ListBox> 要素を次の XAML に置き換えます。Replace the existing <ListBox> element with the following XAML:

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

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

コントロールにデータを接続するにはTo connect data to controls

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

  2. C# では、次のコンストラクターを ExpenseReportPage クラスに追加します。また、Visual Basic では、既存のクラスを次に置き換えます。In C#, add the following constructor to the ExpenseReportPage class, or in Visual Basic replace the existing class with the following:

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

    このコンストラクターは、データ オブジェクトをパラメーターとして受け取ります。This constructor takes a data object as a parameter. この場合、データ オブジェクトには、選択したユーザーの名前が格納されます。In this case the data object will contain the name of the selected person.

  3. ExpenseItHome.xaml.vb または ExpenseItHome.xaml.csファイルを開きます。Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Click イベント ハンドラー コードを次に置き換えます。Replace the Click event handler code with the following:

    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  
    

    このコードは、新しいコンストラクターを呼び出します。This code calls the new constructor.

データ テンプレートを使用して UI を更新するにはTo update the UI with data templates

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

  2. [名前]Department<StackPanel 要素の XAML コードを次に置き換えます。Replace the XAML code for the Name and Department<StackPanel elements with the following:

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

    これにより、 Label コントロールを適切なデータ ソース プロパティにバインドします。This binds the Label controls to the appropriate data source properties.

  3. <Grid> 要素内に、次の XAML コードを追加します。Add the following XAML code inside the <Grid> element:

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

    これにより、経費明細書データを表示する方法が定義されます。This defines how to display the expense report data.

  4. <DataGrid> 要素を次に置き換えます。Replace the <DataGrid> element with the following:

    <!-- Expense type and Amount table -->  
    <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>  
    

    これにより、 ItemSource が追加され、経費品目のバインディングが定義されます。This adds an ItemSource and defines the bindings for the expense items.

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

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

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

    ExpenseIt のサンプルのスクリーン ショットExpenseIt sample screen shots

ベスト プラクティスBest Practices

このサンプルは、WPF の基礎を説明するものであり、アプリケーション開発のベスト プラクティスには従っていません。This sample demonstrates the basics of WPF and, consequently, does not follow application development best practices. WPF と .NET Framework のアプリケーション開発のベスト プラクティスの包括的な情報については、必要に応じて次のトピックを参照してください。For comprehensive coverage of WPF and .NET Framework application development best practices, see the following topics as appropriate:

次の内容What's Next

これで、WPF を使用してデスクトップ アプリケーションを作成するためのいくつかの手法を習得できました。You now have a number of techniques at your disposal for creating a desktop application by using WPF. データ バインドされた WPF アプリケーションの構成要素についての基本を理解することもできました。You should now have a basic understanding of the building blocks of a data-bound WPF application. このトピックは決して網羅的なものではありませんが、このトピックの手法を基に、自分で学習を進められるようになったはずです。This topic is by no means exhaustive, but hopefully you also now have a sense of some of the possibilities you might discover on your own beyond the techniques in this topic.

WPF のアーキテクチャおよびプログラミング モデルの詳細については、次のトピックを参照してください。For more information about the WPF architecture and programming models, see the following topics:

参照See Also

Windows Presentation Foundation での最新のデスクトップ アプリケーションの作成Create Modern Desktop Applications with Windows Presentation Foundation