Урок 1.3: От Консоли к Окну

Модуль 1 ⏱️ ~1.5 часа

📌 Ключевые моменты этого урока:

Вспомните из урока 1.1: Program.cs — это точка входа, где запускается приложение
Windows Forms — технология для создания GUI приложений в .NET Framework
Form — это окно приложения с заголовком, границами и клиентской областью
Свойства формы (Size, Location, Text) определяют её внешний вид и поведение
В конструкторе Form вы можете программно настраивать любые свойства

Интерфейс Visual Studio для работы с Windows Forms

Visual Studio — это мощная интегрированная среда разработки (IDE) от Microsoft, предназначенная для создания приложений на различных языках программирования, включая C#. При работе с Windows Forms вы будете взаимодействовать с несколькими ключевыми окнами и панелями.

Основные составные части Visual Studio:

Горизонтальное меню (Menu Bar) — содержит пункты File, Edit, View, Project и др.
Панель инструментов (Standard Toolbar) — команды для быстрого доступа
Панель элементов (Toolbox) — компоненты для размещения на форме
Окно свойств (Properties Window) — для настройки свойств компонентов
Обозреватель решений (Solution Explorer) — структура файлов проекта
Дизайнер форм (Form Designer) — визуальное редактирование формы
Редактор кода (Code Editor) — написание и редактирование кода

Схема интерфейса Visual Studio:

┌─────────────────────────────────────────────────────────────────┐
│ File  Edit  View  Project  Build  Debug  Tools  Help  │  🔄 📌 □ ✕ │ ← Меню и Панель инструментов
├──────────────────────┬────────────────────────────────────────────┤
│                      │                                            │
│  Панель элементов    │           Дизайнер форм                  │
│  (Toolbox)           │           (Form Designer)                  │
│                      │                                            │
│  ┌────────────────┐  │   ┌──────────────────────────────────┐   │
│  │ Common Controls│  │   │  Мое первое приложение    _ □ ✕  │   │
│  │ • Button       │  │   ├──────────────────────────────────┤   │
│  │ • Label        │  │   │                                  │   │
│  │ • TextBox      │  │   │        [Form1]                   │   │
│  │ • CheckBox     │  │   │                                  │   │
│  │ • RadioButton  │  │   │                                  │   │
│  ├────────────────┤  │   │                                  │   │
│  │ Containers     │  │   │                                  │   │
│  │ • Panel        │  │   └──────────────────────────────────┘   │
│  │ • GroupBox     │  │                                            │
│  │ • TabControl   │  │                                            │
│  └────────────────┘  │                                            │
│                      │                                            │
├──────────────────────┼────────────────────────────────────────────┤
│ Обозреватель решений │       Окно свойств (Properties)          │
│ (Solution Explorer)  │       ┌────────────────────────────────┐  │
│                      │       │ Form1 System.Windows.Forms.Form│  │
│ ▶ MyGraphicsApp      │       ├────────────────────────────────┤  │
│   ▶ Properties       │       │ Properties   Events            │  │
│   ▶ References       │       ├────────────────────────────────┤  │
│   ▸ Form1.cs         │       │ (Name)         Form1            │  │
│   ▸ Form1.Designer.cs│       │ AcceptButton                   │  │
│   ▸ Program.cs       │       │ AccessibleRole                │  │
│   ▸ AssemblyInfo.cs  │       │ AllowDrop                      │  │
│   ▸ Resources.resx   │       │ Anchor                         │  │
│                      │       │ AutoScroll                     │  │
│                      │       │ AutoScrollMargin               │  │
│                      │       │ AutoSize                       │  │
│                      │       │ BackColor       Control        │  │
│                      │       │ BackgroundImage                │  │
│                      │       │ └───────────────────────────────┘  │
└──────────────────────┴────────────────────────────────────────────┘
                              Вкладка: Form1.cs [Design]  │  Form1.cs*

Описание основных окон и панелей

1. Горизонтальное меню (Menu Bar)

Меню находится в верхней части окна и содержит основные команды для управления проектом и средой разработки:

File (Файл) — создание, открытие, сохранение проектов и файлов
Edit (Правка) — операции редактирования (копирование, вставка, поиск)
View (Вид) — показ/скрытие окон и панелей
Project (Проект) — управление проектом, добавление ссылок
Build (Сборка) — компиляция проекта
Debug (Отладка) — запуск, остановка, пошаговое выполнение
Tools (Сервис) — настройки среды, параметры

2. Панель инструментов (Standard Toolbar)

Находится под меню и содержит кнопки для быстрого доступа к часто используемым командам:

New Project — создать новый проект
Add New Item — добавить новый файл в проект
Open File — открыть файл
Save — сохранить текущий файл
Save All — сохранить все файлы
Undo/Redo — отмена/повтор действий
Start Debugging — запустить приложение (F5)
Start Without Debugging — запустить без отладки (Ctrl+F5)

3. Панель элементов (Toolbox)

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

Основные категории:

Common Controls (Общие элементы управления):
├─ Button        — кнопка
├─ Label         — текстовая метка
├─ TextBox       — поле ввода текста
├─ CheckBox      — флажок (может быть отмечен/не отмечен)
├─ RadioButton   — переключатель (выбор одного из нескольких)
├─ ComboBox      — выпадающий список
├─ ListBox       — список элементов
├─ ProgressBar   — индикатор выполнения
└─ LinkLabel     — гиперссылка

