Часть4. Стили, триггеры и анимация
МИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
Анапский филиал «Московский государственный гуманитарный университет имени М.А. Шолохова»
http://www.vr-online.ru/blog/osvaivaem-wpf-vmeste-chast3-ispolzuem-resursy-i-kisti-brushes-6778
Предмет:Устройство и функционирование информационной системы
Практическая работа №5. Работа с WPF.
Тема: Знакомство с WPF.
Цель занятия: приобретение первичных навыков признакомстве с WPF в VS 2013 на C#.
Максимальное время выполнения задания: 4 часа.
Теория. Общие сведения о WPF
В предыдущей части мы познакомились с ресурсами, которые тесно взаимосвязаны со стилями. Стили используются для придания пользовательскому элементу оригинального внешнего вида. К тому же, стили можно легко переносить из приложения в приложение.
Порядок выполнения работы
Создаём WPF приложение.
Примечание: во всех скриншотах должна присутствовать фамилия исполнителя, дабы другие не смогли воспользоваться вашим отчетом!!!
Часть4. Стили, триггеры и анимация.
Откроем наше приложение, с которым мы работаем на протяжении двух работ. Эта работа так же будет направлена на совершенствование нашего текстового редактора.
Если присмотреться к главному меню приложения, то мы увидим пространство на заднем фоне кнопок окрашено в белый цвет, что сильно контрастирует с линейной заливкой панели, которую мы выполнили в предыдущей части моих статей. На рис.1. отображён данный факт.
Рисунок 1. Белый фон вокруг кнопок.
Было бы здорово, если фон вокруг картинок в кнопках был таким же как и фон у панели, это внесло бы некоторую гармонию в меню, и устранило диссонанс который сейчас имеется. Сделать это просто, нужно в свойство Background у кнопок указать прозрачный цвет, т.е Transparent. В разметке ниже это сделано:
Надеюсь, у вас не составит труда понять того что изменено в разметке, и как я говорил, во всех кнопках в вышеприведённой разметке свойство Background установлено в Transparent. Внеся эти изменения в разметку окна, мы устранили тот белый фон, который нам мешался. Итог можно посмотреть на рис.2.
Ads by Radio CanyonAd Options
Рисунок 2. Меню приложения.
Наверняка, вы заметили, что у пяти кнопок задаются схожие параметры: Margin, Backgroud, BorderBrush. Было бы хорошо, если кнопки сами узнали какие параметры им необходимо для себя установить. Для этих целей и служат стили.
Стили создаются в том же месте, где и ресурсы, т.е в . Вставим следующую разметку:
Как видите, мы создали стиль, где в TargetType указали Button. Это значит, что данный стиль автоматически применится ко всем кнопкам в окне. Далее в стиль у нас входит 3 Setter’a, каждый Setter отвечает за одно свойство у пользовательского компонента. Так, например первый Setter устанавливает в свойство Margin значение равное 4px. Не трудно догадаться, что свойство, за которое отвечает Setter устанавливается в Property, где нужно указать название свойства, а значение свойства устанавливается в Value. Таким образом, в данном стиле мы для всех кнопок на форме установили Margin=4px, Background=Transparent и BorderBrush=Transparent. Теперь мы можем удалить из кнопок тот код где мы вручную устанавливали эти свойства. После внесённых изменений Xaml разметка кнопок должна выглядеть так:
Как я и говорил, я удалил тот лишний код, который мы писали, чтобы задать свойства Margin, Background, BorderBrush. В данный момент кнопки сами должны подхватить тот стиль, который мы определили вверху окна.
Если вы помните, у нас в правом углу формы находилась кнопка «Ок», она как и положено ей применила тот стиль, который мы задали для всех кнопок в окне. Но допустим, мы хотим чтобы та кнопка оставалась той прежней серой стандартной кнопкой, как же быть? Тут нет ничего сложного. У любого пользовательского элемента имеется свойство Style, и если мы не хотим чтобы кнопка наследовала стиль, то нужно явно указать:
Вот и всё, теперь наша кнопка приняла опять своё стандартное обличие.
Стилям, так же как и у ресурсам можно задавать свои имена, а потом по этим именам устанавливать стили для конкретных элементов. Таким образом, далеко не всегда необходимо задавать свойство TargetType у стиля.
В начале статьи я сказал то, что стили и ресурсы связаны друг с другом, так и есть, сейчас мы в этом убедимся. У нас создан ресурс для закраски панели градиентной заливкой, допустим, мы хотим чтобы кнопка «Ок» тоже была закрашена таким цветом, плюс у неё должны определены и другие свойства. В принципе, для такой задачи можно было бы обойтись и без создания отдельного стиля, но для примера мы создадим отдельный стиль для данной кнопки, где в качестве Background’a укажем тот ресурс. Xaml разметка находится ниже:
Данный стиль необходимо определить после ресурса именем linearPanelBrush. Сначала мы даём имя своему стилю, после этого задаём тип элемента, к которому этот стиль будет применяться. Ну и в Setter’ах задаём свойства, которые данный стиль должен менять у элемента, к которому стиль будет применяться. Обратите внимание как я задаю свойство Background, я беру его из соответствующего ресурса. Отлично, стиль задан, теперь нужно применить данный стиль к кнопке «Ок», для этого нужно явно указать в свойстве Style объекта название стиля. Выглядеть это будет так:
Ok
В результате кнопка примет наш созданный стиль. На рис.3.можно увидеть результат. Получилось, возможно, не слишком красиво, но задача была показать вам как работать со стилями.
Рисунок 3. Кнопка с применением стиля.
Помимо задания свойств в Setter’ax через стили можно назначить реакцию на события (Triggers). Например, если добавить в только что созданный стиль такую разметку, то кнопка будет реагировать на наведение мыши
Кроме того, стили позволяют выполнять анимированную реакцию на события. Добавив следующую разметку в первый стиль, можно реализовать медленное исчезание кнопки на протяжении одной секунды.
Продолжительность анимации устанавливается в свойстве Duration. Здесь три числовых значения, где последняя цифра отвечает за секунды. Opacity – это свойство многих объектов, которое отвечает за степень прозрачности. Установив его в 0, элемент исчезнет. Кстати, попробуйте уберите AutoReverse или установите его в false, посмотрите что будет.
С помощью стилей, помимо внешнего облика элемента можно создавать сложнейшие анимации. Я показал вам лишь вершину айсберга, если вас эта тема заинтересовала, вы продолжите изучение, но уже по более фундаментальным источникам.
Про стили можно так же прочитать тут