Темы WPF

240

Темы WPF представляют собой наборы стилизованных шаблонов элементов управления WPF. Здесь я представляю разработанные мною темы. Ниже представлены ссылки на сами темы:

Использование тем

В составе исходного проекта в папке Themes находятся 3 словаря ресурсов:

Core.xaml: Содержит видоизмененную структуру всех шаблонов элементов управления
Brushes.xaml: Содержит кисти, цвета, эффекты и константы, используемые в словаре Core.xaml
Icons.xaml: Содержит векторные иконки, написанные на XAML

В качестве примера использования шаблонов давайте предположим, что вам необходимо стилизовать элемент управления Button. Ниже описаны основные шаги:

Необходимо добавить в ваш проект новый словарь ресурсов. В Visual Studio 2010 это делается с помощью команды Project --> Add Resource Dictionary (Проект --> Добавить словарь ресурсов).
Далее копируем содержимое файла Core.xaml (либо только шаблон Button, либо всю разметку для стилизации всех остальных элементов управления) из демо-проекта и вставляем во вновь созданный словарь ресурсов.
Подключаем словарь ресурсов в проект. Делается это в файле App.xaml, измените его разметку на следующую:
```
<Application.Resources>
   
   
      <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Ссылка на файл "/>
         </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>

</Application.Resources>
```
Ссылка на файл представляет собой URI-идентификатор местоположения созданного словаря ресурсов. Например, "Themes/Button.xaml".
Если вы используете Visual Studio 11, то ссылка на словарь добавится автоматически при его создании.
Проделайте вышеуказанные манипуляции для файла Brushes.xaml и не забудьте его подключить в файле ***.xaml, в который вы добавили структуру шаблонов:
```
...
   
<ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
    
...
```
Вот и всё! Добавьте в проект кнопок (если их еще нет) и обратите внимание, что теперь они будут стилизованы.

Особенности использования некоторых шаблонов

Ниже описаны некоторые особенности применения шаблонов.

Стилизация элементов DataGridCheckBoxColumn и DataGridComboBoxColumn

DataGridCheckBoxColumn и DataGridComboBoxColumn – это подэлементы DataGrid, не имеющие свойства Template, поэтому в стандартном шаблоне они не стилизованы. Однако в демо проектах вы можете увидеть, что они имеют аналогичный вид элементам управления CheckBox и ComboBox. Данное поведение достигается за счет непосредственного указания стиля в свойстве ElementStyle, как показано в следующей разметке:

<DataGridCheckBoxColumn …>
   <DataGridCheckBoxColumn.ElementStyle>
      <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}">
      …
      </Style>
   </DataGridCheckBoxColumn.ElementStyle>
</DataGridCheckBoxColumn>

В приведенном коде ключевым, является использование наследования стиля от стандартного элемента CheckBox, за счет использования атрибута BasedOn. Используйте данный подход в своих приложениях, если хотите стилизовать элементы DataGridCheckBoxColumn и DataGridComboBoxColumn. Так же не забудьте добавить в проект шаблоны для элементов CheckBox и ComboBox.

Использование шаблона элемента управления DatePicker

Элемент управления DatePicker имеет вид простого текстового поля, которое содержит строку с датой в длинном или коротком формате. Справа у него есть кнопочка со стрелкой, при щелчке на которой раскрывается полное представление календаря, идентичное элементу Calendar.

Очевидно, что для стилизации этого выпадающего календаря в проекте помимо шаблона элемента DatePicker должен присутствовать также шаблон для элемента Calendar, а иначе вид календарика будет иметь стандартный стиль. При использовании всех шаблонов, беспокоиться об этом не стоит.

Использование XAML-иконок

XAML-иконоки описаны в файле Icons.xaml в виде ресурсов. Чтобы подключить их к проекту нужно добавить словарь ресурсов с нужными иконками к проекту как говорилось выше.

Чтобы легко найти в словаре ресурсов нужную иконку, просто запустите демо-проект и наведите на нужную иконку указатель мыши, при этом ее название будет видно во всплывающей подсказке. Далее найдите это название в исходном словаре ресурсов с помощью поиска (в VS10 Ctrl + F) и скопируйте данную разметку в свой словарь ресурсов.

Чтобы показать использование иконок в реальном приложении, а заодно продемонстрировать их преимущество по сравнению с обычными png-иконками, давайте рассмотрим следующий пример:

<Window 
        ...
        Title="Test Icons" Height="100" Width="200">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Viewbox>
            <Path Stretch="Fill" Data="{StaticResource weather_symbolStyle0}" Stroke="LimeGreen"/>
        </Viewbox>
        <Viewbox Grid.Column="1">
            <Image Source="picture.png"/>
        </Viewbox>
    </Grid>
</Window>

Обратите внимание, что здесь слева векторная XAML-иконка, а справа обычная иконка в виде рисунка, предварительно добавленного в проект. В исходном виде (т.е. при разрешении 100х100) иконки выглядят вполне нормально. Но теперь попробуйте увеличить размер окна в несколько раз и вы увидите, что иконка в виде рисунка стала гораздо менее отчетливой (известная проблема для растровых изображений), при этом векторная иконка автоматически масштабирует себя и выглядит очень хорошо:

Сравнение векторной и растровой картинок в WPF

Я стараюсь использовать векторные рисунки везде в своих приложениях, за исключением различных логотипов и т.п.

Помощь по использованию шаблонов

Если у вас возникли какие-то вопросы по применению данных шаблонов или вы нашли ошибки, пишите на форуме в разделе по WPF.