Containers (Контейнеры):
├─ Panel         — панель для группировки элементов
├─ GroupBox      — группа с заголовком
├─ TabControl    — вкладки
├─ SplitContainer — разделяемая панель
└─ FlowLayoutPanel — панель с автоматическим выравниванием

Menus & Toolbars (Меню и панели инструментов):
├─ MenuStrip     — главное меню
├─ ContextMenuStrip — контекстное меню (правый клик)
├─ StatusStrip   — строка состояния
└─ ToolStrip     — панель инструментов

Dialogs (Диалоговые окна):
├─ OpenFileDialog    — диалог открытия файла
├─ SaveFileDialog    — диалог сохранения файла
├─ ColorDialog       — диалог выбора цвета
└─ FolderBrowserDialog — диалог выбора папки

Как использовать Toolbox:

Откройте вкладку "View" → "Toolbox" или нажмите Ctrl+Alt+X
Дважды кликните на компонент — он добавится на форму
Или перетащите компонент мышью на форму
Разверните категории, нажав на + слева от названия

4. Окно свойств (Properties Window)

Окно свойств (нажмите F4 для вызова) предназначено для изменения свойств выбранного компонента. Оно состоит из двух вкладок:

Вкладка Properties (Свойства):

Позволяет изменять свойства выделенного компонента
Свойства организованы по категориям (Appearance, Behavior, Design и т.д.)
Можно сортировать по алфавиту или категориям

Вкладка Events (События):

Позволяет определить реакцию компонента на события
Двойной клик по событию создает обработчик в коде
Примеры событий: Click, Load, Paint, KeyPress

Основные свойства компонентов:

Общие свойства для большинства компонентов:
├─ (Name)         — имя компонента в коде (обязательно уникальное!)
├─ Text/Caption   — текст, отображаемый на компоненте
├─ Location       — позиция на форме (Point {X, Y})
├─ Size           — размер компонента (Size {Width, Height})
├─ BackColor      — цвет фона
├─ ForeColor      — цвет текста
├─ Font           — шрифт текста
├─ Visible        — видимость (true/false)
├─ Enabled        — доступность (true/false)
├─ Anchor         — привязка к краям при изменении размера формы
└─ Dock           — прикрепление к краю формы

Свойства, специфичные для Button:
├─ DialogResult   — результат закрытия диалога
└─ FlatStyle      — стиль отображения кнопки

Свойства, специфичные для TextBox:
├─ Text           — текст в поле ввода
├─ Multiline      — многострочный режим
├─ PasswordChar   — символ для скрытия пароля
├─ ReadOnly       — только для чтения
└─ ScrollBars     — полосы прокрутки

Как использовать Properties:

Выделите компонент на форме или в списке компонентов (вверху окна)
Выберите вкладку Properties или Events
Измените значение свойства — оно сразу применится
Нажмите F1 на свойстве для получения справки

5. Обозреватель решений (Solution Explorer)

Обозреватель решений показывает структуру всего проекта — все файлы, папки и ссылки. Обычно находится справа.

Структура типичного проекта:

Solution 'MyGraphicsApp' (1 project)
└─ 📂 MyGraphicsApp
   ├─ 📂 Properties            — свойства проекта
   │  ├─ AssemblyInfo.cs      — информация о сборке
   │  ├─ Resources.resx       — ресурсы (изображения, иконки)
   │  └─ Settings.settings    — настройки приложения
   ├─ 📂 References            — ссылки на библиотеки
   │  ├─ System               — базовые классы .NET
   │  ├─ System.Drawing       — работа с графикой
   │  ├─ System.Windows.Forms — Windows Forms
   │  └─ ...                  — другие библиотеки
   ├─ 📄 App.config            — конфигурационный файл
   ├─ 📄 Form1.cs              — код формы (логика)
   ├─ 📄 Form1.Designer.cs     — дизайнер формы (автогенерируемый)
   ├─ 📄 Form1.resx            — ресурсы формы
   └─ 📄 Program.cs            — точка входа приложения

Как использовать Solution Explorer:

Двойной клик — открыть файл в редакторе
Правый клик — контекстное меню (добавить, удалить, переименовать)
Кнопка "Show All Files" — показать скрытые файлы (bin, obj)
Перетаскивание — можно перемещать файлы между папками

6. Дизайнер форм (Form Designer)

Дизайнер форм — это визуальный редактор, где вы создаете интерфейс приложения. Здесь вы:

Размещаете компоненты из Toolbox на форме
Перемещаете и изменяете размер компонентов мышью
Выравниваете и группируете элементы
Видите, как будет выглядеть ваше приложение

Переключение между Дизайнером и Кодом:

F7 — перейти к коду
Shift+F7 — перейти к дизайнеру
Вкладки внизу — Form1.cs [Design] / Form1.cs

Работа с компонентами в дизайнере:

Выбор компонента:
• Клик по компоненту — выделение (появятся маркеры размера)
• Клик по форме — выделение самой формы
• Shift+клик — множественный выбор

Перемещение:
• Перетащите компонент мышью
• Используйте стрелки на клавиатуре (точное позиционирование)

Изменение размера:
• Потяните за маркеры по краям компонента
• Используйте Shift+стрелки для точного изменения

Выравнивание:
• Format → Align → Lefts/Tops/Centers — выравнивание
• Format → Vertical Spacing → Make Equal — равные расстояния
• Format → Center in Form → по центру формы

