Введение в работу с элементами управления и шаблонами

В разработке приложений для Windows элемент управления — это элемент пользовательского интерфейса, отображающий содержимое или обеспечивающий взаимодействие. Пользовательский интерфейс приложения, используемый для отображения и ввода данных пользователем, создается с помощью элементов управления, таких как кнопки, текстовые поля и поля со списком.

Важные API: Пространство имен Windows.UI.Xaml.Controls

Шаблон — это макет для изменения элемента управления или объединения нескольких элементов управления, позволяющий получить что-то новое. Например, с помощью шаблона Список и подробные сведения можно использовать элемент управления SplitView для навигации по приложению. Аналогичным образом, вы можете настроить шаблон элемента управления NavigationView, чтобы реализовать шаблон вкладки.

В большинстве случаев элемент управления можно использовать в его исходном виде. Однако элементы управления XAML отделяют функционал приложения от его структуры и внешнего вида, поэтому вы можете вносить изменения разной степени, чтобы элементы управления соответствовали вашим целям. В разделе Стиль приведены инструкции по использованию Стилей XAML и шаблонов элементов управления для изменения элемента управления.

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

• добавление элемента управления в пользовательский интерфейс приложения;
• задание свойств элемента управления, например высоты, ширины или цвета переднего плана;
• добавление кода в обработчики событий элемента управления для выполнения каких-либо действий.

Добавление элемента управления

Вы можете добавить элемент управления в приложение следующими способами.

• Использовать средство разработки, например Blend для Microsoft Visual Studio или конструктор языка XAML (Extensible Application Markup Language) Microsoft Visual Studio.
• Добавить элемент управления в разметку XAML, используя редактор XAML в Visual Studio.
• Добавить элемент управления в коде. Элементы управления, добавляемые в коде, отображаются во время работы приложения, но не видны в конструкторе XAML в Visual Studio.

В Visual Studio при добавлении в приложение элементов управления и работе с ними вы можете использовать различные функции этой программы, в том числе панель элементов, конструктор XAML, редактор XAML и окно "Свойства".

На панели элементов в Visual Studio отображаются различные элементы управления, которые можно использовать в приложении. Чтобы добавить элемент управления в приложение, дважды щелкните его на панели элементов. Например, дважды щелкнув элемент управления TextBox, вы добавите этот код XAML в представление XAML.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Вы также можете перетащить элемент управления с панели элементов в конструктор XAML.

Задание имени элемента управления

Чтобы работать с элементом управления в коде, вам нужно задать его атрибут x:Name и ссылаться на этот элемент в коде по имени. Имя можно задать в окне Свойства Visual Studio или в коде XAML. Вот как можно задать имя выбранному в данный момент элементу управления, используя текстовое поле Имя в верхней части окна Свойства.

Задание имени элемента управления

1. Выберите элемент, которому следует задать имя.
2. На панели "Свойства" введите имя в текстовое поле "Имя".
3. Нажмите клавишу ВВОД, чтобы задать имя.

Вот как можно задать имя элемента управления при помощи добавления атрибута x:Name в редакторе XAML.

<Button x:Name="Button1" Content="Button"/>

Задание свойств элемента управления

С помощью свойств задаются параметры отображения, содержимое и другие атрибуты элементов управления. Когда вы добавляете элемент управления при помощи средства разработки, Visual Studio может задать вместо вас некоторые свойства, управляющие размером, положением и содержимым этого элемента. Чтобы изменить значения некоторых свойств, например Width, Height или Margin, выберите элемент управления в представлении конструирования, а затем выполните необходимые действия. На следующем рисунке показаны инструменты для изменения размера в представлении конструирования.

Возможно, вы захотите, чтобы значения размера и положения для элемента управления задавались автоматически. В таком случае вы можете сбросить свойства размера и положения и выбрать значения по умолчанию.

Сброс свойства

1. На панели Свойства щелкните маркер свойства рядом с его значением. Откроется меню свойств.
2. В меню свойств нажмите кнопку "Сброс".

Вы можете задать свойства элемента управления в окне "Свойства", XAML или коде. Например, чтобы задать цвет переднего плана для элемента "Button", необходимо изменить свойство "Foreground" элемента управления. На следующем рисунке показано, как задать свойство "Foreground" при помощи палитры в окне "Свойства".

Вот как можно задать свойство "Foreground" в редакторе XAML. Обратите внимание на окно функции IntelliSense в Visual Studio, в котором открывается справка по синтаксису.

Ниже показан код на XAML с заданным значением свойства "Foreground".

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Ниже показано, как задать значение свойства "Foreground" в коде.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

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

У каждого элемента управления есть события, которые позволяют вам реагировать на действия пользователя или другие изменения в вашем приложении. Например, элемент управления "Button" имеет событие "Click", которое вызывается, когда пользователь нажимает на эту кнопку. Чтобы обработать событие, нужно создать метод, который называется обработчиком событий. Вы можете связать событие элемента управления с методом обработчика событий в окне "Свойства", в XAML или в коде. Подробнее о событиях см. в разделе Общие сведения о событиях и перенаправленных событиях.

Чтобы создать обработчик событий, выберите элемент управления и щелкните вкладку "События" в верхней части окна "Свойства". В окне "Свойства" перечислены все события, доступные для выбранного элемента управления. Вот некоторые события для элемента "Button".

Чтобы создать обработчик событий с именем по умолчанию, дважды щелкните текстовое поле рядом с именем события в окне "Свойства". Чтобы создать обработчик событий с другим именем, введите это имя в текстовое поле и нажмите клавишу ВВОД. После создания обработчика событий откроется файл кода программной части в редакторе кода. Метод обработчика событий имеет 2 параметра. Первый параметр — это sender, представляющий собой ссылку на объект, к которому присоединен обработчик. Параметр sender относится к типу Object. Как правило, вы приводите sender к более точному типу, если хотите проверить или изменить состояние для самого объекта sender. Исходя из собственного проекта приложения вы выбираете тип, к которому можно безопасно привести sender, учитывая объект, к которому присоединен обработчик. Второе значение — это данные события, которые обычно отображаются в подписи в качестве параметра e или args.

Ниже показан код, обрабатывающий событие "Click" кнопки с именемButton1. При нажатии кнопки для свойства "Foreground" нажатого объекта "Button" устанавливается значение синего цвета.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Кроме того, обработчик событий можно указать и в XAML. В редакторе XAML введите имя события, которое следует обработать. Когда вы начнете вводить имя, Visual Studio покажет окно функции IntelliSense. После выбора события дважды щелкните пункт <New Event Handler> в окне функции IntelliSense, чтобы создать новый обработчик событий с именем по умолчанию, или выберите в списке существующий обработчик событий.

Ниже показано открывшееся окно функции IntelliSense. Оно поможет создать новый обработчик событий или выбрать существующий.

В этом примере показано, как связать событие"Click" с обработчиком событий Button_Click в XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

Вы также можете связать событие с обработчиком событий в файле кода программной части. Ниже показано, как связать обработчик событий в коде.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Связанные темы

• Указатель элементов управления по функциям
• Пространство имен Windows.UI.Xaml.Controls
• Макет
• Стиль
• Удобство использования