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

В этом пошаговом руководстве описывается процесс создания настраиваемой кнопки WPF с помощью Microsoft Expression Blend.

Важно!

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

На следующем рисунке показана пользовательская кнопка, которая создается в этом руководстве.

Преобразование фигуры в кнопку

В первой части этого пошагового руководства создается настраиваемый внешний вид настраиваемой кнопки. Для этого сначала выполняется преобразование прямоугольника в кнопку. Затем в шаблон кнопки добавляются дополнительные фигуры, образуя кнопку с более сложным внешним видом. Почему не нужно начать с обычной кнопки и потом настраивать ее? Так как у кнопки имеется встроенные функции, которые могу вам не понадобиться; для создания настраиваемых кнопок проще начинать с прямоугольника.

Создание нового проекта в Expression Blend

1. Запустите Expression Blend. (Щелкните Пуск, перейдите сначала в пункт Все программы, затем перейдите в Microsoft Expression и нажмите Microsoft Expression Blend.)

2. При необходимости максимально разверните окно приложения.

3. В меню Файл выберите пункт Создать проект.

4. Выберите Стандартное приложение (.exe).

5. Укажите имя проекта CustomButton и нажмите кнопку ОК.

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

Преобразование прямоугольника в кнопку

1. Задайте свойству «Window Background» значение «black»: выделите окно, щелкните Вкладку свойств и задайте для свойства Background значение Black.

   

2. Нарисуйте прямоугольник, примерно соответствующий по размеру кнопке в окне: Выберите прямоугольник на панели инструментов слева и перетащите этот прямоугольник в окно.

   

3. Выполните скругление углов прямоугольника: Перетащите контрольные точки прямоугольника или непосредственно задайте свойства RadiusX и RadiusY. Задайте для RadiusX и RadiusY значение 20.

   

4. Преобразование прямоугольника в кнопку: Выделите прямоугольник. В меню Инструменты щелкните пункт Создать кнопку.

   

5. Укажите область стиля/шаблона: откроется следующее диалоговое окно.

   

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

Изменение шаблона кнопки

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

Редактирование шаблона кнопки для изменения внешнего вида кнопки

1. Перейдите в представление редактирования шаблона: Для дополнительной настройки внешнего вида кнопки нужно изменить шаблон кнопки. Этот шаблон был создан при преобразовании прямоугольника в кнопку. Чтобы изменить шаблон кнопки, щелкните эту кнопку правой кнопкой мыши и выберите сначала пункт Изменить части элемента управления (шаблон), а затем Изменить шаблон.

   

   Обратите внимание, что в редакторе шаблонов кнопка теперь разделена на элементы Rectangle и ContentPresenter. Объект ContentPresenter используется для представления содержимого в пределах кнопки (например, строки «Кнопка»). И прямоугольник, и объект ContentPresenter располагаются внутри объекта.Grid.

   

2. Измените имена компонентов шаблона: Щелкните правой кнопкой мыши пункт «Прямоугольник» в списке компонентов шаблона, измените сначала имя объекта Rectangle с «[Rectangle]» на «outerRectangle», а затем имя компонента «[ContentPresenter]» на «myContentPresenter».

   

3. Измените прямоугольник так, чтобы внутри он стал пустым (например, как бублик): Выберите outerRectangle и задайте для параметра Fill значение «Прозрачный», а для StrokeThickness значение 5.

   

   Затем задайте для свойства Stroke в качестве значения цвет, который должен быть в шаблоне. Для этого щелкните небольшой белый квадрат, расположенный рядом с полем Stroke, выберите CustomExpression, а затем в диалоговом окне введите: {TemplateBinding Background}.

   

4. Создайте внутренний прямоугольник: Теперь создайте еще один прямоугольник (присвойте ему имя «innerRectangle») и разместите его симметрично внутри прямоугольника outerRectangle. Для выполнения этого может потребоваться увеличить масштаб кнопки в области редактирования.

   Примечание.

   Ваш прямоугольник может отличаться по виду от того, что представлен на рисунке (например, у него могут быть скругленные углы).

   

