Поделиться через

Введение в Windows Presentation Foundation

  • Статья

Обновлен: Ноябрь 2007

В этом руководстве представлены общие сведения о разработке приложений WPF (Windows Presentation Foundation), включающих в себя элементы, которые являются общими для большинства приложений WPF: разметку Язык XAML (Extensible Application Markup Language), код программной части, определения приложения, элементы управления, макет, привязку данных и стили.

В этом разделе содержатся следующие подразделы.

  • Сводка
  • Необходимые компоненты
  • Создание файлов кода приложения
  • Построение и запуск приложения
  • Добавление макета
  • Добавление элементов управления
  • Добавление изображения и заголовка
  • Добавление кода для обработки событий
  • Создание пользовательского интерфейса для ExpenseReportPage
  • Добавление кода для стилей элемента управления
  • Привязка данных к элементу управления
  • Подключение данных к элементам управления
  • Добавление стилей к данным с помощью шаблонов данных
  • Рекомендации
  • Что дальше?
  • Связанные разделы

Сводка

В этом руководстве описываются шаги по разработке простого приложения WPF.

  • Определение разметки XAML для разработки приложения пользовательский интерфейс.

  • Написание кода для построения модели поведения приложения.

  • Создание управляющих определений приложения.

  • Добавление элементов управления и макета, входящих в состав приложения Пользовательский интерфейс.

  • Создание стилей, обеспечивающих унифицированный внешний вид компонентов приложения Пользовательский интерфейс.

  • Связывание Пользовательский интерфейс с данными для заполнения Пользовательский интерфейс из данных и синхронизации данных с Пользовательский интерфейс.

Изучив данное руководство, вы сможете создать автономное приложение Windows, которое позволит пользователям просматривать отчеты о расходах выбранных лиц. Приложение будет состоять из нескольких страниц WPF, расположенных в окне обозревателя.

Пример кода, используемого для создания данного руководства, доступен как для C#, так и для Microsoft Visual Basic .NET. См. пример в разделе Введение в разработку приложений Windows Presentation Foundation.

Необходимые компоненты

Чтобы построить приложение, разработанное в данном руководстве, необходимо установить Microsoft .NET Framework и Пакет средств разработки программного обеспечения (SDK) для Windows.

По завершении установки можно построить приложение из окна команд (при необходимости можно использовать IDE (Integrated Development Environment — интегрированная среда разработки) как Microsoft Visual Studio). Чтобы построить приложение из командной строки, необходимо использовать окно команд, которое устанавливается вместе с Пакет средств разработки программного обеспечения (SDK) для Windows. Это можно найти в меню по следующему пути:

  • Меню «Пуск» | Все программы | Пакет SDK для Microsoft Windows | Оболочка CMD

Кроме того, можно открыть командную строку Windows, выполнив следующие действия:

  1. В меню Пуск выберите Выполнить.

  2. Введите следующую команду:

    C:\WINDOWS\system32\cmd.exe /E:ON /V:ON /T:0E /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"

  3. Нажмите кнопку ОК.

Обратите внимание, что в файле SetEnv.cmd выполняется настройка среды для построения приложений WPF из командной строки.

Создание файлов кода приложения

На этом шаге создается инфраструктура приложения, включающая определение приложения, две страницы и изображение.

  1. Создайте новый файл разметки XAML с именем App.xaml. В этом файле содержится определение приложения WPF. Также в нем можно установить автоматическое отображение Пользовательский интерфейс при запуске приложения, в этом случае — HomePage.xaml (создается на следующем шаге). Разметка XAML должна иметь следующий вид:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  StartupUri="HomePage.xaml">
</Application>

  2. Создайте новый файл разметки XAML с именем HomePage.xaml, который представляет первую страницу, отображаемую при запуске приложения. На странице HomePage.xaml выводится список, в котором можно выбрать человека и просмотреть отчет о его затратах. Добавьте в HomePage.xaml элемент Page со следующими параметрами:

    • Строка заголовка обозревателя — «ExpenseIt».

    • Ширина обозревателя — 550 аппаратно независимых точек.

    • Высота обозревателя — 350 аппаратно независимых точек.

    • Заголовок страницы — «ExpenseIt - Home».

    Разметка XAML должна иметь следующий вид:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
</Page>

  3. Создайте новый файл кода с именем HomePage.xaml.cs. В этом файле кода программной части будет содержаться код обработки событий, объявленных в файле HomePage.xaml. Код должен выглядеть следующим образом:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

  4. Создайте новый файл разметки XAML с именем ExpenseReportPage.xaml. Добавьте элемент Page и установите в качестве заголовка страницы «ExpenseIt - View Expense Report». На этой странице будет представлен отчет о расходах для человека, выбранного на странице HomePage.xaml. Разметка XAML должна иметь следующий вид:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">