Группировка:
• Ctrl+G — группировка выбранных компонентов
• Format → Lock Controls — зафиксировать положение

7. Редактор кода (Code Editor)

Редактор кода — это место, где вы пишете программный код. Он имеет множество полезных функций:

Основные функции редактора:

Подсветка синтаксиса — код цветом для лучшей читаемости
IntelliSense — автодополнение кода (Ctrl+Space)
Автоформатирование — правильные отступы (Ctrl+K, Ctrl+D)
Сворачивание кода —Regions (#region) и методы
Навигация — Go to Definition (F12), Find All References (Shift+F12)
Закладки — Ctrl+K, Ctrl+K — поставить/убрать закладку

Горячие клавиши редактора:

Навигация:
F5              — запустить с отладкой
Ctrl+F5         — запустить без отладки
Shift+F5        — остановить отладку
F9              — поставить/убрать точку останова
F10             — шаг с заходом в функцию
F11             — шаг без захода в функцию

Редактирование:
Ctrl+Space      — IntelliSense (автодополнение)
Ctrl+K, Ctrl+D  — форматировать документ
Ctrl+K, Ctrl+C  — закомментировать выделенное
Ctrl+K, Ctrl+U  — раскомментировать
Ctrl+F          — поиск
Ctrl+H          — замена
Ctrl+G          — перейти к строке

Окна:
F4              — окно свойств (Properties)
Ctrl+Alt+X      — панель элементов (Toolbox)
Ctrl+Alt+L      — обозреватель решений
Ctrl+Alt+O      — окно вывода (Output)
Ctrl+Alt+E      — список ошибок (Error List)

Создание Windows Forms приложения

Windows Forms — это классическая технология от Microsoft для создания графических приложений в .NET. Она предоставляет готовые элементы управления (кнопки, текстовые поля, менюшки) и систему событий для создания интерактивных интерфейсов. В отличие от консольных приложений, здесь пользователь видит окно с визуальными элементами.

Почему Windows Forms для начинающих?

Простота — готовые элементы управления, не нужно рисовать всё с нуля
Интуитивность — знакомый интерфейс, как в обычных Windows приложениях
Модернизм — WPF сложнее, WinForms подходит для обучения
Совместимость — работает на Windows XP через Windows 11

Создание нового проекта шаг за шагом:

Откройте Visual Studio — Free Community Edition подходит идеально
Нажмите "Create a new project" (или File → New → Project)
Выберите "Windows Forms App (.NET Framework)" — это важно! Not .NET Core
Укажите имя проекта — например "MyGraphicsApp"
Выберите расположение папки — где сохранится проект
Кликните Create — Visual Studio создаст проект за вас

Что произойдет автоматически:

Visual Studio создаст:
├── Form1.cs                    // Ваша форма (главное окно)
├── Form1.Designer.cs           // Дизайнер (не меняйте вручную!)
├── Program.cs                  // Точка входа
├── Properties/
│   ├── AssemblyInfo.cs
│   └── Resources.resx
└── packages.config             // Зависимости

Подробное описание файлов проекта:

Каждый файл в проекте имеет свое назначение. Понимание этой структуры поможет вам эффективно работать с проектом.

1. Program.cs — точка входа приложения

Это главный файл, который запускается первым. Содержит метод Main(), который:

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

static class Program
{
    [STAThread]
    static void Main()
    {
        // Включить визуальные стили XP и выше
        Application.EnableVisualStyles();

        // Использовать текстовый рендеринг GDI+ вместо GDI
        Application.SetCompatibleTextRenderingDefault(false);

        // Запустить главную форму приложения
        Application.Run(new Form1());
    }
}

2. Form1.cs — код формы

Основной файл формы, где вы:

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

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent(); // Инициализация дизайнера
    }

    // Обработчик события клика по кнопке
    private void button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Кнопка нажата!");
    }

    // Обработчик события загрузки формы
    private void Form1_Load(object sender, EventArgs e)
    {
        // Код, выполняющийся при загрузке формы
    }
}

3. Form1.Designer.cs — дизайнер формы

Этот файл генерируется автоматически Visual Studio. Он содержит:

Объявление всех компонентов, размещенных на форме
Код инициализации компонентов (InitializeComponent)
Настройки свойств компонентов

⚠️ Важно: Не редактируйте этот файл вручную! Ваши изменения будут потеряны при следующем сохранении дизайнера. Все изменения делайте через Дизайнер форм или в Form1.cs.

partial class Form1
{
    /// 
    /// Обязательная переменная конструктора.
    /// 
    private System.ComponentModel.IContainer components = null;

    /// 
    /// Освободить все используемые ресурсы.
    /// 
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    #region Код, автоматически созданный конструктором форм Windows

    /// 
    /// Требуемый метод для поддержки конструктора — не изменяйте
    /// содержимое этого метода с помощью редактора кода.
    /// 
    private void InitializeComponent()
    {
        this.button1 = new System.Windows.Forms.Button();
        this.label1 = new System.Windows.Forms.Label();
        this.SuspendLayout();
        //
        // button1
        //
        this.button1.Location = new System.Drawing.Point(100, 100);
        this.button1.Name = "button1";
        this.button1.Size = new System.Drawing.Size(75, 23);
        this.button1.TabIndex = 0;
        this.button1.Text = "button1";
        this.button1.UseVisualStyleBackColor = true;
        this.button1.Click += new System.EventHandler(this.button1_Click);
        //
        // label1
        //
        this.label1.AutoSize = true;
        this.label1.Location = new System.Drawing.Point(100, 50);
        this.label1.Name = "label1";
        this.label1.Size = new System.Drawing.Size(35, 13);
        this.label1.TabIndex = 1;
        this.label1.Text = "label1";
        //
        // Form1
        //
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(284, 261);
        this.Controls.Add(this.label1);
        this.Controls.Add(this.button1);
        this.Name = "Form1";
        this.Text = "Form1";
        this.Load += new System.EventHandler(this.Form1_Load);
        this.ResumeLayout(false);
        this.PerformLayout();

    }

