C# WPF Урок 2: Создаем калькулятор — основы XAML

Структура проекта WPF

При создании проекта WPF открываются несколько файлов и вкладок. Два основных файла создаются для каждого окна приложения:

Основные файлы окна

  • Файл с расширением .xaml: Описывает дизайн окна. Здесь изменяются размеры окна, добавляются объекты, применяются стили и создаётся пользовательский интерфейс. Язык разметки XAML подобен HTML или XML, объекты создаются через теги.
  • Файл с расширением .xaml.cs: Описывает функциональность окна. Здесь добавляется код для обработки событий, например, нажатия кнопок. Каждый файл .xaml имеет соответствующий файл .xaml.cs.

Среда разработки: дополнительные окна

Помимо файлов проекта, в среде разработки открываются другие окна:

  • Обозреватель решений: Содержит все файлы проекта, включая App.config (глобальные характеристики проекта) и MainWindow.xaml (основной класс приложения). MainWindow.xaml.cs содержит основной метод Main, запускающий программу.
  • Окно свойств: Позволяет устанавливать свойства объектов на странице. Выбор объекта меняет доступные свойства (внешний вид, размер шрифта, цвет фона и др.).
  • Панель элементов: Содержит элементы WPF (кнопки, текстовые поля и т.д.), которые можно перетаскивать в окно приложения.

Создание калькулятора

Настройка основного окна

Настроим название и размеры окна:

  • Название программы: «Калькулятор»
  • Высота: 350 пикселей
  • Ширина: 500 пикселей

Добавим основной контейнер (Grid) с именем mainGrid и белым фоном:

<Grid x_Name="mainGrid" Background="White">
</Grid>

Создадим 4 столбца и 5 рядов в Grid для размещения элементов калькулятора:

<Grid.RowDefinitions>
  <RowDefinition/>
  <RowDefinition/>
  <RowDefinition/>
  <RowDefinition/>
  <RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

Добавим текстовое поле (TextBlock) для отображения результатов вычислений с именем txtLabel, занимающее все четыре столбца:

<TextBlock x_Name="txtLabel" Grid.Row="0" Grid.ColumnSpan="4" Text=""/>

Добавим кнопки с цифрами и операциями. Размещение кнопок осуществляется с помощью атрибутов Grid.Row и Grid.Column.

Добавление функциональности

В файле .xaml.cs добавим обработчик событий для кнопок:

private void Button_Click(object sender, RoutedEventArgs e)
{
    string str = ((Button)sender).Content.ToString();
    if (str == "C")
    {
        txtLabel.Text = "";
    }
    else if (str == "=")
    {
        txtLabel.Text = new DataTable().Compute(txtLabel.Text, "").ToString();
    }
    else
    {
        txtLabel.Text += str;
    }
}

Этот код обрабатывает нажатия кнопок: «C» очищает текстовое поле, «=» выполняет вычисление (с использованием DataTable), остальные кнопки добавляют свои значения в текстовое поле.

В этом уроке мы изучили основы WPF, создав простой калькулятор. Мы работали с XAML для дизайна и C# для функциональности. В следующих уроках улучшим дизайн и добавим функции. Рекомендуется самостоятельно поработать с настройками объектов через окно свойств.

Что будем искать? Например,программа