</Page>

  5. Создайте новый файл с именем ExpenseReportPage.xaml.cs. В этом файле кода программной части будет содержаться код привязки данных для отчета о расходах к Пользовательский интерфейс, определенному в файле ExpenseReportPage.xaml. Код должен выглядеть следующим образом:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  6. Добавьте изображение с именем watermark.png в папку, в которой расположены пять файлов кода, созданные на предыдущих шагах. Можно создать собственное изображение или скопировать файл с тем же именем из образца кода.

Построение и запуск приложения

На этом шаге с помощью MSBuild создается приложение, определенное в предыдущем разделе.

  1. Создайте новый файл с именем ExpenseIt.csproj. В этом файле MSBuild (специализированный тип файла XML) будет содержаться конфигурация построения приложения, в том числе:

    • Глобальные переменные построения для скомпилированного проекта, включая имя, тип и папку сборки.

    • Ссылки на файлы кода.

    • Ссылки на сборки Microsoft .NET Framework, содержащие типы, которые используются в приложении.

    Содержимое файла построения должно выглядеть следующим образом:

    <?xml version="1.0" encoding="utf-8"?>
<Project xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <AssemblyName>ExpenseIt</AssemblyName>
        <TargetType>winexe</TargetType>
        <OutputPath>bin\$(Configuration)\</OutputPath>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System"/>
        <Reference Include="System.Xml"/>
        <Reference Include="System.Data"/>
        <Reference Include="WindowsBase"/>
        <Reference Include="PresentationCore"/>
        <Reference Include="PresentationFramework"/>
    </ItemGroup>
    <ItemGroup>
        <ApplicationDefinition Include="App.xaml"/>
        <Page Include="HomePage.xaml"/>
        <Compile Include="HomePage.xaml.cs" />
        <Page Include="ExpenseReportPage.xaml"/>
        <Compile Include="ExpenseReportPage.xaml.cs" />
        <Resource Include="watermark.png"/>
    </ItemGroup>
    <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>

  2. Откройте окно команд для папки, в которой находятся файл проекта и файлы кода приложения.

  3. В командной строке введите следующую команду:

    MSBuild ExpenseIt.csproj

    Для Microsoft Visual Basic .NET следует выполнить следующую команду:

    MSBuild ExpenseIt.vbproj

    Чтобы скомпилировать и запустить приложение с помощью Visual Studio, откройте файл проекта в Visual Studio и нажмите клавишу F5.

ms752299.alert_note(ru-ru,VS.90).gifПримечание.

В Visual Studio 2005 файл проекта создается автоматически. Поскольку в этом руководстве не предполагается установка Visual Studio, процесс создания файла проекта описан подробно. Дополнительные сведения о создании файлов CSPROJ см. в разделе Построение приложения WPF. Если для выполнения заданий данного руководства используется Visual Studio, замените содержимое созданного файла CSPROJ предыдущим текстом MSBuild.

  1. Откройте папку, содержащую исполняемый файл сборки приложения expenseit.exe. Если построение происходит из командной строки, файл expenseit.exe располагается в следующей папке:

    Папка, содержащая файлы кода приложения\bin\

    Если построение происходит с использованием Visual Studio, файл expenseit.exe располагается в следующей папке:

    Папка, содержащая файлы кода приложения\bin\debug\

  2. В командной строке запустите файл expenseit.exe. Работающее приложение показано на следующем рисунке.

    Снимок экрана примера ExpenseIt

Добавление макета

Макет обеспечивает упорядоченное расположение элементов Пользовательский интерфейс, а также управление их размером и положением при изменении размера Пользовательский интерфейс. Обычно макет добавляется в Пользовательский интерфейс с одним из следующих элементов управления макетом:

Для каждого из них поддерживается специальный тип макета дочерних элементов. Размер страниц приложения ExpenseIt может быть изменен. На каждой странице представлены элементы, которые упорядочены по горизонтали и вертикали рядом с другими элементами. Следовательно, Grid является идеальным элементом макета для приложения.

ms752299.alert_note(ru-ru,VS.90).gifПримечание.

Дополнительные сведения об элементах Panel см. в разделе Общие сведения о панелях.

В приведенной ниже разметке XAML создается таблица, состоящая из одного столбца и трех строк с шириной границы в 10 точек, посредством добавления элементов Grid в файл HomePage.xaml:

  1. Откройте файл HomePage.xaml

  2. Добавьте следующие XAML между тегами Page.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
    <Grid Margin="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
    </Grid>
