Пошаговое руководство. Создание кнопки с помощью XAML

цель этого пошагового руководства — научиться создавать анимированную кнопку для использования в приложении Windows Presentation Foundation (WPF). В этом пошаговом руководстве используются стили и шаблон для создания настраиваемого ресурса кнопки, который позволяет повторно использовать код и разделение логики кнопки из объявления кнопки. Это пошаговое руководство написано полностью в XAML (XAML).

В этом пошаговом руководстве описано, как создать приложение, введя или скопировав и вставляя XAML (XAML) в Visual Studio. Если вы предпочитаете использовать конструктор для создания того же приложения, см. раздел Создание кнопки с помощью Microsoft Expression Blend.

На следующем рисунке показаны готовые кнопки.

Создание основных кнопок

Начнем с создания нового проекта и добавления нескольких кнопок в окно.

Запустите среду Visual Studio.

Создайте новый проект WPF: В меню файл наведите указатель мыши на пункт создатьи выберите пункт Project. найдите шаблон приложения Windows (WPF) и присвойте проекту имя "аниматедбуттон". Это приведет к созданию каркаса для приложения.

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

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

Теперь, когда основные кнопки созданы, вы завершили работу в файле Window1. XAML. Остальная часть пошагового руководства посвящена файлу app. XAML, определяющему стили и шаблон для кнопок.

Задание основных свойств

Теперь давайте настроим некоторые свойства на этих кнопках, чтобы управлять внешним видом и макетом кнопки. Вместо того чтобы устанавливать свойства на кнопки по отдельности, вы будете использовать ресурсы для определения свойств кнопки для всего приложения. Ресурсы приложения концептуально похожи на внешние каскадные таблицы стилей (CSS) для веб-страниц. Тем не менее ресурсы являются гораздо более мощными, чем каскадные таблицы стилей (CSS), как вы увидите в конце этого пошагового руководства. Дополнительные сведения о ресурсах см. в разделе ресурсы XAML.

Определите блок Application. Resources: Откройте App. XAML и добавьте следующую выделенную разметку, если она еще не существует:

Область ресурсов определяется местом, где определяется ресурс. Определение ресурсов в Application.Resources файле App. XAML позволяет использовать ресурс из любого места в приложении. Дополнительные сведения об определении области ресурсов см. в разделе ресурсы XAML.

Создайте стиль и определите в нем основные значения свойств: Добавьте в блок следующую разметку . Эта разметка создает объект Style , который применяется ко всем кнопкам в приложении, присвоив параметрам Width для кнопок значение 90 и значение Margin 10.

TargetTypeСвойство указывает, что стиль применяется ко всем объектам типа Button . Каждый из Style них Setter задает другое значение свойства для. Таким образом, на этом этапе каждая кнопка в приложении имеет ширину 90 и поле, равное 10. Если нажать клавишу F5 для запуска приложения, появится следующее окно.

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

Задайте ресурсу значение свойства Style: Ресурсы обеспечивают простой способ повторного использования часто заданных объектов и значений. Особенно полезно определить сложные значения с помощью ресурсов, чтобы сделать код более модульным. Добавьте следующую выделенную разметку в App. XAML.

Непосредственно под Application.Resources блоком вы создали ресурс с именем «грайблуеградиентбруш». Этот ресурс определяет горизонтальный градиент. Этот ресурс можно использовать как значение свойства из любого места в приложении, включая внутри метода задания стиля кнопки для Background Свойства. Теперь все кнопки имеют Background значение свойства этого градиента.

Нажмите клавишу F5 для запуска приложения. Это должно выглядеть примерно так.

Создание шаблона, определяющего вид кнопки

В этом разделе вы создадите шаблон, который настраивает внешний вид (представление) кнопки. Кнопка презентации состоит из нескольких объектов, включая прямоугольники и другие компоненты, чтобы дать кнопке уникальный вид.

До сих пор Управление тем, как выглядят кнопки в приложении, было ограничено изменением свойств кнопки. Что делать, если вы хотите внести более коренные изменения в внешний вид кнопки? Шаблоны обеспечивают мощный контроль над представлением объекта. Поскольку шаблоны можно использовать в стилях, можно применить шаблон ко всем объектам, к которым применяется стиль (в этом пошаговом руководстве это кнопка).

Настройте шаблон: Так как элементы управления, такие как, имеют Template свойство, можно определить значение свойства шаблона так же, как и другие значения свойств, заданные в Style с помощью Setter . Добавьте следующую выделенную разметку в стиль кнопки.