    #endregion

    private System.Windows.Forms.Button button1;
    private System.Windows.Forms.Label label1;
}

4. Form1.resx — ресурсы формы

XML-файл, содержащий ресурсы формы:

Изображения, используемые на форме
Иконки
Строки локализации
Другие двоичные данные

5. AssemblyInfo.cs — информация о сборке

Содержит метаданные о приложении:

Версия сборки
Название компании
Информация о продукте
Авторские права

using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;

// Общие сведения о сборке
[assembly: AssemblyTitle("MyGraphicsApp")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("MyGraphicsApp")]
[assembly: AssemblyCopyright("Copyright ©  2026")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]

// Установка ComVisible в false делает типы в сборке невидимыми
// для COM-компонентов
[assembly: ComVisible(false)]

// Если этот проект предоставлен COM, следующий GUID используется
// как ID библиотеки типов
[assembly: Guid("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx")]

// Информация о версии для сборки состоит из следующих четырех значений:
//
//      Основной номер версии
//      Дополнительный номер версии
//      Номер сборки
//      Редакция
//
// Можно задать все значения или принять номер сборки и номер редакции
// по умолчанию, используя "*", как показано ниже:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

6. Папки bin и obj (скрыты по умолчанию)

Эти папки содержат скомпилированные файлы:

bin/
├─ Debug/              — отладочная версия
│  ├─ MyGraphicsApp.exe      — исполняемый файл
│  ├─ MyGraphicsApp.pdb      — символы отладки
│  └─ ...                    — другие файлы
└─ Release/            — релизная версия
   ├─ MyGraphicsApp.exe      — оптимизированный exe
   └─ ...

obj/                 — временные файлы компиляции
   ├─ Debug/
   │  └─ ...         — промежуточные файлы
   └─ Release/
      └─ ...

Примечание: Папки bin и obj не показываются в Solution Explorer по умолчанию. Нажмите кнопку "Show All Files" (📄) для их просмотра. Эти папки можно удалить — они пересоздадутся при следующей компиляции.

7. App.config — конфигурационный файл

XML-файл с настройками приложения:

Настройки запуска (версия .NET)
Пользовательские настройки
Строки подключения к базе данных

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <startup> 
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
    </startup>
</configuration>

Процесс компиляции и запуска

Когда вы нажимаете F5 (Start Debugging), происходит следующее:

1. Сохранение всех файлов
   ↓
2. Компиляция (Build)
   • Все .cs файлы компилируются в IL код
   • Создаются .dll и .exe файлы в папке bin/Debug
   ↓
3. Запуск приложения
   • CLR загружает .exe файл
   • JIT компилятор преобразует IL в машинный код
   • Приложение запускается
   ↓
4. Отладка (если включена)
   • Точки останова (breakpoints) работают
   • Можно смотреть значения переменных
   • Пошаговое выполнение (F10, F11)
   ↓
5. Завершение работы
   • При закрытии главной формы приложение завершается

Режимы сборки: Debug vs Release

┌──────────────────┬──────────────────┬──────────────────┐
│  Характеристика  │ Debug            │ Release          │
├──────────────────┼──────────────────┼──────────────────┤
│ Назначение       │ Разработка       │ Продукция        │
│ Оптимизация      │ ❌ Отключена     │ ✅ Включена      │
│ Символы отладки  │ ✅ Включены (.pdb)│ ❌ Отключены     │
│ Размер файла     │ ❌ Больший       │ ✅ Меньший       │
│ Скорость         │ ❌ Медленнее     │ ✅ Быстрее       │
│ Точки останова   │ ✅ Работают      │ ❌ Не работают    │
│ Папка вывода     │ bin/Debug/       │ bin/Release/     │
└──────────────────┴──────────────────┴──────────────────┘

Переключение:
• Toolbar: Debug → Release (выпадающий список)
• Или: Build → Configuration Manager

Структура Form — что находится внутри вашего окна

Каждая Form — это объект на экране, который имеет физическую структуру. Понимание этой структуры поможет вам контролировать внешний вид приложения.

Анатомия окна:

┌─────────────────────────────────────────────────────────────┐
│ Мое первое приложение                    _ □ ✕              │ ← Заголовок (Title Bar)
├─────────────────────────────────────────────────────────────┤
│                                                             │
│                                                             │
│                    Клиентская область                       │
│                 (Client Area)                               │
│                                                             │
│              [Здесь размещаются компоненты]                 │
│                                                             │
│              ┌─────────────┐                                │
│              │   Button1   │                                │
│              └─────────────┘                                │
│                                                             │
└─────────────────────────────────────────────────────────────┘
 ↑                                                           ↑
 Левый край (Left)                                         Правый край (Right)
 Верхний край (Top)                                        Нижний край (Bottom)

