Собственный стиль Expander WPF

#c_sharp #wpf #net

Подскажите как создать expander примерно такого стиля:



Или поделитесь хорошими статьями где описывается создание подобных вещей, тк гугл
не выдает ничего годного...(
    

Ответы

Ответ 1

Ну на самом деле всё не так сложно. На сайте есть довольно много примеров с переопределением
шаблонов ([1], [2], [3]). Но давайте посмотрим, что можно сделать в вашем случае. Я
приведу наброски решения, а остальное вы уж сами.

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

Положите в Visual Studio пустой Expander, выделите его в визуальном редакторе (не
в редакторе XAML), и в контекстном меню (или в меню «Format») выберите «Edit Template»
→ «Edit a Copy...».



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

Ну что ж, давайте тащить бегемота из болота. У меня вышел такой набор стилей (нервным
просьба не смотреть):





















Итак. Глядя в код триггеров  и
т. п., видим, что стили ExpanderXXXHeaderStyle отвечают за форму заголовка для случая
нестандартного направления экспандера (вверх, влево, вправо). Поэтому стили ExpanderRightHeaderStyle,
ExpanderUpHeaderStyle и ExpanderLeftHeaderStyle можно не думая удалять.

Разберёмся с ExpanderDownHeaderStyle, точнее, с его шаблоном. Мы видим внутренний
Grid с одним отдельным столбцом для эллипса и уголка (Path), которые отрисовываются
в стандартном экспандере:



— и вторым столбцом для контента. Нам ни уголок, эллипс не нужны, значит, можно убрать
и Grid, и Ellipse, и Path, оставив только ContentPresenter. Триггеры внутри управляют
видом эллипса и уголка, они тоже не нужны.

Получаем:




(Откуда у Border взялся Background="Transparent"? Он появился после экспериментов:
если бы его не было, то нажатие по свободному месту экспандера не срабатывало бы. А
с фоном hit test проходит нормально.)

Далее, несколько штук SolidColorBrush с именами наподобие Expander.MouseOver.Circle.Stroke
относятся к кругу и уголку, которые мы удалили, и тоже больше не нужны.

Теперь, что с ExpanderHeaderFocusVisual? Он используется так:




то есть он — стиль для фокуса у экспандера. Если вы не хотите подсвечивать фокус,
уберите его, но я оставил его как есть.

В стиле MyCoolExpanderStyle есть триггеры на Property="ExpandDirection", их тоже
можно удалить, т. к. мы всё равно не будем поддерживать 4 направления.

Отлично, мы уже убрали довольно много. Посмотрим теперь на желаемые изменения. Нам
нужен красный фон, но наш фон определяется значением по умолчанию:




Меняем его на Value="Coral" (точное значение спросите у графического дизайнера).
Запускаем, видим:



Во-первых, нужно убрать закруглённые уголки. Они создаются в строке




Убираем CornerRadius.

Затем, чёрный фон для контента. Вместо обыкновенного 
    



Запускаем, получаем:



Сразу видим, что текста не видно. Ну да, текст-то у нас установлен чёрный (,
а нам нужен светлый. Берём вместо этого SystemColors.ControlLightBrushKey.

Затем, у нас там был красный уголок, свисающий вниз. Дорисуем его. Это как раз просто:
в Grid добавим Canvas, а в нём Path (геометрия Path подобрана экспериментально). Чтобы
уголок не налазил на контент, добавим вертикальный Margin у ContentPresenter'а:


    
        
    
    



Получаем:



Вот вроде бы и всё с экспандером, точные размеры вам придётся подправить самостоятельно.
На всякий случай, вот весь полученный стиль: https://gist.github.com/vladd/9d67d8116c4d6f300d51814593e26bfd

Контент внутри экспандера — это какой-нибудь ItemsControl, его стилизовать проще
(ItemTemplate и т. д.)