Изменить представление кнопки: На этом этапе необходимо определить шаблон. Добавьте следующую выделенную разметку. Эта разметка определяет два Rectangle элемента с закругленными краями, за которыми следует DockPanel . DockPanelИспользуется для размещения ContentPresenter кнопки. ContentPresenterОтображает содержимое кнопки. В этом пошаговом руководстве содержимое является текстом ("Кнопка 1", "Кнопка 2", "Кнопка 3"). Все компоненты шаблона (прямоугольники и DockPanel ) размещаются внутри Grid .

Нажмите клавишу F5 для запуска приложения. Это должно выглядеть примерно так.

Добавьте глассеффект в шаблон: Далее вы добавите стекло. Сначала необходимо создать ресурсы, которые создают эффект прозрачного градиента. Добавьте эти ресурсы градиента в Application.Resources любом месте блока:

Эти ресурсы используются в качестве Fill для прямоугольника, который мы вставляем в Grid шаблон кнопки. Добавьте в шаблон следующую выделенную разметку.

Обратите внимание, что Opacity прямоугольник со x:Name свойством «гласскубе» имеет значение 0, поэтому при запуске образца прямоугольник с эффектом стекла не отображается сверху. Это связано с тем, что позже мы добавим триггеры к шаблону, когда пользователь взаимодействует с кнопкой. Тем не менее можно увидеть, как выглядит кнопка сейчас, изменив Opacity значение на 1 и запустив приложение. См. следующий рисунок. Прежде чем перейти к следующему шагу, измените Opacity обратно на 0.

Взаимодействие кнопки "создать"

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

Простой способ добавления интерактивности (нажатие кнопки мыши, выхода из мыши, щелчка и т. д.) заключается в определении триггеров в шаблоне или стиле. Чтобы создать объект Trigger , определите свойство "Condition", например: значение свойства кнопки IsMouseOver равно true . Затем определяются методы задания (Actions), которые выполняются, когда условие триггера имеет значение true.

Добавить триггеры шаблона: Добавьте выделенную разметку в шаблон.

Добавить триггеры свойств: Добавьте выделенную разметку в блок:

Нажмите клавишу F5, чтобы запустить приложение и увидеть результат при выполнении указателя мыши над кнопками.

Добавить триггер фокуса: Далее мы добавим несколько аналогичных методов задания, которые будут обработаны, когда кнопка будет иметь фокус (например, после того, как пользователь щелкнет его).

Нажмите клавишу F5, чтобы запустить приложение, и нажмите одну из кнопок. Обратите внимание, что кнопка остается выделенной после ее нажатия, так как она по-прежнему имеет фокус. Если щелкнуть другую кнопку, кнопка Создать получит фокус, а последний теряет ее.

Добавить анимацию для и : Далее мы добавим несколько анимаций к триггерам. Добавьте следующую разметку в любое место внутри ControlTemplate.Triggers блока.

Прозрачный прямоугольник сжимается при наведении указателя мыши на кнопку и возвращается к нормальному размеру, когда указатель покидает.

Существует две анимации, которые запускаются при наведении указателя мыши на кнопку ( MouseEnter событие вызывается). Эти анимации сжимают стеклянный прямоугольник вдоль осей X и Y. Обратите внимание на свойства DoubleAnimation элементов — Duration и By . DurationУказывает, что анимация выполняется в течение половины секунды и By указывает, что стекло сжимается на 10%.

Второй триггер события ( MouseLeave ) просто останавливает первый из них. Когда вы останавливаете Storyboard , все анимированные свойства возвращают значения по умолчанию. Таким образом, когда пользователь перемещает указатель мыши за пределы кнопки, кнопка возвращается к способу, который находился перед перемещением курсора по кнопке. Дополнительные сведения о анимациях см. в разделе Общие сведения об анимации.

Добавить анимацию при нажатии кнопки: Последним шагом является добавление триггера для, когда пользователь нажимает кнопку. Добавьте следующую разметку в ControlTemplate.Triggers любом месте блока:

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

Сводка

В этом пошаговом руководстве вы выполнили следующие упражнения:

StyleНацелен на тип объекта ( Button ).

Контролируемые основные свойства кнопок во всем приложении, Style использующих.

Созданные ресурсы, такие как градиенты, используемые для значений Style свойств методов задания.

Настройка вида кнопок во всем приложении путем применения шаблона к кнопкам.

Настраиваемое поведение кнопок в ответ на действия пользователя (например MouseEnter , MouseLeave , и Click ), которые включают эффекты анимации.