5. Поместите элемент «ContentPresenter» сверху: на этом этапе может стать не видимым текст «Кнопка». Если это так, то это произошло из-за того, что компонент innerRectangle оказался сверху компонента myContentPresenter. Чтобы устранить эту проблему, перетащите компонент myContentPresenter под компонент innerRectangle. Измените положение прямоугольников и компонента myContentPresenter, чтобы получилось так, как на рисунке ниже.

   Примечание.

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

   

6. Измените внешний вид компонента «innerRectangle»: задайте для параметров RadiusX, RadiusY и StrokeThickness значение 20. В дополнение к этому, задайте для свойства Fill значение, соответствующее фону шаблона, с помощью специального выражения «{TemplateBinding Background}», а свойству Stroke присвойте значение «transparent». Обратите внимание, что настройки для свойств Fill и Stroke компонента innerRectangle являются противоположными по сравнению с настройками аналогичных параметров компонента outerRectangle.

   

7. Добавьте сверху «стеклянный» слой: последний этап настройки внешнего вида кнопки заключается в добавлении сверху «стеклянного» слоя. Этот «стеклянный» слой состоит из третьего прямоугольника. Поскольку «стекло» должно охватывать всю кнопку, размеры «стеклянного» прямоугольника такие же, как и у компонента outerRectangle. Таким образом, этот прямоугольник создается простым копированием outerRectangle. Выделите компонент outerRectangle и с помощью комбинаций клавиш «CTRL+C» и «CTRL+V» сделайте копию. Присвойте этому новому прямоугольнику имя «glassCube».

8. Измените положение «glassCube» при необходимости: компонент glassCube нужно перетащить в правильное положение, чтобы он охватывал всю кнопку, если это не так.

9. Задайте для «glassCube» форму, немного отличающуюся от «outerRectangle»: измените свойсва компонента glassCube. Задайте для начала свойствам RadiusX и RadiusY значение «10», а для свойства StrokeThickness значение «2».

   

10. Сделайте «glassCube» похожим на стекло: настройте Fill так, чтобы получилось сходство со стеклом, используя линейный градиент с непрозрачностью 75% и с переходом между «белым» и «прозрачным» цветовыми оттенками через 6 равномерно распределенных интервалов. Для градиента нужно задать следующие ступени:

    • Ограничение градиента 1: белый цвет со значением альфа-фактора 75%

    • Ограничение градиента 2: прозрачный

    • Ограничение градиента 3: белый цвет со значением альфа-фактора 75%

    • Ограничение градиента 4: прозрачный

    • Ограничение градиента 5: белый цвет со значением альфа-фактора 75%

    • Ограничение градиента 6: прозрачный

    При этом создается вид «волнистого» стекла.

    

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

    

Настройка поведения кнопки

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

Настройка триггеров свойств

1. Создайте новый триггер свойства: выберите glassCube и щелкните + Свойство в панели Триггеры (см. рисунок, который приводится в следующем шаге). При этом создается триггер свойства с настройками по умолчанию.

2. Задайте триггеру для использования свойство «IsMouseOver»: измените свойство на IsMouseOver. В результате этого триггер свойства будет срабатывать, когда свойство IsMouseOver будет иметь значение true (при наведении пользователем указателя мыши на кнопку).

   

3. При срабатывании по свойству «IsMouseOver» триггер должен задавать параметру непрозрачности значение 100% для компонента «glassCube»: Обратите внимание, что задан параметр Включить запись триггера (см. рисунок выше). Это означает, что любые изменения значений свойств glassCube при включенной записи выполнятся, когда IsMouseOver имеет значение true. При включенной записи измените значение свойства Opacity компонента glassCube на 100%.

   

   Таким образом вы создали первый триггер свойства. Обратите внимание, что на панели триггеров в редакторе зафиксировано изменение Opacity на 100 %.

   

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