Части окна:
• Заголовок (Title Bar) — показывает свойство Text и кнопки управления
• Клиентская область (Client Area) — белое пространство для компонентов
• Границы (Borders) — края, которые можно перетаскивать для изменения размера
• Кнопки управления — свернуть (_), развернуть (□), закрыть (✕)

Основные компоненты Form:

Заголовок (Title Bar) — текст в верхней части окна показывает свойство Text
Клиентская область (Client Area) — место, где находятся кнопки, текстовые поля и другие элементы управления
Границы (Borders) — можно перетаскивать для изменения размера формы
Кнопки управления — свернуть, развернуть, закрыть (обычно справа вверху)

Свойства размера и позиции:

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  (0, 0) ───────────────────────────────────────────→ X     │
│    │  ┌─────────────────────────────────────┐           │
│    ↓  │                                     │           │
│   Y   │         Клиентская область          │           │
│        │                                     │           │
│        │                                     │           │
│        │                                     │           │
│        └─────────────────────────────────────┘           │
│                                                             │
│                 ↓                                          │
│              (Width, Height)                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Size (Размер):
• Width — ширина формы в пикселях
• Height — высота формы в пикселях
• ClientSize — размер только клиентской области (без границ и заголовка)

Location (Позиция):
• Point {X, Y} — координаты левого верхнего угла на экране
• X — расстояние от левого края экрана
• Y — расстояние от верхнего края экрана

Пример:
this.Size = new Size(800, 600);        // Общий размер формы
this.ClientSize = new Size(780, 550);  // Размер клиентской области
this.Location = new Point(100, 50);   // Позиция на экране

Работа с компонентами на форме

Компоненты — это визуальные элементы управления, которые вы размещаете на форме: кнопки, текстовые поля, метки и т.д. Каждый компонент имеет свои свойства, события и методы.

Основные группы компонентов:

1. Компоненты вывода информации:

Label — текстовая метка для отображения статического текста
PictureBox — отображение изображений
ProgressBar — индикатор выполнения операции
StatusStrip — строка состояния внизу формы

2. Компоненты ввода информации:

TextBox — однострочное поле ввода текста
RichTextBox — многострочное поле с форматированием
MaskedTextBox — поле ввода с маской (например, для телефона)
NumericUpDown — ввод чисел с кнопками вверх/вниз
DateTimePicker — выбор даты и времени

3. Компоненты выбора (выбор из списка):

CheckBox — флажок (может быть отмечен/не отмечен)
RadioButton — переключатель (выбор одного из нескольких)
ComboBox — выпадающий список
ListBox — список элементов
CheckedListBox — список с флажками
TreeView — иерархический список (дерево)
ListView — список с иконками (как в проводнике)

4. Компоненты выполнения действий:

Button — кнопка
LinkLabel — гиперссылка
ToolStrip — панель инструментов с кнопками

5. Контейнеры (для группировки компонентов):

Panel — простая панель
GroupBox — группа с заголовком
TabControl — вкладки
SplitContainer — разделяемая панель
FlowLayoutPanel — панель с автоматическим выравниванием
TableLayoutPanel — панель с табличной структурой

Размещение компонента на форме:

Способ 1: Двойной клик в Toolbox
1. Откройте Toolbox (Ctrl+Alt+X)
2. Разверните нужную категорию (например, Common Controls)
3. Дважды кликните по компоненту (например, Button)
4. Компонент появится на форме в позиции по умолчанию

Способ 2: Перетаскивание мышью
1. Откройте Toolbox
2. Нажмите на компонент левой кнопкой мыши
3. Не отпуская кнопку, перетащите на форму
4. Отпустите кнопку в нужном месте

Способ 3: Программно (в коде)
Button myButton = new Button();
myButton.Text = "Новая кнопка";
myButton.Location = new Point(50, 50);
myButton.Size = new Size(100, 30);
this.Controls.Add(myButton);

Настройка свойств компонента:

После размещения компонента на форме вы можете настроить его свойства через окно Properties (F4):

Пример настройки Button:
┌────────────────────────────────────────┐
│ Button System.Windows.Forms.Button    │ ← Выбранный компонент
├────────────────────────────────────────┤
│ Properties   Events                   │ ← Вкладки
├────────────────────────────────────────┤
│ (Name)         button1                │ ← Имя в коде
│ Accessibility                         │
│ ▼ Appearance                          │
│   BackColor     Control               │
│   BackgroundImage (none)              │
│   Cursor        Default               │
│   FlatStyle     Standard              │
│   Font          Microsoft Sans...     │
│   ForeColor     ControlText           │
│   Image         (none)                │
│   ImageAlign    MiddleCenter          │
│   Text          button1               │ ← Текст на кнопке
│   TextAlign     MiddleCenter          │
│ ▼ Behavior                            │
│   AutoSize      True                  │
│   AutoSizeMode   GrowAndShrink        │
│   Enabled       True                  │
│ ▼ Design                               │
│   GenerateMember True                 │
│   Locked        False                 │
│   Modifiers     Private               │
│ ▼ Layout                               │
│   Anchor        Top, Left             │
│   Dock          None                  │
│   Location      100, 100              │ ← Позиция {X, Y}
│   Margin        3, 3, 3, 3            │
│   MaximumSize   0, 0                  │
│   MinimumSize   0, 0                  │
│   Padding       0, 0, 0, 0            │
│   Size          75, 23                │ ← Размер {Width, Height}
│   TabIndex      0                     │
│   TabStop       True                  │
└────────────────────────────────────────┘

