Элементы управления в WPF. Контейнеры GroupBox и Expander

Содержание

Контейнеры GroupBox и Expander
Итого

Для того, чтобы визуально сгруппировать несколько элементов управления, в WPF используются специальные элементы-контейнеры, представленные классами GroupBox и Expander. Контейнеры GroupBox и Expander имеют общего предка — класс HeaderedContentControl, поэтому вначале имеет смысл рассмотреть свойства этого класса.

Контейнеры GroupBox и Expander

Класс HeaderedContentControl

Класс HeaderedContentControlявляется общим предком для контейнеров элементов управления в WPF:

Про TabControl будет рассказано в одной из следующих частей, так как этот объект используется для создания вкладок с использованием другого элемента управления — TabControl.

HeaderedContentControlпредоставляет нам следующие свойства для работы действие которых мы рассмотрим на его «детях» — GroupBox и Expander:

Свойство	Тип	Описание
`HasHeader`	`bool`	Получает значение, указывающее является ли данный заголовок `null`(свойство только для чтения)
`Header`	`object`	Получение или установка данных, используемых в качестве заголовков элементов управления.
`HeaderStringFormat`	`string`	Возвращает или задает составную строку, которая определяет, как форматировать свойство заголовка, если оно отображается как строка.

Контейнер GroupBox

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

<GroupBox Header=".NET" Width="300" Height="200">
    <StackPanel>
        <CheckBox Content="ASP.NET Core"/>
        <CheckBox Content="Blazor"/>
        <CheckBox Content=".NET MAUI"/>
        <CheckBox Content="Entity Framework Core"/>
    </StackPanel>
</GroupBox>

Запустим приложение и посмотрим на результат:

Так как свойство Header имеет тип object, то мы можем располагать в заголовке любые элементы. Например, ниже показан GroupBox с заголовком, состоящим из StackPanel внутри которого располагается картинка и текст:

<GroupBox Width="300" Height="200">
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <Image Source="/asp_40px.png"/>
            <TextBlock Foreground="Black" FontWeight="Bold" FontSize="16" VerticalAlignment="Center">.NET</TextBlock>
        </StackPanel>
    </GroupBox.Header>
    <StackPanel>
        <CheckBox Content="ASP.NET Core"/>
        <CheckBox Content="Blazor"/>
        <CheckBox Content=".NET MAUI"/>
        <CheckBox Content="Entity Framework Core"/>
    </StackPanel>
</GroupBox>

В приложении такой GroupBox выглядит следующим образом:

Контейнер Expander

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

Свойство Тип Описание

ExpandDirection

Направление, в котором открывается окно содержимого Expander. Может принимать следующие значения:

Down
Up
Left
Right

IsExpanded bool Определяет является ли видимым окно содержимого элемента Expander

Также, этот элемент управления предоставляет нам события:

Событие	Описание
public event System.Windows.RoutedEventHandler Collapsed;	Генерируется когда `Expander` сворачивается
public event System.Windows.RoutedEventHandler Expanded;	Генерируется, когда `Expander` разворачивается

Рассмотрим использование Expander на следующем примере:

<StackPanel>
    <Expander Header="ASP.NET - это:" 
              Collapsed="Expander_Collapsed"
              Expanded="Expander_Expanded" 
              IsExpanded="True">
        <Expander.Content>
            <StackPanel>
                <CheckBox Content="ASP.NET Core"/>
                <CheckBox Content="Blazor"/>
                <CheckBox Content=".NET MAUI"/>
                <CheckBox Content="Entity Framework Core"/>
            </StackPanel>
        </Expander.Content>
    </Expander>
    <TextBlock x:Name="text">Expander открыт</TextBlock> 
</StackPanel>

При запуске приложения вы увидите следующее окно:

Для элемента Expander мы определили обработчики событий:

private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
    
    text.Text = "Expander скрыт";
}

private void Expander_Expanded(object sender, RoutedEventArgs e)
{
    if (text != null) 
    {
        text.Text = "Expander открыт";
    }
}

поэтому, если вы сворачиваете или разворачиваете Expander, то надпись под ним изменяется:

Итого

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