руководство. создание первого приложения WPF в Visual Studio 2019

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

Важно!

эта статья была написана для платформа .NET Framework. Чтобы приступить к работе с .NET 5 или .NET 6, см. раздел учебник. Создание нового приложения WPF (WPF .NET).

В этом руководстве описано следующее:

  • Создайте проект WPF.
  • Используйте XAML для проектирования внешнего вида пользовательского интерфейса приложения.
  • Напишите код для создания поведения приложения.
  • Создайте определение приложения для управления приложением.
  • Добавьте элементы управления и создайте макет, чтобы составить пользовательский интерфейс приложения.
  • Создание стилей для согласованного внешнего вида в пользовательском интерфейсе приложения.
  • Привязка пользовательского интерфейса к данным для заполнения пользовательского интерфейса данными и синхронизации данных и пользовательского интерфейса.

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

Совет

пример кода, который используется в этом учебнике, доступен как для Visual Basic, так и для C# в учебнике пример кода приложения WPF.

язык кода примера кода можно переключать между C# и Visual Basic с помощью селектора языка в верхней части этой страницы.

Предварительные требования

  • Visual Studio 2019 с установленной рабочей нагрузкой " разработка классических приложений .net ".

    Дополнительные сведения об установке новейшей версии Visual Studio см. в статье Установка Visual Studio.

