🎯 Полное руководство по компонентам WPF
Всё, что есть в панели инструментов Visual Studio — с примерами, свойствами и советами
Зачем это руководство?
• Ты узнаешь о КАЖДОМ компоненте из Toolbox
• Поймёшь, какие свойства самые важные
• Увидишь готовые примеры кода (XAML + C#)
• Поймёшь, где какой компонент лучше использовать
• Получишь советы по современным заменам
💡 Как пользоваться: листай слайды стрелками или клавишами ← →. Копируй код в свой проект и запускай.
🔘 Button — кнопка
📌 Описание
Самая популярная кнопка. Выполняет действие при клике. Можно вложить любой контент (текст, картинку, даже другую панель).
⚙️ Где применяется
Отправка форм, сохранение, удаление, навигация, запуск операций — везде, где нужно действие пользователя.
📋 Основные свойства
Content — текст или любой UI-элемент внутри кнопки.
IsEnabled — true (активна) / false (серая, не реагирует).
ClickMode — когда срабатывает: Press (при нажатии), Release (при отпускании), Hover (при наведении).
⚡ События
Click — основное событие, возникает при нажатии.
MouseEnter / MouseLeave — курсор вошёл/покинул кнопку (для эффектов).
<StackPanel Margin="20">
<Button x:Name="MyButton" Content="Нажми меня" Click="MyButton_Click" Height="40" Width="150"/>
<TextBlock x:Name="ResultText" Margin="0,20,0,0"/>
</StackPanel>
private void MyButton_Click(object sender, RoutedEventArgs e)
{
ResultText.Text = "Кнопка нажата!";
MyButton.Content = "Уже нажата";
MyButton.IsEnabled = false; // отключить после нажатия
}
💡 В MVVM вместо Click используй Command — это чище и удобнее для тестирования.
🔁 RepeatButton — кнопка с автоповтором
Отличается от обычной Button тем, что генерирует событие Click многократно, пока кнопка зажата.
⚙️ Где применяется
Кнопки «+»/«-» для счётчиков, прокрутка, регулировка громкости, любые инкрементеры.
📋 Свойства
Delay — задержка в мс перед первым повтором (например, 300).
Interval — интервал между повторами в мс (например, 100).
⚡ События
Click — возникает при каждом срабатывании.
<StackPanel Margin="20" Orientation="Horizontal">
<RepeatButton x:Name="MinusBtn" Content="-" Width="50" Height="50"
Delay="300" Interval="100" Click="CounterBtn_Click"/>
<TextBlock x:Name="CounterText" Text="0" FontSize="24" Width="60" TextAlignment="Center"/>
<RepeatButton x:Name="PlusBtn" Content="+" Width="50" Height="50"
Delay="300" Interval="100" Click="CounterBtn_Click"/>
</StackPanel>
private int counter = 0;
private void CounterBtn_Click(object sender, RoutedEventArgs e)
{
if (sender == PlusBtn) counter++;
if (sender == MinusBtn) counter--;
CounterText.Text = counter.ToString();
}
📝 TextBox — поле ввода текста
Позволяет пользователю вводить и редактировать текст. Может быть однострочным или многострочным.
⚙️ Где применяется
Поля логина, поиска, сообщений, комментариев, адреса — везде, где нужен ввод текста.
📋 Свойства
Text — текст в поле (основное).
MaxLength — максимальное количество символов (0 — без ограничений).
TextWrapping — перенос слов: NoWrap, Wrap.
AcceptsReturn — разрешает ввод многострочного текста (Enter создаёт новую строку).
IsReadOnly — true = только чтение (редактировать нельзя).
⚡ События
TextChanged — возникает при любом изменении текста.
GotFocus / LostFocus — получение/потеря фокуса.
<StackPanel Margin="20">
<TextBox x:Name="InputBox" TextChanged="InputBox_TextChanged" MaxLength="50" TextWrapping="Wrap"/>
<TextBlock x:Name="LengthText" Margin="0,10,0,0"/>
<TextBlock x:Name="UpperText" FontWeight="Bold"/>
</StackPanel>
private void InputBox_TextChanged(object sender, TextChangedEventArgs e)
{
LengthText.Text = $"Длина: {InputBox.Text.Length} символов";
UpperText.Text = InputBox.Text.ToUpper();
}
🔒 PasswordBox — поле для пароля
Специализированное поле, где символы скрываются маской. Не поддерживает TwoWay-привязку по соображениям безопасности.
⚙️ Где применяется
Пароли, PIN-коды, любые конфиденциальные данные.
📋 Свойства
PasswordChar — символ-маска (например '*', '●').
MaxLength — максимальная длина пароля.
⚡ События
PasswordChanged — при изменении содержимого.
<StackPanel Margin="20">
<PasswordBox x:Name="PwdBox" PasswordChar="●" MaxLength="20" PasswordChanged="PwdBox_PasswordChanged"/>
<TextBlock x:Name="StatusText" Margin="0,10,0,0"/>
<Button x:Name="LoginBtn" Content="Войти" IsEnabled="False" Click="LoginBtn_Click"/>
</StackPanel>
private void PwdBox_PasswordChanged(object sender, RoutedEventArgs e)
{
bool isValid = PwdBox.Password.Length >= 6;
LoginBtn.IsEnabled = isValid;
StatusText.Text = isValid ? "✅ Пароль подходит" : "❌ Минимум 6 символов";
}
private void LoginBtn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Пароль принят (учебный пример)");
}
✅ CheckBox — флажок
Позволяет выбрать опцию: включено/выключено. Может иметь третье (неопределённое) состояние.
⚙️ Где применяется
Настройки, согласия («Запомнить меня»), фильтры, активация/деактивация функций.
📋 Свойства
IsChecked — true (включён), false (выключен), null (неопределён).
IsThreeState — разрешает третье состояние при true.
Content — текст или элемент рядом с флажком.
⚡ События
Checked, Unchecked, Indeterminate — при переходе в соответствующее состояние.
<StackPanel Margin="20">
<CheckBox x:Name="AgreeCheck" Content="Я согласен на обработку данных"
Checked="AgreeCheck_Changed" Unchecked="AgreeCheck_Changed"/>
<Button x:Name="SubmitBtn" Content="Отправить" IsEnabled="False" Click="SubmitBtn_Click" Margin="0,10,0,0"/>
</StackPanel>
private void AgreeCheck_Changed(object sender, RoutedEventArgs e)
{
SubmitBtn.IsEnabled = AgreeCheck.IsChecked == true;
}
private void SubmitBtn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Форма отправлена!");
}
🔘 RadioButton — переключатель
Позволяет выбрать ровно один вариант из группы. Объединяются через GroupName.
⚙️ Где применяется
Выбор пола, способа оплаты, размера (S/M/L), языка интерфейса, темы оформления.
📋 Свойства
GroupName — имя группы. У всех RadioButton с одинаковым GroupName можно выбрать только один.
IsChecked — выбран ли этот переключатель.
⚡ События
Checked — возникает при выборе.
<StackPanel Margin="20">
<RadioButton GroupName="Color" Content="Красный" Checked="Color_Checked"/>
<RadioButton GroupName="Color" Content="Зелёный" Checked="Color_Checked"/>
<RadioButton GroupName="Color" Content="Синий" Checked="Color_Checked"/>
<Border x:Name="ColorPreview" Height="50" Margin="0,10,0,0" BorderBrush="Black" BorderThickness="1"/>
</StackPanel>
private void Color_Checked(object sender, RoutedEventArgs e)
{
var rb = sender as RadioButton;
if (rb.Content.ToString() == "Красный") ColorPreview.Background = Brushes.Red;
if (rb.Content.ToString() == "Зелёный") ColorPreview.Background = Brushes.Green;
if (rb.Content.ToString() == "Синий") ColorPreview.Background = Brushes.Blue;
}
📋 ComboBox — выпадающий список
Экономит место: показывает один элемент, а остальные скрыты под выпадающим списком.
⚙️ Где применяется
Выбор города, категории, типа товара, сортировки — везде, где много вариантов и мало места.
📋 Свойства
ItemsSource — источник данных (коллекция).
SelectedItem — выбранный объект.
SelectedIndex — индекс выбранного элемента.
IsEditable — разрешает ввод текста вручную.
⚡ События
SelectionChanged — при изменении выбора.
<StackPanel Margin="20">
<ComboBox x:Name="CityCombo" SelectionChanged="CityCombo_SelectionChanged" Width="150"/>
<TextBlock x:Name="SelectedCityText" Margin="0,10,0,0"/>
</StackPanel>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
CityCombo.Items.Add("Москва");
CityCombo.Items.Add("Санкт-Петербург");
CityCombo.Items.Add("Казань");
CityCombo.SelectedIndex = 0;
}
private void CityCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SelectedCityText.Text = $"Выбран город: {CityCombo.SelectedItem}";
}
📃 ListBox — список (видно несколько элементов)
Показывает несколько элементов одновременно. Поддерживает выбор одного или нескольких пунктов.
⚙️ Где применяется
Список файлов, товаров, сообщений, чатов — где нужно видеть несколько вариантов сразу.
📋 Свойства
SelectionMode — Single (один), Extended (множественный с Ctrl/Shift), Multiple (без модификаторов).
SelectedItem — первый выбранный элемент.
SelectedItems — коллекция выбранных (для множественного режима).
⚡ События
SelectionChanged — при изменении выбора.
<StackPanel Margin="20">
<ListBox x:Name="ProductsList" Height="150" SelectionMode="Single" SelectionChanged="ProductsList_SelectionChanged"/>
<TextBlock x:Name="SelectedProductText" Margin="0,10,0,0"/>
<Button x:Name="BuyBtn" Content="Купить" IsEnabled="False" Click="BuyBtn_Click"/>
</StackPanel>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ProductsList.Items.Add("Ноутбук — 50 000 ₽");
ProductsList.Items.Add("Мышь — 1 500 ₽");
ProductsList.Items.Add("Клавиатура — 3 000 ₽");
}
private void ProductsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
BuyBtn.IsEnabled = ProductsList.SelectedItem != null;
SelectedProductText.Text = ProductsList.SelectedItem?.ToString();
}
private void BuyBtn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show($"Вы купили: {SelectedProductText.Text}");
}
📊 DataGrid — таблица
Самый мощный компонент для отображения и редактирования табличных данных. Поддерживает сортировку, изменение колонок, редактирование ячеек.
⚙️ Где применяется
Списки клиентов, заказов, товаров, отчёты, Excel-подобные интерфейсы.
📋 Свойства
AutoGenerateColumns — автоматическое создание колонок по свойствам объекта.
CanUserAddRows — разрешает пользователю добавлять новые строки.
IsReadOnly — запрещает редактирование.
SelectedItem — выбранная строка.
⚡ События
SelectionChanged — при изменении выбора.
<DataGrid x:Name="UsersGrid" AutoGenerateColumns="True" SelectionChanged="UsersGrid_SelectionChanged" Margin="10"/>
public class User { public string Name { get; set; } public int Age { get; set; } }
private void Window_Loaded(object sender, RoutedEventArgs e)
{
UsersGrid.ItemsSource = new List<User>
{
new User{ Name="Анна", Age=25 },
new User{ Name="Иван", Age=30 }
};
}
📑 ListView + GridView — таблица с колонками (легковесная альтернатива DataGrid)
ListView — более простой компонент, но в паре с GridView даёт таблицу с колонками. Меньше функций, чем DataGrid, но проще для кастомизации.
⚙️ Где применяется
Файловые менеджеры, списки с колонками, где не нужно редактирование ячеек.
<ListView x:Name="PersonsView">
<ListView.View>
<GridView>
<GridViewColumn Header="Имя" Width="120" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Возраст" Width="80" DisplayMemberBinding="{Binding Age}"/>
</GridView>
</ListView.View>
</ListView>
🌳 TreeView — дерево (иерархические данные)
Показывает вложенные данные. Каждый элемент может содержать дочерние элементы.
⚙️ Где применяется
Проводник файлов, структура организации, категории товаров, навигация по разделам.
📋 Свойства
ItemsSource — коллекция корневых элементов.
SelectedItem — выбранный элемент.
⚡ События
SelectedItemChanged — при изменении выбора.
<TreeView x:Name="FolderTree">
<TreeViewItem Header="Документы">
<TreeViewItem Header="Отчёт.docx"/>
<TreeViewItem Header="Смета.xlsx"/>
</TreeViewItem>
<TreeViewItem Header="Фото">
<TreeViewItem Header="Отпуск.jpg"/>
</TreeViewItem>
</TreeView>
📑 TabControl — вкладки
Группирует контент по вкладкам. Экономит место и улучшает навигацию.
⚙️ Где применяется
Настройки программы, многостраничные формы, редакторы с разными режимами.
📋 Свойства
TabStripPlacement — расположение вкладок (Top, Bottom, Left, Right).
SelectedIndex / SelectedItem — текущая вкладка.
⚡ События
SelectionChanged — при переключении вкладки.
<TabControl>
<TabItem Header="Основное">
<TextBox Text="Настройки профиля"/>
</TabItem>
<TabItem Header="Безопасность">
<CheckBox Content="Двухфакторная аутентификация"/>
</TabItem>
<TabItem Header="О программе">
<TextBlock Text="Версия 1.0"/>
</TabItem>
</TabControl>
🎚️ Slider — ползунок
Позволяет выбрать числовое значение из диапазона.
⚙️ Где применяется
Громкость, яркость, размер шрифта, фильтры цены, выбор процента.
📋 Свойства
Minimum, Maximum — диапазон (по умолчанию 0 и 10).
Value — текущее значение.
Orientation — Horizontal или Vertical.
TickFrequency — частота рисования делений.
⚡ События
ValueChanged — при изменении значения.
<StackPanel Margin="20">
<Slider x:Name="VolumeSlider" Minimum="0" Maximum="100" Value="50" ValueChanged="VolumeSlider_ValueChanged"/>
<TextBlock x:Name="VolumeText"/>
<ProgressBar x:Name="VolumeProgress" Minimum="0" Maximum="100" Value="50" Height="20" Margin="0,10,0,0"/>
</StackPanel>
private void VolumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
int val = (int)e.NewValue;
VolumeText.Text = $"Громкость: {val}%";
VolumeProgress.Value = val;
}
⏳ ProgressBar — индикатор прогресса
Показывает ход выполнения задачи (только отображение, не для ввода).
⚙️ Где применяется
Загрузка файлов, установка программ, длительные вычисления, копирование данных.
📋 Свойства
Minimum, Maximum — диапазон (обычно 0-100).
Value — текущий прогресс.
IsIndeterminate — режим бегущей полоски (когда неизвестен процент).
<StackPanel Margin="20">
<ProgressBar x:Name="LoadProgress" Minimum="0" Maximum="100" Value="0" Height="25"/>
<Button x:Name="StartBtn" Content="Начать загрузку" Click="StartBtn_Click" Margin="0,10"/>
</StackPanel>
private async void StartBtn_Click(object sender, RoutedEventArgs e)
{
StartBtn.IsEnabled = false;
for (int i = 0; i <= 100; i++)
{
LoadProgress.Value = i;
await Task.Delay(30);
}
MessageBox.Show("Загрузка завершена!");
StartBtn.IsEnabled = true;
}
📅 DatePicker — выбор даты
Компактный выбор даты с выпадающим календарём.
⚙️ Где применяется
Дата рождения, дедлайн, дата заказа, бронирование.
📋 Свойства
SelectedDate — выбранная дата (тип DateTime?).
DisplayDateStart, DisplayDateEnd — ограничение диапазона.
⚡ События
SelectedDateChanged — при изменении даты.
<StackPanel Margin="20">
<DatePicker x:Name="BirthPicker" SelectedDateChanged="BirthPicker_SelectedDateChanged"/>
<TextBlock x:Name="AgeText" Margin="0,10,0,0"/>
</StackPanel>
private void BirthPicker_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
if (BirthPicker.SelectedDate.HasValue)
{
int age = DateTime.Now.Year - BirthPicker.SelectedDate.Value.Year;
AgeText.Text = $"Возраст: {age} лет";
}
}
🗓️ Calendar — календарь
Полноценный календарь для выбора даты, месяца или диапазона.
⚙️ Где применяется
Бронирование отелей, планировщики задач, выбор даты в крупных формах.
📋 Свойства
SelectionMode — SingleDate, SingleRange, MultipleRange.
DisplayDate — отображаемая дата.
⚡ События
SelectedDatesChanged — при изменении выбора.
<Calendar x:Name="VacationCalendar" SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged"/>
🖼️ Image — отображение изображений
Показывает картинки из файлов, ресурсов или интернета.
⚙️ Где применяется
Аватары пользователей, иконки, баннеры, превью товаров.
📋 Свойства
Source — путь к изображению (URL, локальный файл, ресурс).
Stretch — режим масштабирования (Fill, Uniform, UniformToFill).
⚡ События
ImageOpened — успешная загрузка.
ImageFailed — ошибка загрузки.
<Image x:Name="PreviewImage" Source="https://gadget59.ru/logo.png" Stretch="Uniform" Width="200"/>
🎬 MediaElement — видео / аудио
Позволяет воспроизводить видео и аудио (MP4, WMV, MP3, WAV).
⚙️ Где применяется
Плееры, обучающие ролики, фоновое аудио, вставка рекламных видео.
📋 Свойства
Source — путь к медиафайлу.
LoadedBehavior — Play, Pause, Manual.
Volume — громкость (0-1).
⚡ События
MediaOpened, MediaFailed, MediaEnded
<MediaElement x:Name="Player" Source="video.mp4" LoadedBehavior="Manual" Width="400"/>
<StackPanel Orientation="Horizontal">
<Button Content="▶️ Play" Click="Play_Click"/>
<Button Content="⏸️ Pause" Click="Pause_Click"/>
<Button Content="⏹️ Stop" Click="Stop_Click"/>
</StackPanel>
private void Play_Click(object sender, RoutedEventArgs e) => Player.Play();
private void Pause_Click(object sender, RoutedEventArgs e) => Player.Pause();
private void Stop_Click(object sender, RoutedEventArgs e) => Player.Stop();
🌐 WebBrowser — встроенный браузер
Показывает веб-страницы внутри окна. Использует старый движок Internet Explorer (EdgeHTML в старых версиях).
⚙️ Где применяется
Старые проекты, где нужен простой браузер. В новых проектах лучше использовать WebView2.
⚠️ Современная замена: WebView2 (на основе Edge Chromium). Устанавливается через NuGet: Microsoft.Web.WebView2.
<WebBrowser x:Name="Browser" Source="https://gadget59.ru"/>
📄 RichTextBox — форматированный текст
Позволяет редактировать текст с разными шрифтами, цветами, вставлять картинки.
⚙️ Где применяется
Текстовые редакторы, почтовые клиенты, форматированные заметки.
📋 Свойства
Document — объект FlowDocument (содержимое).
⚡ События
TextChanged — при изменении содержимого.
<RichTextBox x:Name="RichEditor" Height="200">
<FlowDocument>
<Paragraph>Обычный текст <Bold>жирный</Bold> и <Italic>курсив</Italic>.</Paragraph>
</FlowDocument>
</RichTextBox>
<Button Content="Получить текст" Click="GetText_Click"/>
private void GetText_Click(object sender, RoutedEventArgs e)
{
string text = new TextRange(RichEditor.Document.ContentStart, RichEditor.Document.ContentEnd).Text;
MessageBox.Show(text);
}
🍔 Menu — главное меню
Стандартное меню в верхней части окна (Файл, Правка, Справка).
⚙️ Где применяется
Файловые менеджеры, редакторы, большинство профессиональных приложений.
📋 Свойства (MenuItem)
Header — текст пункта. Подчёркивание (_) перед буквой задаёт горячую клавишу (Alt+буква).
IsEnabled — доступен ли пункт.
⚡ События
Click — при выборе пункта.
<Menu>
<MenuItem Header="_Файл">
<MenuItem Header="_Открыть" Click="Open_Click"/>
<Separator/>
<MenuItem Header="_Выход" Click="Exit_Click"/>
</MenuItem>
<MenuItem Header="_Справка">
<MenuItem Header="_О программе" Click="About_Click"/>
</MenuItem>
</Menu>
🛠️ ToolBar — панель инструментов
Панель с иконками для быстрого доступа к частым операциям.
⚙️ Где применяется
Редакторы, браузеры, офисные приложения — тулбары с кнопками «Сохранить», «Открыть», «Печать».
📌 Поддерживает переполнение (кнопка >>), если не помещаются все элементы.
<ToolBar>
<Button Content="📁 Открыть" Click="Open_Click"/>
<Button Content="💾 Сохранить" Click="Save_Click"/>
<Separator/>
<CheckBox Content="Режим просмотра"/>
</ToolBar>
ℹ️ StatusBar — строка состояния
Нижняя панель для отображения статуса, прогресса, сообщений.
⚙️ Где применяется
Показывает готовность, количество элементов, текущую операцию, координаты.
<StatusBar>
<StatusBarItem>Готов</StatusBarItem>
<Separator/>
<StatusBarItem>
<ProgressBar Width="100" Height="15" Value="50"/>
</StatusBarItem>
<Separator/>
<StatusBarItem>Версия 1.0</StatusBarItem>
</StatusBar>
📂 Expander — раскрывающийся блок
Скрывает/показывает содержимое по клику на заголовок.
⚙️ Где применяется
Дополнительные настройки, подробная информация, спойлеры, скрытые панели.
📋 Свойства
Header — заголовок (всегда виден).
IsExpanded — true (раскрыт) / false (свёрнут).
<Expander Header="Дополнительные настройки" IsExpanded="False">
<StackPanel Margin="10">
<CheckBox Content="Тёмная тема"/>
<CheckBox Content="Автосохранение"/>
</StackPanel>
</Expander>
📦 GroupBox — группа с рамкой
Визуально объединяет связанные элементы внутри рамки с заголовком.
⚙️ Где применяется
Группы полей в формах (Личные данные, Адрес доставки, Настройки соединения).
<GroupBox Header="Личные данные" Margin="10">
<StackPanel Margin="10">
<TextBox x:Name="NameBox" Text="Имя"/>
<TextBox x:Name="EmailBox" Text="Email"/>
</StackPanel>
</GroupBox>
🖼️ Border — рамка / контейнер с границами
Добавляет рамку, фон, скругление углов вокруг любого содержимого.
⚙️ Где применяется
Оформление блоков, карточек, выделение важных элементов.
📋 Свойства
BorderBrush, BorderThickness — цвет и толщина рамки.
CornerRadius — скругление углов.
Background — заливка.
Padding — отступы внутри рамки.
<Border BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="15" Background="#f0f0f0" Padding="15" Margin="20">
<TextBlock Text="Контент внутри красивой рамки" FontSize="14"/>
</Border>
📜 ScrollViewer — прокрутка
Добавляет полосы прокрутки к содержимому, которое не помещается.
⚙️ Где применяется
Большие изображения, длинные тексты, списки с неизвестной высотой.
📋 Свойства
VerticalScrollBarVisibility — Auto, Hidden, Visible, Disabled.
HorizontalScrollBarVisibility — аналогично.
CanContentScroll — true = прокрутка по элементам, false = по пикселям.
<ScrollViewer Height="200" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock Text="Строка 1" Margin="5"/>
<TextBlock Text="Строка 2" Margin="5"/>
<!-- 50 строк -->
</StackPanel>
</ScrollViewer>
🖼️ Frame — навигация между страницами (Page)
Позволяет загружать разные страницы (Page) в одну область окна. Поддерживает историю переходов.
⚙️ Где применяется
Одностраничные приложения, мастера установки, многошаговые формы.
📋 Свойства
Source — URI загружаемой страницы.
NavigationUIVisibility — видимость кнопок вперёд/назад.
<Frame x:Name="MainFrame" Source="Page1.xaml" NavigationUIVisibility="Hidden"/>
<Button Content="Перейти на страницу 2" Click="GoToPage2_Click"/>
private void GoToPage2_Click(object sender, RoutedEventArgs e) => MainFrame.Navigate(new Page2());
🔍 Viewbox — масштабирование содержимого
Автоматически масштабирует всё, что внутри, под размер контейнера.
⚙️ Где применяется
Иконки, логотипы, схемы, которые должны сохранять пропорции при изменении размера.
📋 Свойства
Stretch — режим масштабирования (Fill, Uniform, UniformToFill).
<Viewbox Stretch="Uniform" Width="100" Height="100">
<Button Content="Огромная кнопка, но она подстроится"/>
</Viewbox>
✍️ InkCanvas — рисование пером, мышью или пальцем
Позволяет рисовать, оставлять рукописные пометки. Поддерживает чувствительность к нажатию.
⚙️ Где применяется
Приложения для рисования, подпись документов, рукописный ввод.
📋 Свойства
Strokes — коллекция нарисованных линий.
<InkCanvas x:Name="DrawingCanvas" Background="White" Width="400" Height="200"/>
<Button Content="Очистить" Click="ClearCanvas_Click"/>
private void ClearCanvas_Click(object sender, RoutedEventArgs e) => DrawingCanvas.Strokes.Clear();
📖 DocumentViewer — просмотр документов XPS
Показывает документы в формате XPS (альтернатива PDF от Microsoft).
⚙️ Где применяется
В редких случаях, где нужна поддержка XPS. Обычно вместо него используют PDF-вьюеры.
⚠️ В современных проектах чаще используют сторонние компоненты для PDF.
<DocumentViewer x:Name="DocViewer"></DocumentViewer>
📄 FlowDocumentScrollViewer — форматированный текст с прокруткой
Отображает большие объёмы форматированного текста с поддержкой колонок, картинок, таблиц.
⚙️ Где применяется
Просмотр статей, документации, отчётов.
<FlowDocumentScrollViewer>
<FlowDocument>
<Paragraph FontSize="20">Заголовок</Paragraph>
<Paragraph>Большой текст...</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
📏 Separator — разделительная линия
Простая горизонтальная или вертикальная линия для визуального разделения элементов.
⚙️ Где применяется
В меню, тулбарах, между группами опций.
<Menu>
<MenuItem Header="Файл"/>
<Separator/>
<MenuItem Header="Выход"/>
</Menu>
🖱️ ContextMenu — контекстное меню (по правой кнопке)
Меню, появляющееся при клике правой кнопкой мыши на элементе.
⚙️ Где применяется
Везде, где нужны быстрые действия: редактирование текста, работа с файлами.
<TextBox x:Name="MyTextBox">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Копировать" Click="Copy_Click"/>
<MenuItem Header="Вставить" Click="Paste_Click"/>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
💬 ToolTip — всплывающая подсказка
Появляется при наведении курсора на элемент и исчезает через несколько секунд.
⚙️ Где применяется
Пояснения к кнопкам, полям, иконкам.
<Button Content="Сохранить" ToolTip="Сохранить текущий документ (Ctrl+S)" />
<TextBox ToolTip="Введите ваше имя" />
📦 WrapPanel — панель с переносом элементов
Располагает элементы в строку, а если не хватает места — переносит на следующую (как слова в тексте).
⚙️ Где применяется
Облако тегов, галерея изображений, панель с динамическими кнопками.
<WrapPanel>
<Button Content="Кнопка 1"/>
<Button Content="Кнопка 2"/>
<Button Content="Кнопка 3"/>
<Button Content="Очень длинная кнопка 4"/>
</WrapPanel>
⚓ DockPanel — панель с прикреплением к краям
Позволяет «приклеить» элементы к верхнему, нижнему, левому или правому краю.
⚙️ Где применяется
Создание каркаса окна: меню сверху, статус-бар снизу, панели слева/справа.
<DockPanel>
<Menu DockPanel.Dock="Top"><MenuItem Header="Файл"/></Menu>
<StatusBar DockPanel.Dock="Bottom"><StatusBarItem>Готов</StatusBarItem></StatusBar>
<StackPanel DockPanel.Dock="Left" Width="150" Background="#f0f0f0">
<Button Content="Навигация"/>
</StackPanel>
<TextBox AcceptsReturn="True"/> <!-- оставшееся место -->
</DockPanel>
↔️ GridSplitter — разделитель колонок/строк (позволяет менять размер)
Добавляет ползунок между колонками или строками Grid, который пользователь может перетаскивать.
⚙️ Где применяется
IDE, редакторы, просмотрщики — везде, где нужны изменяемые панели.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0"/>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="Gray"/>
<TextBox Grid.Column="2"/>
</Grid>
🎉 Ты изучил 40+ компонентов WPF!
Теперь ты можешь строить любые интерфейсы
🚀 Что дальше?
• Открой Visual Studio и начни собирать своё приложение из этих деталей (как из конструктора)
• Не бойся экспериментировать: меняй свойства, подписывайся на события, смотри, что получится
• Когда будет нужно что-то нестандартное — ищи «WPF стилизация» или «кастомный элемент управления»
💬 Секрет профи: программист не запоминает все свойства — он умеет быстро открыть документацию (F1) или найти пример в интернете. Сохрани эту лекцию в закладки!
❤️ gadget59.ru всегда поможет. Удачи в создании крутых программ!