🎯 Для чего нужна эта лекция?
Ты научишься создавать программы с кнопками, полями и списками — как настоящий разработчик
📌 Представь: ты хочешь сделать приложение «Заметки» или «Список дел». Нужно, чтобы кнопки работали, текст менялся, а программа не падала от любого чиха.
🎓 После лекции ты будешь знать:
• Что такое WPF и чем он лучше старого Windows Forms
• Как красиво расположить кнопки на экране (контейнеры)
• Зачем нужны TextBox, Button, ListBox и другие элементы
• Как сделать так, чтобы программа не ломалась при изменениях (MVVM)
💡 Самый важный секрет: в WPF экран обновляется сам, когда меняются данные. Не нужно писать textBox1.Text = "привет"; в 10 местах.
🖼️ WPF — это «конструктор окон»
С помощью WPF ты рисуешь окна, как в Photoshop, только кодом
WPF (Windows Presentation Foundation) — технология для создания оконных программ в Windows. В ней можно делать красивые кнопки, анимации, графику.
<!-- Это XAML — язык разметки, как HTML для сайтов -->
<Window>
<Button Content="Нажми меня" />
</Window>
📖 Аналогия: если ты верстал сайты на HTML — здесь почти то же самое, только вместо браузера — обычное окно Windows.
🚀 Шаг 1: Создаём проект в Visual Studio
Делай точно по шагам — не пропускай
1️⃣ Открой Visual Studio
2️⃣ Нажми «Создать новый проект»
3️⃣ В поиске напиши WPF
4️⃣ Выбери «WPF Application» (или «WPF приложение»)
5️⃣ Назови проект, например, «МояПерваяПрограмма»
6️⃣ Нажми «Создать»
✅ Готово! Visual Studio создала два главных файла:
- MainWindow.xaml ← здесь рисуем кнопки и поля
- MainWindow.xaml.cs ← здесь почти ничего не пишем (MVVM рулит)
⚠️ Не бойся ошибок! Если что-то пошло не так — закрой проект и создай заново. Это нормально для новичка.
📦 Контейнеры — как полки в шкафу
Без контейнера кнопки налезут друг на друга
🧩 Grid (сетка) — самый умный. Делит окно на строки и столбцы. В каждую ячейку кладёшь одну кнопку или поле.
🧩 StackPanel (стопка) — кладёт элементы друг за другом (вертикально или горизонтально).
🧩 WrapPanel (обёртка) — если не влезают в строку, переносит на следующую (как слова в книге).
<StackPanel>
<Button Content="Кнопка 1"/>
<Button Content="Кнопка 2"/>
<Button Content="Кнопка 3"/>
</StackPanel>
🔨 Попробуй сам: вставь этот код внутрь тега <Grid> в MainWindow.xaml, запусти — увидишь три кнопки столбиком.
✍️ TextBox — для ввода, TextBlock — для показа текста
Как в любом приложении: поле, куда печатаешь, и надпись, где читаешь
TextBox — пользователь может писать внутри (как поле логина).
TextBlock — только читать (как надпись «Привет, пользователь!»).
<TextBox Text="Введи своё имя" Width="200"/>
<TextBlock Text="А это просто текст" FontWeight="Bold"/>
📌 Свойство Text — самое главное. Там хранится то, что видит пользователь.
🔘 Основные элементы управления за 5 минут
То, без чего не обходится ни одна программа
• Button — кнопка. Нажал — что-то случилось.
• CheckBox — галочка. Например, «Согласен на рассылку».
• RadioButton — кружочек. Можно выбрать только один вариант из группы.
• ComboBox — выпадающий список (занимает мало места).
• ListBox — список, видно сразу несколько пунктов.
• Slider — ползунок (громкость, яркость).
• ProgressBar — полоска загрузки.
🎮 Живой пример: в настройках телефона ты видишь CheckBox («Включить Wi-Fi») и Slider («Громкость»). Это всё те же элементы.
❓ Как сделать, чтобы при нажатии на кнопку менялся текст?
В Windows Forms было просто: дважды кликнуть и написать код. А в WPF?
В WPF так тоже можно, но правильный способ — MVVM. Он нужен, чтобы большие проекты не превращались в кашу из кода.
// Плохой способ (неправильный):
private void Button_Click(object sender, RoutedEventArgs e)
{
myTextBlock.Text = "Привет!";
}
⚠️ Почему плохо? Если программа большая (100 окон), ты запутаешься, где какой код. MVVM помогает разложить всё по полочкам.
🧩 MVVM — это «разделение обязанностей»
Представь, что ты режиссёр театра
🎭 View (сцена) — это твоё окно. Кнопки и поля красиво стоят, но сами ничего не умеют.
🎭 ViewModel (сценарист) — знает, какие данные показывать (например, имя пользователя) и что делать при нажатии.
🎭 Model (актёры) — настоящие данные (список задач, текст заметки).
✨ Главная магия: View и ViewModel связаны «верёвочкой» — Binding (привязка). Меняются данные в ViewModel — экран обновляется сам.
🔗 Binding — это как пульт от телевизора
Ты нажимаешь кнопку на пульте — телевизор меняет канал. Здесь так же: меняешь свойство — экран обновляется
<!-- В XAML пишем привязку к свойству UserName -->
<TextBox Text="{Binding UserName}" />
<TextBlock Text="{Binding UserName}" />
📢 Что здесь написано?
• {Binding UserName} — «возьми значение из свойства UserName и покажи в этом элементе».
• Если свойство UserName изменится в коде — TextBox и TextBlock обновятся автоматически.
🔧 Важно: свойство UserName должно «уметь кричать» об изменениях. Для этого нужен INotifyPropertyChanged.
📢 OnPropertyChanged — это «крик об изменении»
Как твой друг кричит «Эй, смотри сюда!» — и ты оборачиваешься
private string _name;
public string Name
{
get => _name;
set
{
_name = value;
OnPropertyChanged(); // 📢 КРИК: "Экран, я изменился! Обновись!"
}
}
🎯 Запомни навсегда: любое свойство, которое ты хочешь привязать к экрану, должно внутри себя (в сеттере) вызывать OnPropertyChanged(). Без этого крика экран не узнает об изменениях.
💡 Проверь себя: если ты поменял значение в коде, а на экране осталось старое — значит, ты забыл вызвать OnPropertyChanged.
📁 Где создавать файлы и папки (показываю на пальцах)
Без этого ничего не заработает — читай внимательно
1. Создай папку ViewModels — в обозревателе решений (справа) правой кнопкой по проекту → Add → New Folder → название ViewModels.
2. В папке ViewModels создай два файла:
• ViewModelBase.cs — здесь будет базовый класс с OnPropertyChanged.
• MainViewModel.cs — здесь твои свойства и команды.
3. Создай папку Commands — в ней файл RelayCommand.cs.
4. Файл MainWindow.xaml уже есть (рисуем кнопки).
5. В MainWindow.xaml.cs допиши всего одну строчку (DataContext).
📌 Важно: названия папок и файлов должны быть ТОЧНО такими, как здесь. Иначе код не скомпилируется.
📋 Готовый код — копируй в свои файлы
Каждый кусочек подписан — какой файл и куда вставить
📂 Файл: ViewModels/ViewModelBase.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace ТвоеНазваниеПроекта.ViewModels
{
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string prop = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
}
}
}
📂 Файл: Commands/RelayCommand.cs
using System;
using System.Windows.Input;
namespace ТвоеНазваниеПроекта.Commands
{
public class RelayCommand : ICommand
{
private readonly Action _execute;
public RelayCommand(Action execute) { _execute = execute; }
public bool CanExecute(object p) => true;
public void Execute(object p) => _execute();
public event EventHandler CanExecuteChanged;
}
}
📂 Файл: ViewModels/MainViewModel.cs
using ТвоеНазваниеПроекта.Commands;
using System.Windows.Input;
namespace ТвоеНазваниеПроекта.ViewModels
{
public class MainViewModel : ViewModelBase
{
private string _userName = "Гость";
public string UserName
{
get => _userName;
set { _userName = value; OnPropertyChanged(); }
}
public ICommand SayHelloCommand { get; }
public MainViewModel()
{
SayHelloCommand = new RelayCommand(() =>
{
UserName = "Привет, мир!";
});
}
}
}
🖼️ Код окна — последний шаг
Осталось вставить XAML и одну строчку в code-behind
📂 Файл: MainWindow.xaml (весь содержимое замени)
<Window x:Class="ТвоеНазваниеПроекта.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Моё первое MVVM" Height="200" Width="400">
<StackPanel Margin="20">
<TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding UserName}" FontSize="16" FontWeight="Bold" Margin="0,10"/>
<Button Command="{Binding SayHelloCommand}" Content="Сказать привет" Padding="10"/>
</StackPanel>
</Window>
📂 Файл: MainWindow.xaml.cs (добавить одну строчку в конструктор)
using ТвоеНазваниеПроекта.ViewModels;
using System.Windows;
namespace ТвоеНазваниеПроекта
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel(); // ← ЭТО САМАЯ ГЛАВНАЯ СТРОЧКА
}
}
}
🎉 Готово! Нажми F5 — увидишь работающую программу. При вводе текста он дублируется, по кнопке становится «Привет, мир!».
🧪 Практические задания (сделай сам)
Чтобы закрепить — попробуй изменить программу
Задание 1 (лёгкое): Добавь вторую кнопку «Очистить», которая устанавливает UserName = "" (пустую строку).
Задание 2 (среднее): Добавь свойство Age (int) и Slider, привязанный к нему. Рядом TextBlock, показывающий возраст.
Задание 3 (продвинутое): Добавь CheckBox «Скрыть текст». Когда он включён, TextBlock должен исчезать (подсказка: конвертер bool → Visibility).
💪 Совет: не бойся ломать код. Экспериментируй — так ты быстрее поймёшь, как всё работает.
🏁 Что ты теперь умеешь
Ты прошёл путь от нуля до работающего MVVM-приложения
✅ Создавать проект WPF в Visual Studio
✅ Использовать контейнеры (StackPanel, Grid) для расположения кнопок
✅ Добавлять TextBox, Button, TextBlock и другие элементы
✅ Понимать, зачем нужен Binding и как он связывает экран и данные
✅ Знать, что OnPropertyChanged — это «крик обновления»
✅ Писать код во ViewModel, а не в code-behind (чистая архитектура)
🎓 Главный итог: теперь ты понимаешь, как работают настоящие программы на WPF. Дальше — только практика и новые проекты!