</Page>

Добавление элементов управления

На этом шаге Пользовательский интерфейс домашней страницы обновляется для отображения списка людей, для которых можно вывести отчет о расходах. Для создания Пользовательский интерфейс в файл HomePage.xaml добавляются следующие элементы:

  • ListBox — отображение списка людей.

  • Label — заголовок списка.

  • Button — кнопка для просмотра отчета о расходах для выбранного в списке человека.

Выполните следующие действия, чтобы обновить файл HomePage.xaml:

  1. Замените содержимое файла HomePage.xaml следующим XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid Margin="10">

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

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

  </Grid>

</Page>

  2. Скомпилируйте и запустите приложение.

На следующем рисунке показаны элементы управления, создаваемые на этом шаге.

Снимок экрана примера ExpenseIt

Добавление изображения и заголовка

На этом шаге Пользовательский интерфейс домашней страницы обновляется с использованием соответствующего изображения и заголовка страницы:

  1. Откройте файл HomePage.xaml.

  2. Замените содержимое файла HomePage.xaml следующим XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

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

    </Grid>

  </Grid>
</Page>

    С помощью XAML элемент Grid обновляется следующим образом:

    • Создание новой сетки с двумя строками.

    • Добавление объекта DockPanel с объектами Canvas, Image и Label в первую строку. Объект DockPanel занимает два столбца в первой строке, что в сочетании с объектом Canvas, закрепленным по левому краю, позволяет объекту Label перекрывать объект Image.

    • Использование атрибута Source элемента Image для указания исходного изображения: watermark.png.

    • Добавление следующего текста заголовка для объекта Label: «View Expense Report».

    • Использование атрибутов элементов Canvas и Label для настройки их внешнего вида и размера.

    • Перемещение сетки, изначально представленной на странице HomePage.xaml, во второй столбец второй строки новой сетки.

  3. Скомпилируйте и запустите приложение.

На следующем рисунке показаны результаты этого шага.

Снимок экрана примера ExpenseIt

Добавление кода для обработки событий

  1. Откройте файл HomePage.xaml.

  2. Замените код элемента Button, определенного на предыдущем шаге, следующим кодом.

    ...
<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Width="125" Height="25" 
  Margin="0,10,0,0" HorizontalAlignment="Right" 
  Click="viewButton_Click">View</Button>
...
    ms752299.alert_note(ru-ru,VS.90).gifПримечание.

    Имя обрабатываемого события объекта Button — Click. Имя определяемого разработчиком обработчика событий — viewButton_Click. Обработчик событий регистрируется событием Click для элемента управления Button.

  3. Откройте файл HomePage.xaml.cs, созданный на шаге Создание файлов кода приложения этого руководства.

  4. Замените содержимое файла следующим кодом. В этом случае добавляется код для обработки события Click, в результате чего осуществляется переход к файлу ExpenseReportPage.xaml.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // View Expense Report
            ExpenseReportPage expenseReportPage = new ExpenseReportPage();
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

Создание пользовательского интерфейса для ExpenseReportPage

На странице ExpenseReportPage.xaml будет представлен отчет о расходах для человека, выбранного на странице HomePage.xaml. Ниже описывается добавление элементов управления и макета для создания основного Пользовательский интерфейс для страницы ExpenseReportPage.xaml. Также к различным элементам Пользовательский интерфейс добавляются цвета фона и заливки.

  1. Откройте файл ExpenseReportPage.xaml и добавьте следующий код.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        Expense Report For:
      </Label>
    </DockPanel>

    <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="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>
    </Grid>
  </Grid>
</Page>

  2. Скомпилируйте и запустите приложение.

На следующем рисунке показаны элементы Пользовательский интерфейс, добавленные на страницу ExpenseReportPage.xaml.

Снимок экрана примера ExpenseIt

Добавление кода для стилей элемента управления

В Пользовательский интерфейс внешний вид различных элементов одного типа часто может совпадать. Возможность повторного использования параметров внешнего вида для различных элементов реализуется в Пользовательский интерфейс с помощью стилей. Повторное использование стилей помогает упростить создание разметки XAML и управление ею. На этом шаге атрибуты, установленные на предыдущем шаге для каждого элемента, заменяются стилями:

  1. Откройте файл App.xaml, созданный на шаге Создание файлов кода приложения данного руководства.

  2. Замените содержимое файла следующей разметкой XAML:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="HomePage.xaml">

  <Application.Resources>

    <!-- Background image style -->
    <Style x:Key="backgroundImageStyle">
      <Setter Property="Image.Source" Value="watermark.png"/>
    </Style>

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

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

  </Application.Resources>

