Часть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. В разметке ниже это сделано:

<StackPanel Orientation="Horizontal" Margin="4" Background="{StaticResource linearPanelBrush}" > <Button ToolTip="Открыть" Margin="4" Background="Transparent" BorderBrush="Transparent" > <Image Source="Icons\open.png" ></Image> </Button> <Button ToolTip="Копировать" Margin="4" Background="Transparent" BorderBrush="Transparent" > <Image Source="Icons\copy.png" ></Image> </Button> <Button Margin="4" ToolTip="Очистить" Background="Transparent" BorderBrush="Transparent" > <Image Source="Icons\clear.png" ></Image> </Button> <Button Margin="4" ToolTip="Вставить" Background="Transparent" BorderBrush="Transparent" > <Image Source="Icons\paste.png" ></Image> </Button> </StackPanel>

Надеюсь, у вас не составит труда понять того что изменено в разметке, и как я говорил, во всех кнопках в вышеприведённой разметке свойство Background установлено в Transparent. Внеся эти изменения в разметку окна, мы устранили тот белый фон, который нам мешался. Итог можно посмотреть на рис.2.

Ads by Radio CanyonAd Options

Рисунок 2. Меню приложения.

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

<Window.Resources> <Style TargetType="Button" > <Setter Property="Margin" Value="4" ></Setter> <Setter Property="Background" Value="Transparent" ></Setter> <Setter Property="BorderBrush" Value="Transparent" ></Setter> </Style>....

Как видите, мы создали стиль, где в TargetType указали Button. Это значит, что данный стиль автоматически применится ко всем кнопкам в окне. Далее в стиль у нас входит 3 Setter’a, каждый Setter отвечает за одно свойство у пользовательского компонента. Так, например первый Setter устанавливает в свойство Margin значение равное 4px. Не трудно догадаться, что свойство, за которое отвечает Setter устанавливается в Property, где нужно указать название свойства, а значение свойства устанавливается в Value. Таким образом, в данном стиле мы для всех кнопок на форме установили Margin=4px, Background=Transparent и BorderBrush=Transparent. Теперь мы можем удалить из кнопок тот код где мы вручную устанавливали эти свойства. После внесённых изменений Xaml разметка кнопок должна выглядеть так:

<Button ToolTip="Открыть" > <Image Source="Icons\open.png" ></Image> </Button> <Button ToolTip="Копировать" > <Image Source="Icons\copy.png" ></Image> </Button> <Button Margin="4" ToolTip="Очистить" > <Image Source="Icons\clear.png" ></Image> </Button> <Button Margin="4" ToolTip="Вставить" > <Image Source="Icons\paste.png" ></Image> </Button>

Как я и говорил, я удалил тот лишний код, который мы писали, чтобы задать свойства Margin, Background, BorderBrush. В данный момент кнопки сами должны подхватить тот стиль, который мы определили вверху окна.
Если вы помните, у нас в правом углу формы находилась кнопка «Ок», она как и положено ей применила тот стиль, который мы задали для всех кнопок в окне. Но допустим, мы хотим чтобы та кнопка оставалась той прежней серой стандартной кнопкой, как же быть? Тут нет ничего сложного. У любого пользовательского элемента имеется свойство Style, и если мы не хотим чтобы кнопка наследовала стиль, то нужно явно указать:

<Button Style="{x:Null}" > Ok </Button>

Вот и всё, теперь наша кнопка приняла опять своё стандартное обличие.
Стилям, так же как и у ресурсам можно задавать свои имена, а потом по этим именам устанавливать стили для конкретных элементов. Таким образом, далеко не всегда необходимо задавать свойство TargetType у стиля.
В начале статьи я сказал то, что стили и ресурсы связаны друг с другом, так и есть, сейчас мы в этом убедимся. У нас создан ресурс для закраски панели градиентной заливкой, допустим, мы хотим чтобы кнопка «Ок» тоже была закрашена таким цветом, плюс у неё должны определены и другие свойства. В принципе, для такой задачи можно было бы обойтись и без создания отдельного стиля, но для примера мы создадим отдельный стиль для данной кнопки, где в качестве Background’a укажем тот ресурс. Xaml разметка находится ниже:

<Style x:Key="okButtonStyle" TargetType="Button" > <Setter Property="BorderBrush" Value="Black" ></Setter> <Setter Property="BorderThickness" Value="1" ></Setter> <Setter Property="Background" Value="{StaticResource linearPanelBrush}" ></Setter> </Style>

Данный стиль необходимо определить после ресурса именем linearPanelBrush. Сначала мы даём имя своему стилю, после этого задаём тип элемента, к которому этот стиль будет применяться. Ну и в Setter’ах задаём свойства, которые данный стиль должен менять у элемента, к которому стиль будет применяться. Обратите внимание как я задаю свойство Background, я беру его из соответствующего ресурса. Отлично, стиль задан, теперь нужно применить данный стиль к кнопке «Ок», для этого нужно явно указать в свойстве Style объекта название стиля. Выглядеть это будет так:
Ok
В результате кнопка примет наш созданный стиль. На рис.3.можно увидеть результат. Получилось, возможно, не слишком красиво, но задача была показать вам как работать со стилями.

Рисунок 3. Кнопка с применением стиля.

Помимо задания свойств в Setter’ax через стили можно назначить реакцию на события (Triggers). Например, если добавить в только что созданный стиль такую разметку, то кнопка будет реагировать на наведение мыши

<Style.Triggers> <Trigger Property="IsMouseOver" Value="True" > <Setter Property="Foreground" Value="White" ></Setter> </Trigger> </Style.Triggers>

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

<Style.Triggers><EventTrigger RoutedEvent="Mouse.MouseEnter" > <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation AutoReverse="True" Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers>

Продолжительность анимации устанавливается в свойстве Duration. Здесь три числовых значения, где последняя цифра отвечает за секунды. Opacity – это свойство многих объектов, которое отвечает за степень прозрачности. Установив его в 0, элемент исчезнет. Кстати, попробуйте уберите AutoReverse или установите его в false, посмотрите что будет.
С помощью стилей, помимо внешнего облика элемента можно создавать сложнейшие анимации. Я показал вам лишь вершину айсберга, если вас эта тема заинтересовала, вы продолжите изучение, но уже по более фундаментальным источникам.
Про стили можно так же прочитать тут