4. Изменение значения параметра «штрих» при срабатывании триггера по условию «IsMouseOver»: давайте выполним привязку других действий к триггеру IsMouseOver. При продолжающейся записи переключите выделение с компонента glassCube на outerRectangle. Затем задайте для свойства Stroke компонента outerRectangle значение с помощью следующего специального выражения: «{DynamicResource {x:Static SystemColors.HighlightBrushKey}}». При этом для Stroke задается типичный цвет выделения, используемый кнопками. Нажмите клавишу F5, чтобы посмотреть эффект от наведения указателя мыши на кнопку.

   

5. Включение эффекта «размытый текст» при срабатывании триггера по условию «IsMouseOver»: давайте выполним привязку еще одного действия к триггеру свойства IsMouseOver. Сделаем размытие содержимого кнопки при отображении верхнего «стеклянного» слоя. Для этого можно использовать размытие BitmapEffect к объекту ContentPresenter (myContentPresenter).

   

   Примечание.

   Чтобы вернуть первоначальный вид панели свойств, который был до выполнения поиска для BitmapEffect, нужно удалить текст из поискового поля.

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

6. Создание триггера свойства для свойства «IsFocused»: используя ту же процедуру, что и для IsMouseOver (см. первый шаг в этом разделе), создайте другой триггер свойства для свойства IsFocused. При Включенной записи триггера добавьте в триггер следующие действия:

   • в компоненте glassCube свойству Opacity задается значение 100%.

   • в компоненте outerRectangle свойству Stroke присваивается значение с помощью следующего специального выражения: {DynamicResource {x:Static SystemColors.HighlightBrushKey}}.

И на последнем шаге этого пошагового руководства мы добавим к кнопке анимации. Эти анимации будут активироваться разными событиями, в частности событиями MouseEnter и Click.

Использование триггеров событий и анимаций для добавления интерактивности

1. Создайте триггер события для свойства «MouseEnter»: добавьте новый триггер события и выберите MouseEnter в качестве используемого в нем события.

   

2. Создайте временную шкалу анимации: далее привяжите временная шкалу анимации к событию MouseEnter.

   

   После нажатия кнопки OK для создания новой временной шкалы открывается Панель временной шкалы и на панели конструктора отображается «Запись временной шкалы включена». Это означает, что можно начать запись изменений свойств на временной шкале (реализовать анимацию для изменений свойств).

   Примечание.

   Для просмотра экрана может потребоваться изменить размер окна и (или) панелей.

   

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

   

4. Уменьшите размер компонента «glassCube» на этом ключевой кадре: на выбранном втором ключевом кадре уменьшите размер компонента glassCube до 90% его полного размера с помощью элемента управления Изменение размера.

   

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

5. Создайте другой триггер события и привяжите к нему другую анимацию: давайте добавим еще одну анимацию. Используйте аналогичную процедуру, которая использовалась при создании предыдущей анимации для триггера события:

   1. Создайте триггер события на основе события Click.

   2. Привяжите новую временную шкалу к событию Click.

      

   3. Для этой временной шкалы создайте два ключевых кадра: один в момент времени 0,0 секунды, а второй — в 0,3 секунды.

   4. При выделенном ключевом кадре для момента времени 0,3 секунды установите параметр Угол преобразования вращения на 360 градусов.

      

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

Заключение

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

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

Следует помнить, что при настройке шаблона нужно задавать для свойства Fill компонента innerRectangle и для свойства Stroke компонента outerRectangle значение, соответствующее фону шаблона ({TemplateBinding Background}). В результате этого заданный фон будет использоваться для соответствующих свойств при настройке фонового цвета отдельных кнопок. Попробуйте теперь изменить фон. На следующем рисунке используются различные градиенты. Таким образом, не смотря на то, что шаблон подходит для общей настройки таких элементов управления, как кнопка, внешний вид элементов управления с шаблонами все равно можно изменять, чтобы они отличались друг от друга.

В заключение повторим, что в процессе настройки шаблона кнопки вы узнали, как выполнить следующие действия в Microsoft Expression Blend:

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

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

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

• Создание анимаций.

• Другие действия: создание градиентов, добавление эффектов для точечных рисунков, использование преобразований и задание основных свойств объектов.

См. также

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