Перейти к основному содержимому

Практикум WPF — введение в WPF и XAML

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Инженеру

Практикум, шаг 1 из 6. Фиксируем базовую модель WPF перед MVVM и клиент-серверной частью. Если нужны короткие примеры "скопировать и запустить" (окно, кнопка, TextBox) — сначала C# WinForms и WPF — простые окна. Полный локальный практикум с нуля — Первая форма WPF — XAML, стили и шаблоны; обзор платформы Windows — Разработка приложений для Windows (Microsoft Learn).

Зачем WPF в 2026 году​

WPF (Windows Presentation Foundation) — зрелый UI-фреймворк для настольных приложений Windows на .NET. Он остаётся стандартом там, где нужны:

  • сложная вёрстка и кастомный дизайн без "веб в окне";
  • плотная интеграция с ОС (файлы, принтеры, Win32);
  • привязка данных и MVVM "из коробки";
  • стабильный корпоративный стек на C#.

WPF рисует через DirectX (вектор, масштабирование на HiDPI). Альтернативы на Windows — WinForms (проще, но слабее по UI) и WinUI 3 (современный Fluent, другой API). Для учебного TaskDesk и типичного LOB-клиента WPF — практичный выбор — много материалов, Prism, богатые контролы.

Два языка одного приложения​

СлойЯзыкФайлыОтветственность
РазметкаXAML*.xamlДерево элементов, стили, привязки
ЛогикаC#*.xaml.cs, ViewModel, сервисыПоведение, данные, сеть

XAML — декларативное описание объектного дерева UI. Компилятор превращает разметку в C#-инициализацию. Подробный синтаксис — в справочнике XAML.

Минимальное окно:

<Window x:Class="TaskDesk.Client.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TaskDesk" Height="480" Width="720">
  <Grid Margin="16">
    <TextBlock Text="Список задач" FontSize="20"/>
  </Grid>
</Window>

Code-behind (MainWindow.xaml.cs) в MVVM-проекте обычно содержит только InitializeComponent().

Дерево элементов и layout​

WPF строит UI как дерево зависимостей (DependencyObject). Корень — Window или UserControl; внутри — панели компоновки:

ПанельКогда использовать
GridТабличная сетка, формы с подписями и полями
StackPanelВертикальный или горизонтальный список блоков
DockPanelПанель инструментов, статус-бар
ScrollViewerПрокрутка длинного содержимого

Для TaskDesk типичная схема:

Window
└── Grid (2 строки)
    ├── Row 0: панель фильтров (StackPanel)
    └── Row 1: ListBox с DataTemplate задач

Logical tree — структура XAML; visual tree — реальные визуальные примитивы (важно для стилей и ControlTemplate). В отладке помогает Live Visual Tree в Visual Studio.

Привязка данных — основа MVVM​

Binding связывает свойство контрола со свойством ViewModel:

<TextBox Text="{Binding NewTitle, UpdateSourceTrigger=PropertyChanged}"/>
<ListBox ItemsSource="{Binding Tasks}" SelectedItem="{Binding SelectedTask}"/>
<Button Content="Добавить" Command="{Binding AddTaskCommand}"/>
РежимСмысл
OneWayViewModel → UI (по умолчанию для многих свойств)
TwoWayДвусторонняя синхронизация (TextBox.Text)
OneTimeОднократное чтение при загрузке

ViewModel должна уведомлять UI об изменениях через INotifyPropertyChanged. Команды — через ICommand (кнопки без обработчиков Click в code-behind).

DataContext — "текущий объект для привязок". Его задают на Window или через DI в Prism (шаг 4).

Ресурсы, стили и шаблоны​

МеханизмНазначение
ResourceDictionaryОбщие кисти, стили, конвертеры в App.xaml
StyleНабор Setter для типа (TextBox, Button)
DataTemplateКак отображать один элемент данных в списке
ControlTemplateКак выглядит сам контрол (форма кнопки, скругления)

Централизация в App.xaml упрощает смену темы и согласованность TaskDesk с корпоративным брендом.

Жизненный цикл WPF-приложения​

  1. App.xaml — точка входа, глобальные ресурсы.
  2. Создаётся главное окно (или Prism bootstrapper).
  3. UI-поток (Dispatcher) обрабатывает очередь сообщений Windows.
  4. Долгие операции (HTTP к API) — в фоне через async/await; обновление коллекций в UI — на dispatcher-потоке.

Блокировка UI-потока синхронным HttpClient.GetStringAsync().Result — частая ошибка; в практикуме используем async команды (шаг 2).

Создание проекта для маршрута​

dotnet new wpf -n TaskDesk.Client -o TaskDesk/src/TaskDesk.Client
cd TaskDesk/src/TaskDesk.Client
dotnet run

В .csproj должно быть <UseWPF>true</UseWPF>. Дальше по Первая форма WPF — XAML, стили и шаблоны можно собрать локальный список; в шаге 2 вынесем логику в ViewModel, в шаге 4 подключим Prism.

Словарь терминов​

ТерминПростыми словами
DPIПлотность пикселей; WPF использует device-independent units (1/96 дюйма)
DependencyPropertyСвойство с поддержкой привязок, анимаций, стилей
Markup Extension&#123;Binding&#125;, &#123;StaticResource&#125; — расширения XAML
Code-behind*.xaml.cs; в MVVM минимален
DispatcherМаршалинг вызовов в UI-поток

Чек-лист шага 1​

  • Создан проект WPF, окно открывается на Windows.
  • Понятно различие XAML (разметка) и C# (логика).
  • Есть Grid или StackPanel с хотя бы одной привязкой &#123;Binding&#125;.
  • Прочитан Первая форма WPF — XAML, стили и шаблоны или повторены стили и DataTemplate.

Дальше: Основы MVVM.

Содержание