Изменение свойства:
• Кликните по свойству
• Введите новое значение или выберите из списка
• Для некоторых свойств есть диалоговое окно (например, Font)
• Изменения сразу применяются к компоненту

Работа с событиями компонентов

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

Основные события компонентов:

События Button (кнопка):
├─ Click          — клик по кнопке (самое частое!)
├─ DoubleClick    — двойной клик
├─ MouseEnter     — курсор мыши вошел в область кнопки
├─ MouseLeave     — курсор мыши покинул область кнопки
├─ MouseDown      — нажата кнопка мыши
├─ MouseUp        — отпущена кнопка мыши
└─ KeyPress       — нажата клавиша на клавиатуре

События TextBox (поле ввода):
├─ TextChanged    — изменился текст в поле
├─ KeyPress       — нажата клавиша
├─ KeyDown        — клавиша нажата
├─ KeyUp          — клавиша отпущена
├─ GotFocus       — поле получило фокус
├─ LostFocus      — поле потеряло фокус
└─ Enter          — нажата клавиша Enter

События Form (форма):
├─ Load           — форма загружается (перед показом)
├─ Shown          — форма показана на экране
├─ Activated      — форма стала активной
├─ Deactivate     — форма перестала быть активной
├─ Closing        — форма закрывается (можно отменить)
├─ Closed         — форма закрыта
├─ Resize         — изменился размер формы
├─ Move           — форма перемещена
└─ Paint          — форма перерисовывается

Создание обработчика события:

Способ 1: Через окно Properties (рекомендуется)

1. Выделите компонент на форме (например, Button)
2. Откройте окно Properties (F4)
3. Перейдите на вкладку Events (события) — значок ⚡
4. Найдите нужное событие (например, Click)
5. Дважды кликните по пустому полю справа от события
6. Visual Studio автоматически создаст обработчик в коде и перейдет к нему

Пример созданного обработчика:
private void button1_Click(object sender, EventArgs e)
{
    // Ваш код здесь
}

Способ 2: Двойной клик по компоненту в дизайнере

1. Откройте Дизайнер форм (Shift+F7)
2. Дважды кликните по компоненту (например, Button)
3. Visual Studio создаст обработчик для события по умолчанию
   (для Button это Click, для Form это Load)
            
Примечание: Этот способ работает только для основного события компонента!

Способ 3: Программно (в коде)

public Form1()
{
    InitializeComponent();

    // Создаем кнопку программно
    Button myButton = new Button();
    myButton.Text = "Нажми меня";
    myButton.Location = new Point(50, 50);
    myButton.Size = new Size(100, 30);

    // Подписываемся на событие Click
    myButton.Click += MyButton_Click;

    // Добавляем кнопку на форму
    this.Controls.Add(myButton);
}

// Обработчик события
private void MyButton_Click(object sender, EventArgs e)
{
    MessageBox.Show("Кнопка была нажата!");
}

Параметры обработчика события:

private void button1_Click(object sender, EventArgs e)
//                     ↑           ↑           ↑
//                     │           │           │
//           Возвращаемое значение  │     Аргументы события
//                   (обычно void)  │     (дополнительная информация)
//                                 │
//                           Отправитель события
//                           (объект, который вызвал событие)

// sender — объект, который вызвал событие
// Например, если несколько кнопок подписаны на один обработчик,
// можно определить, какая именно кнопка была нажата:

private void AnyButton_Click(object sender, EventArgs e)
{
    Button clickedButton = sender as Button;
    if (clickedButton != null)
    {
        MessageBox.Show($"Нажата кнопка: {clickedButton.Text}");
    }
}

// e — аргументы события (дополнительная информация)
// Например, MouseEventArgs содержит координаты мыши:

private void Form1_MouseClick(object sender, MouseEventArgs e)
{
    MessageBox.Show($"Клик в точке: X={e.X}, Y={e.Y}");
}

Пример: Полное приложение с обработчиками событий

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    // Обработчик загрузки формы
    private void Form1_Load(object sender, EventArgs e)
    {
        // Начальные настройки
        this.Text = "Мое приложение";
        buttonOK.Text = "OK";
        labelInfo.Text = "Нажмите кнопку для начала";
    }

    // Обработчик клика по кнопке OK
    private void buttonOK_Click(object sender, EventArgs e)
    {
        labelInfo.Text = "Кнопка OK была нажата!";
        labelInfo.ForeColor = Color.Green;
    }

    // Обработчик клика по кнопке Cancel
    private void buttonCancel_Click(object sender, EventArgs e)
    {
        labelInfo.Text = "Операция отменена";
        labelInfo.ForeColor = Color.Red;
    }

    // Обработчик изменения текста в TextBox
    private void textBoxInput_TextChanged(object sender, EventArgs e)
    {
        // Показываем количество символов
        labelCharCount.Text = $"Символов: {textBoxInput.Text.Length}";
    }

    // Обработчик нажатия клавиши Enter в TextBox
    private void textBoxInput_KeyPress(object sender, KeyPressEventArgs e)
    {
        if (e.KeyChar == (char)Keys.Enter)
        {
            MessageBox.Show($"Вы ввели: {textBoxInput.Text}");
            e.Handled = true; // Предотвращаем звуковой сигнал
        }
    }
}

Первое окно — создание и настройка

После создания проекта Visual Studio автоматически создает Form1 для вас. Давайте посмотрим как это выглядит и как это работает.