Создание проекта приложения

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

  1. создайте новый проект приложения WPF в Visual Basic или Visual C# с именем ExpenseIt :

    1. откройте Visual Studio и выберите создать новый проект в меню приступая к работе .

      Откроется диалоговое окно Создание нового проекта .

    2. В раскрывающемся списке язык выберите либо C# , либо Visual Basic.

    3. выберите шаблон приложения WPF (платформа .NET Framework) и нажмите кнопку далее.

      Диалоговое окно создания проекта

      Откроется диалоговое окно Настройка нового проекта .

    4. Введите имя проекта ExpenseIt и нажмите кнопку создать.

      Диалоговое окно "Настройка нового проекта"

      Visual Studio создает проект и открывает конструктор для окна приложения по умолчанию с именем MainWindow. xaml.

  2. откройте Application. xaml (Visual Basic) или App. xaml (C#).

    Этот XAML-файл определяет приложение WPF и все ресурсы приложения. Этот файл также используется для указания пользовательского интерфейса, в данном случае MainWindow. XAML, который автоматически отображается при запуске приложения.

    КОД XAML должен выглядеть следующим образом в 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#:

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

    Этот XAML-файл является главным окном приложения и отображает содержимое, созданное на страницах. WindowКласс определяет свойства окна, такие как заголовок, размер или значок, а также обрабатывает события, такие как закрытие или скрытие.

  4. Измените Window элемент на NavigationWindow , как показано в следующем коде 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>
    

    Это приложение переходит к другому содержимому в зависимости от введенных пользователем данных. Именно поэтому необходимо изменить основное значение Window на NavigationWindow . NavigationWindow наследует все свойства Window . NavigationWindowЭлемент в файле XAML создает экземпляр NavigationWindow класса. Дополнительные сведения см. в разделе Общие сведения о навигации.

  5. Удалите Grid элементы из между NavigationWindow тегами.

  6. Измените следующие свойства в коде XAML для NavigationWindow элемента:

    • Присвойте Title свойству значение " ExpenseIt ".

    • Задайте Height для свойства значение 350 пикселей.

    • Задайте Width для свойства значение 500 пикселей.

    КОД XAML должен выглядеть следующим образом для 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#:

    <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. vb или MainWindow. XAML. CS.

    Этот файл является файлом кода программной части, который содержит код для работы с событиями, объявленными в файле MainWindow. XAML. Этот файл содержит разделяемый класс для окна, определенного в XAML-коде.

  8. Если вы используете C#, измените MainWindow класс на производный от NavigationWindow . (в Visual Basic это происходит автоматически при изменении окна в XAML.) Код C# теперь должен выглядеть следующим образом:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : NavigationWindow
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    

Добавление файлов в приложение

В этом разделе вы добавите в приложение две страницы и изображение.

  1. Добавьте в проект новую страницу и назовите ее ExpenseItHome.xaml :

    1. В Обозреватель решений щелкните правой кнопкой мыши ExpenseIt узел проекта и выберите команду добавить > страницу.

    2. В диалоговом окне Добавление нового элемента шаблон Page (WPF) уже выбран. Введите имя ExpenseItHome и нажмите кнопку Добавить.

    Эта страница является первой страницей, отображаемой при запуске приложения. Отобразится список людей для выбора, чтобы отобразить отчет о расходах для.

  2. Откройте ExpenseItHome.xaml.

  3. Присвойте свойству значение Title " ExpenseIt - Home ".

  4. Задайте для параметра значение DesignHeight 350 пикселей, а для параметра — значение DesignWidth 500 пикселей.

    Теперь XAML выглядит следующим образом для 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#:

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

  6. Добавьте Source свойство в NavigationWindow элемент и задайте для него значение " ExpenseItHome.xaml ".

    Этот набор устанавливается ExpenseItHome.xaml в качестве первой страницы, открытой при запуске приложения.

    Пример XAML в 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#:

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

    Совет

    Также можно задать свойство Source в категории Разное в окне Свойства .

    Свойство Source в окно свойств

  7. Добавьте еще одну новую страницу WPF в проект и назовите ее файл ExpenseReportPage. XAML::

    1. В Обозреватель решений щелкните правой кнопкой мыши ExpenseIt узел проекта и выберите команду добавить > страницу.

    2. В диалоговом окне Добавление нового элемента выберите шаблон Page (WPF) . Введите имя файл ExpenseReportPage и нажмите кнопку Добавить.

    На этой странице отображается отчет о расходах для пользователя, выбранного на ExpenseItHome странице.

  8. Откройте файл ExpenseReportPage. XAML.

  9. Присвойте свойству значение Title " ExpenseIt - View Expense ".

  10. Задайте для параметра значение DesignHeight 350 пикселей, а для параметра — значение DesignWidth 500 пикселей.

    Файл ExpenseReportPage. XAML теперь выглядит следующим образом в 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#:

    <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. vb и файл ExpenseReportPage. XAML. vb или ExpenseItHome. XAML. CS и файл ExpenseReportPage. XAML. CS.

    при создании нового файла подкачки Visual Studio автоматически создает файл кода программной части . Эти файлы кода программной части обрабатывают логику, реагирующую на действия пользователя.

    Код должен выглядеть следующим образом 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
    

    И, как и для файл 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. Добавьте в проект образ с именем watermark.png . вы можете создать собственный образ, скопировать файл из примера кода или получить его из репозитория microsoft/WPF-samples GitHub.

    1. Щелкните правой кнопкой мыши узел проекта и выберите команду Добавить > существующий элемент или нажмите клавиши SHIFT + ALT + A.

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

Создание и запуск приложения

  1. Чтобы выполнить сборку и запуск приложения, нажмите клавишу F5 или выберите начать отладку в меню Отладка .

    На следующем рисунке показано приложение с NavigationWindow кнопками:

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

  2. Закройте приложение, чтобы вернуться к Visual Studio.

Создание макета

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

  • Canvas — Определяет область, в которой можно явно располагать дочерние элементы с помощью координат, относящихся к области Canvas.
  • DockPanel — Определяет область, в которой можно расположить дочерние элементы по горизонтали или по вертикали относительно друг друга.
  • Grid — Определяет гибкую область сетки, состоящую из столбцов и строк.
  • StackPanel — Упорядочивает дочерние элементы в одну строку, которая может быть ориентирована горизонтально или вертикально.
  • VirtualizingStackPanel — Упорядочивает и виртуализировать содержимое в одной строке, ориентированной горизонтально или вертикально.
  • WrapPanel — Размещает дочерние элементы в последовательном положении слева направо, разбивая содержимое на следующую строку на границе содержащего поля. Последующее упорядочение происходит последовательно сверху вниз или справа налево в зависимости от значения свойства Orientation.

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

Совет

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

В этом разделе вы создадите таблицу с одним столбцом с тремя строками и 10-пиксельным полем, добавив определения столбцов и строк в Grid в ExpenseItHome.xaml .

  1. В ExpenseItHome.xaml Задайте для Margin свойства Grid элемента значение "10, 0, 10, 10", которое соответствует левому, верхнему, правому и нижнему полям:

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

    Совет

    Можно также задать значения полей в окне свойства в категории Макет :

    Значения полей в окно свойств

  2. Добавьте следующий код XAML между Grid тегами, чтобы создать определения строк и столбцов:

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

    Для Height двух строк устанавливается значение Auto , которое означает, что размер строк зависит от содержимого строк. По умолчанию Height используется Star размер, что означает, что высота строки является взвешенной пропорциями доступного пространства. Например, если две строки имеют Height "*", каждая из них имеет высоту, равную половине доступного пространства.

    GridТеперь должен содержаться следующий код XAML:

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

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

В этом разделе вы обновите пользовательский интерфейс домашней страницы, чтобы отобразить список людей, в которых вы выбрали одного пользователя для отображения отчета о расходах. Элементы управления — это объекты пользовательского интерфейса, позволяющие пользователям взаимодействовать с приложением. Более подробную информацию см. в разделе Элементы управления.

Чтобы создать этот пользовательский интерфейс, добавьте следующие элементы в ExpenseItHome.xaml :

  • A ListBox (для списка пользователей).
  • A Label (для заголовка списка).
  • A Button (щелкните, чтобы просмотреть отчет о расходах для пользователя, выбранного в списке).

Каждый элемент управления помещается в строку объекта Grid путем установки Grid.Row присоединенного свойства. Дополнительные сведения о вложенных свойствах см. в разделе Общие сведения о вложенных свойствах.

  1. В ExpenseItHome.xaml добавьте в тег следующий код XAML между Grid тегами:

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

    Совет

    Можно также создать элементы управления, перетащив их из окна панель элементов в окно конструктора, а затем задав их свойства в окне свойства .

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

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

Пример снимка экрана ExpenseIt, отображающий список имен

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

В этом разделе вы обновите пользовательский интерфейс домашней страницы, используя изображение и заголовок страницы.

  1. В ExpenseItHome.xaml добавьте еще один столбец в ColumnDefinitions с фиксированным Width 230 пикселов:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
  2. Добавьте еще одну строку в RowDefinitions , чтобы всего четыре строки:

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
  3. Переместите элементы управления во второй столбец, задав Grid.Column свойству значение 1 в каждом из трех элементов управления (граница, ListBox и кнопка).

  4. Переместите каждый элемент управления по строке, увеличив его Grid.Row значение на 1 для каждого из трех элементов управления (границы, ListBox и Button) и для элемента Border.

    Теперь XAML для трех элементов управления выглядит следующим образом:

      <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. Задайте для свойства Background значение watermark.png файл изображения, ДОбавив следующий код XAML в любое место между <Grid> </Grid> тегами и:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Перед Border элементом добавьте Label с содержимым "Просмотр отчета о расходах". Эта метка является заголовком страницы.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
    </Label>
    
  7. Создайте и запустите приложение.

На следующем рисунке показаны результаты только что добавленных элементов.

Образец снимка экрана ExpenseIt, показывающий новый фон и заголовок страницы

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

  1. В ExpenseItHome.xaml добавьте Click к Button элементу обработчик событий. Дополнительные сведения см. в разделе инструкции. Создание простого обработчика событий.

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

  3. Добавьте следующий код в класс, ExpenseItHome чтобы добавить обработчик событий нажатия кнопки. Обработчик событий открывает страницу файл ExpenseReportPage .

    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
    

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

Файл ExpenseReportPage. XAML отображает отчет о расходах для пользователя, выбранного на ExpenseItHome странице. В этом разделе вы создадите пользовательский интерфейс для файл ExpenseReportPage. Вы также добавите цвета фона и заливки в различные элементы пользовательского интерфейса.

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

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

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

    Этот пользовательский интерфейс аналогичен ExpenseItHome.xaml , за исключением того, что данные отчета отображаются в DataGrid .

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

  4. Нажмите кнопку Просмотр .

    Появится страница отчета по расходам. Также обратите внимание, что кнопка обратной навигации включена.

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

Пример снимка экрана ExpenseIt, показывающий пользовательский интерфейс, созданный для файл ExpenseReportPage.

Элементы управления стиля

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

  1. Откройте Application. XAML или app. XAML.

  2. Добавьте следующий код XAML между Application.Resources тегами:

    
    <!-- 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 добавляет следующие стили:

    • headerTextStyleдля форматирования заголовка страницы Label;

    • labelStyleдля форматирования элементов управления Label ;

    • columnHeaderStyleдля форматирования DataGridColumnHeader;

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

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

    • buttonStyle— Для форматирования Button ExpenseItHome.xaml .

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

  3. В ExpenseItHome.xaml замените все между Grid элементами следующим кодом 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>
    

    Свойства, определяющие внешний вид элементов управления, такие как VerticalAlignment и FontFamily , при применении стилей удаляются и заменяются. Например, headerTextStyle применяется к «Просмотр отчета о расходах» Label .

  4. Откройте файл ExpenseReportPage. XAML.

  5. Замените все элементы на Grid следующий код 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 .

  6. Создайте и запустите приложение. Внешний вид окна такой же, как и ранее.

    Пример снимка экрана ExpenseIt с тем же видом, что и в последнем разделе.

  7. Закройте приложение, чтобы вернуться к Visual Studio.

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

В этом разделе вы создадите XML-данные, привязанные к различным элементам управления.

  1. В ExpenseItHome.xaml после открывающего Grid элемента добавьте следующий код XAML, чтобы создать объект XmlDataProvider , содержащий данные для каждого пользователя:

    <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 ресурса. Обычно эти данные загружаются в виде файла, но для простоты данные добавляются встроенным образом.

  2. В <Grid.Resources> элементе добавьте следующий <xref:System.Windows.DataTemplate> элемент, определяющий способ отображения данных в ListBox , после <XmlDataProvider> элемента:

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

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

  3. Замените существующий ListBox код XAML следующим:

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

    Этот XAML привязывает ItemsSource свойство объекта ListBox к источнику данных и применяет шаблон данных в качестве ItemTemplate .

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

Далее предстоит добавить код для получения имени, выбранного на ExpenseItHome странице, и передачи его конструктору файл ExpenseReportPage. Файл ExpenseReportPage устанавливает в качестве контекста данных переданный элемент, который является элементом управления, определенным в привязке файл ExpenseReportPage. XAML к.

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

  2. Добавьте конструктор, принимающий объект, чтобы можно было передавать данные отчета о затратах выбранного человека.

    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 .

  4. Измените Click обработчик событий, чтобы вызвать новый конструктор, передающий данные отчета о затратах выбранного человека.

    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
    

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

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

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

  2. Привяжите содержимое элементов "Name" и "Department" Label к соответствующему свойству источника данных. Дополнительные сведения о привязке данных см. в разделе Общие сведения о привязке данных.

    <!-- 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 элемента добавьте следующие шаблоны данных, определяющие способ отображения данных отчета о расходах:

    <!--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 элементы DataGridTemplateColumn DataGrid элементом в элементе и примените к ним шаблоны.

    <!-- 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. Создайте и запустите приложение.

  6. Выберите пользователя и нажмите кнопку Просмотр .

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

На обеих страницах приложения отображается список имен и отчет о расходах.

Примечание

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

Следующие шаги

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

Более подробную информацию о создании приложений см. в следующих разделах:

См. также раздел