Элементы управления стилем (Styling Controls) в Silverlight
ОГЛАВЛЕНИЕ
Я постараюсь сфокусироваться на трех чаще всего встречающихся:
- Использование элементов управления как есть - при этом немного модифицируя их внешний вид установив стили внутри XAML (либо через окно свойств в Visual Studio или Blend)
- Создание многократно используемого объекта Style для предоставления шаблонного вида элементам управления, которые выполняют одинаковые функции (к примеру, все ярлыки выглядят одинаково)
- Создание шаблонов для кардинального изменения внешнего вида элементов управленияс сохранением при этом их функциональности.
Настройка стилей внутри тега (inline)
Простейшим и, скорее всего, наиболее распространенным способом установки стиля является установка в Xaml, выполняя это в Visual Studio 2008 (прямо в разметке) либо в Blend (при помощи закладки свойств). Чтобы снизить риск встречи с проблемами на нашем пути, мы начнем с созданного в статье пропривязку данных приложение, которое вы можете загрузить тут.
Откройте проект в Blend и исследуйте элементы управления - вы увидите табличную сетку с двумя колонками и шестью строками. Левая часть имеет пять элементов TextBlocks и кнопку, а правая часть имеет два TextBlocks, один ListBox, CheckBox и один TextBox. Откройте этот же проект в Visual Studio и исследуйте разметку - элементы управления не полностью оформлены (за исключением выравнивания) , как это показано на рисунке 6-1
Рисунок 6-1. Проект в Blend и Visual Studio
Я обвел TitlePrompt в Blend (Objects, Timeline и Properties), чтобы доказать, что не так много свойств было настроено. Это можно увидеть в Xaml из Visual Studio 2008. Вам может понадобиться оформить каждому ярлыку свой шрифт, к примеру, Comic Sans MS с размером 24. Вы можете выполнить это явно в разметке либо Blend, либо Visual Studio, но для данной статьи (и для реального приложения) я буду редактировать Xaml и Code в Visual Studio, а также я буду использовать Blend для редактирования непосредственно на поверхности разработки и при помощи окна свойств.
Для того, чтобы отредактировать Xaml вручную, начните вписывать необходимые вам значения - Intellisense поможет вам с синтаксисом, как это показано на рисунке 6-2
Рисунок 6-2. Установка размера шрифта в Xaml
Результатом будет мгновенное отображение в окне режима дизайнера Visual Studio, как показано на рисунке 6-3
Рисунок 6-3. Добавление стилей к Xaml вручную
Настройка стилей в качестве свойств в Blend
В качестве альтернативы настройки стилей в Xaml попробуйте сохранить файл и переключиться в Blend. После того как вы ответите "Yes" на запрос об обновлении проекта, щелкните по AuthorPrompt в закладке объектов и шаблонов (Objects and Timeline) и затем откройте закладку свойств, и оттуда в закладке Text установите шрифт Comic Sans MS с размером 24. Вы сразу увидите изменения, как это показано на рисунке 6-4
Рисунок 6-4. Настройка стилей в качестве свойств в Blend
Xaml также обновлен, как вы уже могли бы заметить в режиме разделения либо в режиме Xaml в Blend и Visual Studio 2008,
<TextBlock x:Name="AuthorPrompt" Text="Author: "
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Grid.Row="1" Grid.Column="0"
FontFamily="Comic Sans MS"
FontSize="24" />
Установка стилей в качестве ресурсов (Resources)
В лучшем случае вам понадобится присвоить всем ярлыкам шрифт Comic Sans MS с размером в 24, и они должны быть все горизонтально выровнены к правому краю (с отступом в 10), выровнены по нижнему краю и быть синего цвета.
Установка всего этого вручную может быть достаточно утомительным занятием, но вы с легкостью можете создать ресурс стиля (Style Resource), назвать его как вам угодно, а затем применить все эти элементы управления. Это позволяет вам создавать шаблонный внешний вид, при этом весь стиль будет храниться в единственном месте, где вы сможете производить изменения.
Восстановление свойств
Первым шагом будет восстановление стандартного стиля для всех ярлыков. Заново откройте проект в Blend и, зажав клавишу control, щелкните по пяти элементам управления в панели Objects and Timelines , тем самым подсветив все. Обратите внимание на то, что в окне свойств напротив горизонтального и вертикального выравнивания стоят белые точки. Это означает, что данные значения были настроены - нажмите на точку, и появится меню, позволяющее вам восстановить данные свойства, как это показано на рисунке 6-5
Рисунок 6-5. Восстановление свойств
Как только все белые точки будут убраны нажмите на каждый ярлык по отдельности и восстановите его индивидуальные свойства (в нашем случае только у TitlePrompt и AuthorPrompt будет восстановлено свойство Text).
Бегло рассмотрите Xaml - TextBlocks ярлыков теперь имеют свои стандартные свойства Text и свое расположение в табличной сетке,
<TextBlock x:Name="TitlePrompt" Text="Title: " Grid.Row="0" Grid.Column="0"/>
<TextBlock x:Name="AuthorPrompt" Text="Author: " Grid.Row="1" Grid.Column="0" />
<TextBlock x:Name="ChapterPrompt" Text="Chapters: " Grid.Row="2" Grid.Column="0" />
<TextBlock x:Name="MultipleAuthorPrompt" Text="Multiple authors?: " Grid.Row="3" Grid.Column="0" />
<TextBlock x:Name="QOHPrompt" Text="Quantity On Hand: " Grid.Row="4" Grid.Column="0" />
Создание ресурса стиля (Style Resource)
Давайте создадим стиль, который может быть применен ко всем ярлыкам. Начните в Blend с выбора Object > Edit Style > Create Empty. Это вызовет диалоговое окно создания стиля (Create Style). Вы можете расположить ваш стиль в текущем документе Xaml, но это ограничит размах вашего стиля в пределах данного документа. Обычно предпочитается расположение нового ресурса стиля в App.xaml, тем самым делая его доступным во всем приложении. Вы можете сделать это, выбрав кнопку с зависимой фиксацией Application. Дайте вашему стилю название (Prompt), как это показано на рисунке 6-6
Рисунок 6-6. Создание стиля подсказки для приложения
Обратите внимание на то, что закладки появляются в верхней части окна режима дизайнера, как это показано на рисунке 6-7
Рисунок 6-7. Закладки
Если вы нажмете на левую закладку, AuthorPrompt вернет вас в нормальный режим дизайнера. Нажав на вторую закладку вы переместитесь обратно к созданию вашего стиля. Убедитесь в том, что у вас открыто окно свойств и начните настраивать свойства вашего стиля. Вам наверняка будет удобнее находиться в режиме "split", тем самым вы сможете увидеть результат в App.xaml.
Рисунок 6-8. Установка свойств стиля
На рисунке 6-8 показано окно свойств и белые точки указывают те свойства, которые я настроил для нашего стиля подсказок (Prompt), в то время как пример 6-1 демонстрирует Xaml сгенерированный в App.xaml.
Пример 6-1. Стиль подсказки
<Application.Resources>
<Style x:Key="Prompt" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="0,0,10,0"/>
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Foreground" Value="#FF0000FF"/>
</Style>
</Application.Resources>
Вы все же можете написать стиль вручную, хотя сложные стили будет гораздо легче создать при помощи Blend.
Применение стиля
Для того, чтобы применить стиль ко всем подсказкам, Blend предлагает вам два подхода. Первый способ применения стиля – щелчок по элементу TextBlock, к которому вы хотите применить стиль (т.е. TitlePrompt) в закладке Objects and Timeline, и затем нажатие на опцию меню Object > Edit Style > Apply Resources > Prompt.
Готово! Стиль был применен и вы можете увидеть это как в панели истории, так и в Xaml
Рисунок 6-9. Применение стиля
В качестве альтернативы вы можете перетащить стиль из закладки ресурсов прямо на элемент управления, тем самым вызвав диалоговое окно, спрашивающее вас о том, хотите ли вы связать стиль, как это показано на рисунке 6-10
Рисунок 6-10. Перетаскивание ярлыка
Как только вы нажмете на "Style" будет применен стиль Prompt к тому элементу управления, который вы перетащили! Когда будут применены все стили вам придется настроить размер элемента управления, чтобы вместилась более длинная подсказка. Но вы можете теперь применить шаблонный стиль ко всем подсказкам и если вы решите изменить их цвет с синего на черный, то вы можете сделать это изменив ресурс вместо того, чтобы изменять каждый в отдельности.