Базовая пустая Form при создании проекта:

namespace MyGraphicsApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            // Это вызывает Designer (настройку из Visual Studio Designer)
            InitializeComponent();

            // ЗДЕСЬ вы можете добавить свой код инициализации
        }
    }
}

Расширенный пример с контролем свойств:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        
        // Установка свойств формы программно

        // Заголовок окна (то что видно вверху)
        this.Text = "Мое первое графическое приложение";
        
        // Размер в пикселях (ширина, высота)
        this.Size = new Size(800, 600);
        
        // Начальная позиция на экране
        this.StartPosition = FormStartPosition.CenterScreen; // Центр экрана
        
        // Цвет фона
        this.BackColor = Color.LightBlue;
        
        // Можно ли изменять размер окна?
        this.FormBorderStyle = FormBorderStyle.Sizable; // Да, можно
        
        // Стиль показа при запуске
        this.WindowState = FormWindowState.Normal; // Not Maximized or Minimized
    }
}

Свойства формы — как контролировать внешний вид

У Form есть много свойств, которые контролируют её внешний вид и поведение. Разберемся в главных из них.

Размер и положение на экране:

// Text — заголовок окна (строка вверху)
this.Text = "Название приложения";

// Size — размер окна в пикселях (ширина x высота)
this.Size = new Size(1024, 768); // Стандартное разрешение
// или отдельно:
this.Width = 1024;
this.Height = 768;

// Location — позиция левого верхнего угла на экране
this.Location = new Point(100, 50); // Х=100 пиксели справа, Y=50 вниз

// ClientSize — размер только клиентской области (без границ и заголовка)
Size clientArea = this.ClientSize;

// StartPosition — как размещать окно при запуске
this.StartPosition = FormStartPosition.CenterScreen;  // В центре монитора
// Other options: Manual, CenterParent, WindowsDefaultLocation, WindowsDefaultBounds

Внешний вид и оформление:

// BackColor — цвет фона (фон всей формы)
this.BackColor = Color.White;           // Белый фон
this.BackColor = Color.FromArgb(200, 200, 255); // Светло-синий (RGB)

// ForeColor — основной цвет текста по умолчанию
this.ForeColor = Color.Black;

// FormBorderStyle — тип границ окна (как его можно менять)
this.FormBorderStyle = FormBorderStyle.Sizable;    // Можно перетаскивать края
// this.FormBorderStyle = FormBorderStyle.Fixed3D;  // Нельзя менять размер
// this.FormBorderStyle = FormBorderStyle.None;     // Вообще без границ

// Font — шрифт по умолчанию для текста на форме
this.Font = new Font("Arial", 12, FontStyle.Regular);

// Opacity — прозрачность окна (0=полностью прозрачное, 1=непрозрачное)
this.Opacity = 0.9; // 90% видимости

// Icon — значок в левом углу заголовка и на панели задач
this.Icon = new Icon("myIcon.ico");

Поведение и управление:

// MaximizeBox — показывать ли кнопку развернуть (верхний правый угол)
this.MaximizeBox = true;   // Покажет кнопку □

// MinimizeBox — показывать ли кнопку свернуть
this.MinimizeBox = true;   // Покажет кнопку _

// ControlBox — показывать ли все кнопки управления (влияет на обе выше)
this.ControlBox = true;    // true = show, false = hide все три кнопки

// TopMost — будет ли окно всегда над другими окнами?
this.TopMost = true;       // Like "Always on Top"

// ShowInTaskbar — показывать в панели задач
this.ShowInTaskbar = true; // Обычно true

// WindowState — в каком состоянии открыть окно
this.WindowState = FormWindowState.Normal;      // Нормальное
// this.WindowState = FormWindowState.Maximized; // Во весь экран
// this.WindowState = FormWindowState.Minimized; // Свернуто

Полный пример настройки формы:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        
        // ОФОРМЛЕНИЕ
        this.Text = "Графический редактор v1.0";
        this.Size = new Size(1280, 800);
        this.BackColor = Color.White;
        this.Font = new Font("Segoe UI", 10);
        
        // ПОЗИЦИЯ
        this.StartPosition = FormStartPosition.CenterScreen;
        
        // УПРАВЛЕНИЕ
        this.MaximizeBox = true;
        this.MinimizeBox = true;
        this.FormBorderStyle = FormBorderStyle.Sizable;
        this.WindowState = FormWindowState.Normal;
        
        // ПОВЕДЕНИЕ
        this.TopMost = false;      // Не "всегда сверху"
        this.ShowInTaskbar = true; // Видимо в панели задач
    }
}

Частые ошибки при конфигурации формы:

// ❌ НЕПРАВИЛЬНО: забыли InitializeComponent() в начале конструктора
public Form1()
{
    this.Text = "Ошибка!"; // Может крашнуть если Designer элементы не инициализированы
    InitializeComponent();
}

// ✅ ПРАВИЛЬНО: InitializeComponent() ПЕРВЫМ
public Form1()
{
    InitializeComponent();  // ВСЕГДА первым!
    this.Text = "Правильно";
}

// ❌ НЕПРАВИЛЬНО: забыли new Size() лучше не использовать string
this.Size = "800x600"; // Ошибка типа!

// ✅ ПРАВИЛЬНО: new Size с двумя int параметрами
this.Size = new Size(800, 600);

Best Practices:

