Пошаговое руководство. Создание кнопки с помощью 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 и нажмите клавишу OK.

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

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

1. Задайте для свойства "Фон окна" черное значение: выберите окно, щелкните вкладку "Свойства"и задайте для свойства Background значение Black.

   

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

   

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

   

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

   

5. Укажите область действия стиля или шаблона: появится диалоговое окно, как показано ниже.

   

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

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

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

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

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

   

   Обратите внимание, что кнопка в редакторе шаблонов разделена на Rectangle и ContentPresenter. ContentPresenter используется для представления содержимого в кнопке (например, строки "Кнопка"). Прямоугольник и ContentPresenter расположены внутри Grid.

   

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

   

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

   

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

   

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

   Заметка

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

   

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

   Заметка

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

   

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

   

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

8. При необходимости переместите glassCube: Если glassCube еще не расположен так, чтобы он охватывал всю кнопку, перетащите его в положение.

9. Придать glassCube слегка отличную форму от внешнего прямоугольника. Изменить свойства glassCube. Начните с изменения свойств RadiusX и RadiusY на 10 и StrokeThickness на 2.

   

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

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

    • Точка градиента 2: прозрачная

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

    • Точка градиента 4: прозрачность

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

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

    Это создает "волнистый" вид стекла.

    

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

    

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

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

Настроить триггеры свойств

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

2. Make IsMouseOver свойство, используемое триггером: Измените свойство на IsMouseOver. Это активирует триггер свойства, когда свойство IsMouseOver становится true (когда пользователь указывает мышью на кнопку).

   

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

   

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

   

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

4. IsMouseOver вызывает изменение значения штриха: Давайте свяжите некоторые другие действия с триггером IsMouseOver. Пока запись продолжается, переключите выбор из glassCube на внешний прямоугольник. Затем задайте параметр 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.

   

   После нажатия ОК для создания новой временной шкалы появляется панель временной шкалы , а на панели конструктора видно "Запись временной шкалы включена". Это означает, что мы можем начать запись изменений свойств на временной шкале (анимировать изменения свойств).

   Заметка

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

   

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

   

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

   

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

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

   1. Создайте триггер события с помощью события Click.

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

      

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

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

      

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

Заключение

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

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

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

кнопки

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

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

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

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

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

• Прочее: создание градиентов, добавление BitmapEffects, использование преобразований и задание основных свойств объектов.

См. также

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