Как сделать убегающую кнопку в visual studio
Обновлено: 06.07.2024
цель этого пошагового руководства — научиться создавать анимированную кнопку для использования в приложении Windows Presentation Foundation (WPF). В этом пошаговом руководстве используются стили и шаблон для создания настраиваемого ресурса кнопки, который позволяет повторно использовать код и разделение логики кнопки из объявления кнопки. Это пошаговое руководство написано полностью в Язык XAML .
В этом пошаговом руководстве описаны шаги по созданию приложения путем ввода или копирования и вставляется Язык XAML в Visual Studio. Если вы предпочитаете использовать конструктор для создания того же приложения, см. раздел Создание кнопки с помощью Microsoft Expression Blend.
На следующем рисунке показаны готовые кнопки.
Создание основных кнопок
Начнем с создания нового проекта и добавления нескольких кнопок в окно.
Создание нового проекта WPF и добавление в него кнопок
Запустите среду Visual Studio.
Создайте новый проект WPF: В меню файл наведите указатель мыши на пункт создать и выберите пункт Project. найдите шаблон приложения Windows (WPF) и присвойте проекту имя "аниматедбуттон". Это приведет к созданию каркаса для приложения.
Добавить основные кнопки по умолчанию: Все файлы, необходимые для этого пошагового руководства, предоставляются шаблоном. Откройте файл Window1. XAML, дважды щелкнув его в обозреватель решений. По умолчанию Grid в Window1. XAML присутствует элемент. Удалите Grid элемент и добавьте на страницу несколько кнопок Язык XAML , введя или скопировав и вставляя следующий выделенный код в Window1. XAML:
Нажмите клавишу F5, чтобы запустить приложение. Вы увидите набор кнопок, которые выглядят как на следующем рисунке.
Теперь, когда основные кнопки созданы, вы завершили работу в файле Window1. XAML. Остальная часть пошагового руководства посвящена файлу app. XAML, определяющему стили и шаблон для кнопок.
Задание основных свойств
Теперь давайте настроим некоторые свойства на этих кнопках, чтобы управлять внешним видом и макетом кнопки. Вместо того чтобы устанавливать свойства на кнопки по отдельности, вы будете использовать ресурсы для определения свойств кнопки для всего приложения. Ресурсы приложения концептуально похожи на внешние каскадные таблицы стилей (CSS) для веб-страниц. Тем не менее ресурсы являются гораздо более мощными, чем каскадные таблицы стилей (CSS), как вы увидите в конце этого пошагового руководства. Дополнительные сведения о ресурсах см. в разделе ресурсы XAML.
Использование стилей для задания основных свойств кнопок
Определите блок Application. Resources: Откройте App. XAML и добавьте следующую выделенную разметку, если она еще не существует:
Область ресурсов определяется местом, где определяется ресурс. Определение ресурсов в Application.Resources файле App. XAML позволяет использовать ресурс из любого места в приложении. Дополнительные сведения об определении области ресурсов см. в разделе ресурсы XAML.
Создайте стиль и определите в нем основные значения свойств: Добавьте в блок следующую разметку Application.Resources . Эта разметка создает объект Style , который применяется ко всем кнопкам в приложении, присвоив параметрам для Width кнопок значение 90 и значение Margin 10.
TargetTypeСвойство указывает, что стиль применяется ко всем объектам типа Button . Каждый Setter из них задает другое значение свойства для Style . Таким образом, на этом этапе каждая кнопка в приложении имеет ширину 90 и поле, равное 10. Если нажать клавишу F5 для запуска приложения, появится следующее окно.
С помощью стилей можно выполнять множество других задач, в том числе различные способы точной настройки объектов, указания сложных значений свойств и даже использования стилей в качестве входных данных для других стилей. Более подробную информацию см. в разделе Стилизация и использование шаблонов.
Задайте ресурсу значение свойства Style: Ресурсы обеспечивают простой способ повторного использования часто заданных объектов и значений. Особенно полезно определить сложные значения с помощью ресурсов, чтобы сделать код более модульным. Добавьте следующую выделенную разметку в App. XAML.
Непосредственно под Application.Resources блоком вы создали ресурс с именем «грайблуеградиентбруш». Этот ресурс определяет горизонтальный градиент. Этот ресурс можно использовать как значение свойства из любого места в приложении, включая внутри метода задания стиля кнопки для Background Свойства. Теперь все кнопки имеют Background значение свойства этого градиента.
Нажмите клавишу F5 для запуска приложения. Это должно выглядеть примерно так.
Создание шаблона, определяющего вид кнопки
В этом разделе вы создадите шаблон, который настраивает внешний вид (представление) кнопки. Кнопка презентации состоит из нескольких объектов, включая прямоугольники и другие компоненты, чтобы дать кнопке уникальный вид.
До сих пор Управление тем, как выглядят кнопки в приложении, было ограничено изменением свойств кнопки. Что делать, если вы хотите внести более коренные изменения в внешний вид кнопки? Шаблоны обеспечивают мощный контроль над представлением объекта. Поскольку шаблоны можно использовать в стилях, можно применить шаблон ко всем объектам, к которым применяется стиль (в этом пошаговом руководстве это кнопка).
Использование шаблона для определения вида кнопки
Настройте шаблон: Так как элементы управления, такие как Button 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.
Создание интерактивной активности кнопки
Добавить триггеры шаблона: Добавьте выделенную разметку в шаблон.
Добавить триггеры свойств: Добавьте выделенную разметку в ControlTemplate.Triggers блок:
Нажмите клавишу F5, чтобы запустить приложение и увидеть результат при выполнении указателя мыши над кнопками.
Добавить триггер фокуса: Далее мы добавим несколько аналогичных методов задания, которые будут обработаны, когда кнопка будет иметь фокус (например, после того, как пользователь щелкнет его).
Нажмите клавишу F5, чтобы запустить приложение, и нажмите одну из кнопок. Обратите внимание, что кнопка остается выделенной после ее нажатия, так как она по-прежнему имеет фокус. Если щелкнуть другую кнопку, кнопка Создать получит фокус, а последний теряет ее.
Добавить анимацию для MouseEnter и MouseLeave : Далее мы добавим несколько анимаций к триггерам. Добавьте следующую разметку в любое место внутри ControlTemplate.Triggers блока.
Прозрачный прямоугольник сжимается при наведении указателя мыши на кнопку и возвращается к нормальному размеру, когда указатель покидает.
Существует две анимации, которые запускаются при наведении указателя мыши на кнопку ( MouseEnter событие вызывается). Эти анимации сжимают стеклянный прямоугольник вдоль осей X и Y. Обратите внимание на свойства DoubleAnimation элементов — Duration и By . DurationУказывает, что анимация выполняется в течение половины секунды и By указывает, что стекло сжимается на 10%.
Второй триггер события ( MouseLeave ) просто останавливает первый из них. Когда вы останавливаете Storyboard , все анимированные свойства возвращают значения по умолчанию. Таким образом, когда пользователь перемещает указатель мыши за пределы кнопки, кнопка возвращается к способу, который находился перед перемещением курсора по кнопке. Дополнительные сведения о анимациях см. в разделе Общие сведения об анимации.
Добавить анимацию при нажатии кнопки: Последним шагом является добавление триггера для, когда пользователь нажимает кнопку. Добавьте следующую разметку в любом месте ControlTemplate.Triggers блока:
Нажмите клавишу F5, чтобы запустить приложение, и нажмите одну из кнопок. При нажатии кнопки прозрачный прямоугольник вращается вокруг.
Сводка
В этом пошаговом руководстве вы выполнили следующие упражнения:
Нацелен на Style тип объекта ( Button ).
Контролируемые основные свойства кнопок во всем приложении, использующих Style .
Созданные ресурсы, такие как градиенты, используемые для значений свойств Style методов задания.
Настройка вида кнопок во всем приложении путем применения шаблона к кнопкам.
Настраиваемое поведение кнопок в ответ на действия пользователя (например,, MouseEnter MouseLeave и Click ), которые включают эффекты анимации.
Читайте также: