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

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

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

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

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

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

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

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

Элемент управления можно добавить в приложение несколькими способами:

• Добавьте элемент управления в разметку XAML в редакторе Visual Studio XAML.
• Добавьте элемент управления в код. Элементы управления, добавленные в код, видны при запуске приложения, но не отображаются в конструкторе XAML Visual Studio.

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

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

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

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

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

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

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

свойство

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

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

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

Свойства используются для указания внешнего вида, содержимого и других атрибутов элементов управления. При добавлении элемента управления с помощью средства разработки некоторые свойства, которые управляют размером, положением и содержимым, могут быть заданы Visual Studio.

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

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

Ниже приведен результирующий код 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()));

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

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

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

Каждый обработчик событий получает два параметра:

• sender — ссылка на объект, вызвавшее событие. Он определён как объект, поэтому обычно приводят его к более конкретному типу (например, Button), при необходимости проверки или изменения состояния отправителя. Приведение к подходящему типу безопасно в зависимости от места подключения обработчика.
• e (или args) — данные события, которые содержат сведения, относящиеся к событию.

В следующем примере выполняется обработка события Click, принадлежащего кнопке Button1. При нажатии кнопки цвет её переднего плана устанавливается на синий.

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> , чтобы создать обработчик с именем по умолчанию или выберите существующий обработчик из списка.

В этом примере в XAML событие Click ассоциируется с обработчиком с именем Button_Click.

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

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

Вы также можете полностью подключить обработчик в коде code-behind:

Button1.Click += new RoutedEventHandler(Button_Click);

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

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

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