</Application>

    В этой разметке XAML добавляются следующие стили:

    • headerTextStyle — форматирование объекта Label для заголовка страницы.

    • labelStyle — форматирование меток объекта Label.

    • listHeaderStyle — форматирование элементов управления для объекта Border заголовка списка.

    • listHeaderTextStyle — форматирование объекта Label заголовка списка.

    • buttonStyle — форматирование кнопки на странице HomePage.xaml.

    Обратите внимание, что стили представляют собой дочерние ресурсы элемента свойства Application.Resources. Здесь стили применяются ко всем элементам в приложении. Пример использования ресурсов в приложении .NET Framework см. в разделе Практическое руководство. Использование ресурсов приложения.

  3. Откройте файл HomePage.xaml.

  4. Замените содержимое файла следующим кодом. На этом шаге атрибуты вешнего вида, характерные для каждого элемента, заменяются с использованием соответствующего стиля.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">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" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View
      </Button>

    </Grid>

  </Grid>

</Page>

  5. Откройте файл ExpenseReportPage.xaml.

  6. Замените содержимое файла следующим кодом.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <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="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  7. Скомпилируйте и запустите приложение. После добавления разметки XAML на этом шаге приложение выглядит так же, как и перед обновлением с использованием стилей.

Привязка данных к элементу управления

На этом шаге создаются данные XML, привязанные к различным элементам управления:

  1. Откройте файл HomePage.xaml.

  2. Замените содержимое файла следующей разметкой XAML:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.Resources>

      <!-- Expense Report Data -->
      <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
          <Expenses >
            <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.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" 
        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

    Обратите внимание, что данные создаются в качестве ресурса объекта Grid.

Подключение данных к элементам управления

На этом шаге создается код, в котором получается текущий элемент, выбранный в списке людей на странице HomePage, и передается ссылка на него конструктору ExpenseReportPage при создании экземпляра. На основании значения переданного элемента устанавливается контекст данных объекта ExpenseReportPage. К этому контексту привязываются элементы управления, определенные на странице ExpenseReportPage.xaml.

  1. Откройте файл HomePage.xaml.cs.

  2. Замените содержимое файла следующим кодом.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // Create a new expense report page and pass it the selected person
            // by using the non-default constructor.
            ExpenseReportPage expenseReportPage = 
                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            // Navigate to the expense report page,
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

  3. Откройте файл ExpenseReportPage.xaml.cs.

  4. Замените содержимое файла следующим кодом.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage(object data)
        {
            InitializeComponent();

            // Bind to expense report data.
            this.DataContext = data;
        }
    }
}

Добавление стилей к данным с помощью шаблонов данных

На этом шаге для каждого элемента из списков привязки данных с помощью шаблонов обновляется Пользовательский интерфейс:

  1. Откройте файл ExpenseReportPage.xaml.

  2. Замените содержимое файла следующим кодом.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <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 Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Content="{Binding XPath=@Department}" Style="{StaticResource labelStyle}"/>
      </StackPanel>
      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource typeItemTemplate}" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource amountItemTemplate}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  3. Скомпилируйте и запустите приложение.

Обратите внимание, что шаблоны данных определены как ресурсы объекта Grid.

На следующих рисунках представлены обе страницы приложения ExpenseIt, к которым применены элементы управления, разметка, стили, привязка данных и шаблоны данных:

Снимки экрана примера ExpenseIt

Рекомендации

В этом примере описываются специфические функции Windows Presentation Foundation и, следовательно, не соблюдаются рекомендации по разработке приложений. Более полное рассмотрение Windows Presentation Foundation (WPF) и рекомендации по разработке приложений Microsoft .NET Framework см. в следующих источниках:

Доступность — Рекомендации по специальным возможностям

Безопасность — Безопасность Windows Presentation Foundation

Локализация — Общие сведения о глобализации и локализации WPF

Улучшение производительности приложений WPF

Что дальше?

Теперь вы ознакомились с различными способами создания Пользовательский интерфейс с использованием Windows Presentation Foundation (WPF). Далее следует более основательно изучить основные конструктивные блоки приложений .NET Framework с привязкой к данным. Целью этого раздела не являлось углубленное изучение, однако вы получили общие сведения, которые могут использоваться в качестве базы для самостоятельного изучения возможностей, не освещенных в этом разделе.

Дополнительные сведения о панелях см. в разделе Общие сведения о панелях. Дополнительные сведения о шаблонах данных см. в разделе Общие сведения о шаблонах данных.

См. также

Основные понятия

Система макета

Общие сведения о панелях

Общие сведения о связывании данных

Общие сведения о шаблонах данных

Построение приложения WPF