МИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
Анапский филиал «Московский государственный гуманитарный университет имени М.А. Шолохова»
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, посмотрите что будет. С помощью стилей, помимо внешнего облика элемента можно создавать сложнейшие анимации. Я показал вам лишь вершину айсберга, если вас эта тема заинтересовала, вы продолжите изучение, но уже по более фундаментальным источникам. Про стили можно так же прочитать тут