Автор: Диптимая Патра (Diptimaya Patra)

В этой статье мы посмотрим, как можно настроить элемент управления расширителя (Expander) в WPF.

Создание проекта WPF

Запустите Visual Studio 2008, создайте пустое решение Visual Studio и назовите его CustomExpander.

Добавим элемент управления Expander.

В Visual Studio 2008 настройка Expander может оказаться трудной, поэтому запустим Expression Blend 3 и откроем решение.

Как показано на приведенном выше рисунке, мы открыли решение в Expression Blend 3 и начали редактировать шаблон для элемента управления Expander.

Сохраним стили в файле App.xaml.

Как показано на вышеприведенном рисунке, стилю было назначено имя, в данном случае PlusMinusExpanderStyle. И мы сохраняем этот стиль в файле приложения, App.xaml.

Представление о стиле можно получить на основе его имени, PlusMinus. Да, все правильно, когда элемент управления Expander не развернут, будет виден плюс, а когда элемент развернут — минус.

Добавленный стиль откроется в режиме изменения. Теперь, взглянув на приведенный выше рисунок, можно легко понять, какие элементы образуют элемент управления Expander.

Кнопка "HeaderSite" — это выключатель (ToggleButton).

На вышеприведенном рисунке показаны ресурсы стиля по умолчанию, связанные с элементом управления Expander. Фактически можно видеть четыре разных стиля, таких как:

• Стиль правого заголовка Expander, ExpanderRightHeaderStyle
• Стиль верхнего заголовка Expander, ExpanderUpHeaderStyle
• Стиль левого заголовка Expander, ExpanderLeftHeaderStyle
• Стиль нижнего заголовка Expander, ExpanderDownHeaderStyle

Когда элемент Expander развернут, стрелка указывает вниз, поэтому в этот момент используется стиль ExpanderDownHeaderStyle, и наоборот, когда элемент Expander не развернут, стрелка направлены вверх, и используется стиль ExpanderUpHeaderStyle.

Именно эти два стиля нам и нужно изменить. Нам не нужно создавать новый стиль и всю анимацию — можно просто воспользоваться этим существующими стилями и изменить их.

Сначала выберем ExpanderDownHeaderStyle и изменим его.

На приведенном выше рисунке показана структура переключателя HeaderSite после настройки.

Теперь увеличим представление и изменим стрелку, которая является элементом Path.

Как показано на приведенном выше рисунке, мы изменили элемент Path и назначили ему сплошной красный цвет (Red).

Мы сделаем то же самое для стиля "ExpanderUpHeaderStyle", но добавим другой элемент Path, который нам нужен для создания значка плюса.

На вышеприведенном рисунке видно, что применяемый стиль помечается флажком, и теперь мы можем настроить этот стиль.

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

Как показано на вышеприведенном рисунке, мы добавили еще один элемент Path и изменили цвет обоих элементов Path на зеленый (Green). Результат выглядит как знак "плюс".

Теперь при выполнении приложения с реализованными стилями будет видно, что элемент Expander не разворачивается, чтобы отобразить знак "минус".

Это вызвано тем, что еще не настроено свойство Setter. Теперь пора это изменить, либо с помощью триггеров в приложении Expression Blend, либо прямо в XAML.

Давайте попробуем XAML, перейдите к стилю "ExpanderUpHeaderStyle" и добавьте выделенные строки, как показано ниже:

Как можно видеть, штрих стрелки (Stroke) становится красным (Red), когда значение триггера равно true.

Теперь вставим какое-нибудь содержимое в элемент управления Expander и проверим измененный стиль:

Надеюсь, что эта статья окажется полезной.