Всегда вызывайте InitializeComponent() первым — он инициализирует элементы из Designer
Устанавливайте размер после инициализации — иначе могут быть проблемы с элементами
Используйте понятные названия формам — MainForm, EditorForm, SettingsForm лучше чем Form1
Совместите размер с вашим контентом — окно 200x100 для большого интерфейса плохо
Тестируйте на разных разрешениях экрана — не все используют 1920x1080

Что дальше:

Когда вы освоите создание и настройку формы, пришло время изучить жизненный цикл рисования. В следующем уроке 1.4 мы посмотрим на события Paint и Invalidate(), которые позволяют рисовать собственную графику внутри формы.

Практическое задание

Задание 1: Изучение интерфейса Visual Studio

Откройте Visual Studio и создайте новый проект "Windows Forms App (.NET Framework)"
Изучите основные окна и панели:
- Найдите и откройте Toolbox (Ctrl+Alt+X)
- Найдите и откройте Solution Explorer (Ctrl+Alt+L)
- Найдите и откройте Properties Window (F4)
- Попробуйте переключаться между Дизайнером и Кодом (F7, Shift+F7)
Изучите горизонтальное меню:
- File → New → Project
- View → Toolbox / Solution Explorer / Properties Window
- Build → Build Solution
- Debug → Start Debugging
Попробуйте горячие клавиши:
- F5 — запустить приложение
- Shift+F5 — остановить
- Ctrl+S — сохранить
- Ctrl+Shift+S — сохранить все

Задание 2: Создание простой формы с компонентами

Создайте новый проект Windows Forms
Настройте свойства формы через окно Properties:
- (Name): MainForm
- Text: "Мое первое приложение"
- Size: 600, 400
- StartPosition: CenterScreen
- BackColor: LightBlue
Разместите на форме следующие компоненты из Toolbox:
- Label — измените Text на "Введите ваше имя:"
- TextBox — очистите Text
- Button — измените Text на "Приветствовать"
- Label — измените (Name) на labelResult, Text оставьте пустым
Выровняйте компоненты:
- Выделите Label и TextBox
- Format → Align → Tops
- Format → Vertical Spacing → Make Equal

Создайте обработчик события Click для кнопки:

Дважды кликните по кнопке

Добавьте код:

private void button1_Click(object sender, EventArgs e)
{
    string name = textBox1.Text;
    labelResult.Text = $"Привет, {name}!";
    labelResult.ForeColor = Color.Green;
}

Запустите приложение (F5) и проверьте работу

Задание 3: Работа со свойствами компонентов

На форме из задания 2 измените свойства компонентов:
- Button: FlatStyle = Flat, BackColor = LightGreen
- TextBox: Font = Arial, 12pt, Bold
- Label (первый): Font = Arial, 10pt, Italic
Добавьте обработчик события Load для формы:
- Перейдите в Дизайнер форм
- Выделите форму
- В окне Properties перейдите на вкладку Events
- Дважды кликните по событию Load
- Добавьте код:
```
private void MainForm_Load(object sender, EventArgs e)
{
    textBox1.Text = "";
    labelResult.Text = "Введите имя и нажмите кнопку";
    labelResult.ForeColor = Color.Gray;
}
```
Запустите приложение и проверьте, что текст устанавливается автоматически при загрузке

Задание 4: Изучение файлов проекта

Откройте Solution Explorer
Изучите структуру проекта:
- Program.cs — посмотрите на метод Main()
- Form1.cs — ваш код формы
- Form1.Designer.cs — автогенерируемый код (только посмотреть!)
- Properties/AssemblyInfo.cs — информация о сборке
Нажмите кнопку "Show All Files" в Solution Explorer
Разверните папки bin и obj, посмотрите на скомпилированные файлы
Измените версию в AssemblyInfo.cs и перекомпилируйте проект

💡 Совет: Используйте IntelliSense (Ctrl+Space) при написании кода — он поможет найти нужные свойства и методы компонентов.

Проверка знаний

Ответьте на вопросы, чтобы проверить, насколько хорошо вы усвоили материал:

1. Какое окно в Visual Studio используется для изменения свойств компонентов?

Properties Window (Окно свойств)
Solution Explorer (Обозреватель решений)
Toolbox (Панель элементов)
Output (Вывод)

2. Какая горячая клавиша открывает Панель элементов (Toolbox)?

F4
Ctrl+Alt+L
Ctrl+Alt+X
Ctrl+K, Ctrl+D

3. В каком файле находится точка входа приложения Windows Forms?

Form1.cs
Program.cs
Form1.Designer.cs
AssemblyInfo.cs

4. Какой компонент используется для отображения статического текста?

TextBox
Button
Label
ComboBox

5. Какая горячая клавиша переключается между Дизайнером форм и Кодом?

6. В каком файле хранится автогенерируемый код дизайнера формы?

Form1.cs
Program.cs
Form1.Designer.cs
Form1.resx

7. Какое событие кнопки вызывается при клике мышью?

DoubleClick
Click
MouseDown
MouseUp

8. Какой компонент используется для ввода текста пользователем?

Label
Button
CheckBox
TextBox

9. Какое свойство формы задает заголовок окна?

Text
Name
Title
Caption

10. Как создать обработчик события через окно Properties?

Двойной клик по компоненту в дизайнере
Клик правой кнопкой мыши → "View Code"
Перейти на вкладку Events и двойной клик по нужному событию
Написать код вручную в Form1.cs