Silverlight DataForm: Замена иконок в панели навигации. Часть 1.
Недавно я выложила набор иконок, которые можно использовать для панели навигации в Silverlight DataForm. Может возникнуть вопрос - как их применить? Есть два пути, один из которых мы рассмотрим в этой части, второй – в следующей.
Часть 1. Замена стандартных иконок на новые из набора.
Предположим, у Вас уже есть DataForm с данными. Включение навигационной панели происходит через задание у свойства CommandButtonsVisibility - различных вариантов значений, которые можно указывать поодиночно или комбинировать. Например, следующая запись CommandButtonsVisibility="Add,Navigation,Commit,Cancel" позволит отобразить панель навигации с возможностью просмотра, добавления нового элемента в коллекцию и двумя кнопками – подтверждения и отмены.
И теперь, предположим, мы хотим заменить стандартные иконки – в начало, назад, вперед, в конец – на стрелки из коллекции “Mini v2”.
Создаем копию шаблона для DataForm.
Открываем проект в Expression Blend, в панели Objects & Timeline выбираем элемент DataForm и в строке навигации по шаблонам элемента создаем копию шаблона:
Задаем подходящее название, например DataFormStyleNew и разместим его в новом файле ресурсов, например, Forms.xaml.
Определяем нужную кнопку панели навигации.
Находясь в режиме редактирования шаблона, в панели Objects & Timeline мы видим большой набор элементов, организованных соответствующим образом.
Необходимо найти StackPanel, в которой находятся наши иконки навигации – их можно визуально определить по соответствующим названиям – FirstItemButton, PreviousItemButton, etc… и значкам. Зеленая галочка на пазле указывает на то, что это - часть элемента управления.
Раскрыв, например, кнопку NextItemButton, мы видим, что эта кнопка состоит из одного контура – Path.
В качестве стиля для кнопки применяется Style="{StaticResource ButtonGeneric}", в качестве эффекта для контура – отброс тени, которые мы не будем трогать, чтобы не нарушать общую стилистику элемента. Нас интересует только замена контура, с сохранением заливки и всего остального.
Замена контура.
Открываем иконки в Expression Design. Находим стрелочку, и поворачиваем ее на 90 градусов.
Копируем XAML в буфер обмена (Edit – > Copy XAML).
Примечание: Для более эффективной работы с буфером обмена, его лучше заранее настроить. Если вы чаще всего работаете с дизайном Silverlight приложений, то укажите в качестве формата – XAML Silverlight 3 Canvas (Edit –> Options –> Clipboard(XAML)).
В режиме XAML или Split, вставляем наш код перед уже существующим контуром в кнопке. Фактически нам от нового контура нужно всего три свойства – Data, Width, Height, которые мы скопируем в старый контур:
Width="12.1772" Height="12.8996" Data="F1 M 54.3555,74.1308C 53.5271,74.1308 52.8556,73.4593 52.8556,72.6309C 52.8556,71.8025 53.5271,71.131 54.3555,71.131L 59.9113,71.131L 57.5223,68.7419C 56.9365,68.1562 56.9365,67.2064 57.5223,66.6207C 58.1081,66.0349 59.0578,66.0349 59.6436,66.6207L 64.5934,71.5705C 65.1792,72.1563 65.1792,73.106 64.5934,73.6917L 59.6436,78.6416C 59.0579,79.2273 58.1081,79.2273 57.5223,78.6416C 56.9366,78.0558 56.9366,77.106 57.5224,76.5203L 59.9118,74.1308L 54.3555,74.1308 Z "
Теперь взятый с Expression Design код XAML нам уже не нужен, и его можно сразу удалить, чтоб не мешал.
Изменение отсупов Margin.
Учитывая что дизайнеры, проектирующие панель навигации, задумали так, чтобы каждая маленькая кнопка была не более чем 19х19 (Height старого контура 9, Width - 5, Margin – влево 6, вправо 8, вверх 5, вниз 5.) Нам нужно, чтобы сумма ширины и соответствующих отступов и сумма высоты и отступов – вмещались в эти размеры. Делаем выводы, что с новыми значениями должно быть Margin – влево 3, вправо 3, вверх 3, вниз 3.
В итоге – при запуске приложения получаем новую кнопочку, которая по стилю вписывается в наше приложение, но уже более заметна.
Аналогично вышеуказанным, проделываем действия с контурами для остальных 3 кнопок. Полученную панель можно посмотреть тут.
Продолжение следует…