Expander

WPF --- Элементы управления WPF --- Expander

Наиболее экзотичным из всех элементов управления содержимым с заголовками является Expander (расширитель). Он содержит область содержимого, которую пользователь может показать или скрыть, щелкнув на кнопочке со стрелкой. Такие элементы часто встречаются в оперативных подсказках и на веб-страницах, чтобы уместить большой объем содержимого, но не завалить пользователя информацией, которая ему не нужна.

Использовать объект Expander очень просто: нужно лишь упаковать в него все сворачиваемое содержимое. Обычно все расширители первоначально свернуты, но это можно изменить в разметке (или в коде), установив для них свойство IsExpanded.

Кроме того, можно указать направление развертывания элементов. В примере ниже использовано стандартное значение Down (вниз), но в свойстве ExpandDirection можно указать и направления Up (вверх), Left (влево) или Right (вправо). В свернутом расширителе стрелка всегда указывает направление развертывания содержимого.

<StackPanel>
        <Expander Margin="5" Header="Кнопка" Padding="5" BorderBrush="LightBlue" BorderThickness="2">
                    <Button Margin="5">
                        <Grid>
                            <Polygon Points="100,25 125,0 200,25 125,50" Fill="LightSteelBlue"></Polygon>
                            <Polygon Points="100,25 75,0 0,25 75,50" Fill="White"></Polygon>
                        </Grid>
                    </Button>
        </Expander>
        <Expander Margin="5" Padding="5" Header="Процессы Windows"  BorderBrush="LightBlue" BorderThickness="2">
                    <TextBlock TextWrapping="Wrap">
                        Понятие "процесса" существовало в операционных системах Windows ...
                    </TextBlock>
        </Expander>
</StackPanel>

Жизнь станет забавнее, если использовать различные значения ExpandDirection, т.к. влияние на остальную часть пользовательского интерфейса зависит от типа контейнера. Некоторые элементы, такие как WrapPanel, просто сдвигают остальные элементы в сторону. Другие, такие как Grid, допускают пропорциональное или автоматическое изменение размера.

Класс Expander особенно удобен для применения в WPF, т.к. в WPF поощряется использование гибкой модели компоновки, которая может легко обрабатывать динамически меняющие размер области содержимого.

Если нужно синхронизировать с расширителями другие элементы управления, можно обрабатывать события Expanded и Collapsed. Несмотря на названия ("развернуто" и "свернуто"), они возникают перед тем, как содержимое появится или исчезнет. Это дает возможность реализовать "ленивый" вариант загрузки. Например, если создание содержимого элемента Expander слишком трудоемко, можно подождать, пока оно появится, и затем выбрать его. Либо может понадобиться изменить содержимое перед его выводом на экран. В любом случае такие действия можно выполнить, реагируя на событие Expanded.

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

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

Такие проблемы можно устранить с помощью нескольких стратегий:

• Укажите для окна минимальный размер (с помощью свойств MinWidth и MinHeight), чтобы оно вмещало все даже в минимальном состоянии.

• Установите для окна свойство SizeToContent, чтобы оно автоматически увеличивалось в соответствии с размерами, необходимыми для вмещения развернутого или свернутого расширителя. Обычно это свойство имеет значение Manual, но можно указать параметры Width или Height, чтобы расширять или сжимать окно по какому-либо измерению в соответствии с его содержимым.

• Ограничьте размер элемента Expander, жестко закодировав его свойства Height и Width. К сожалению, это может привести к усечению содержимого, если оно не войдет в расширитель.

• Создайте прокручиваемую и развертываемую область с помощью элемента ScrollViewer.