Expander

Статья
03/18/2023

Элемент управления Expander позволяет отображать или скрывать менее важное содержимое, связанное с элементом основного содержимого, который всегда отображается. Элементы, содержащиеся в заголовке, всегда видны. Пользователь может развернуть и свернуть область содержимого , в которой отображается дополнительное содержимое, взаимодействуя с заголовком. При расширении области содержимого другие элементы пользовательского интерфейса вытесняются из пути; он не перекрывает другой пользовательский интерфейс. Может Expander расширяться вверх или вниз.

Header Области и Content могут содержать любое содержимое, от простого текста до сложных макетов пользовательского интерфейса. Например, можно использовать элемент управления для отображения дополнительных параметров элемента.

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

Выбор правильного элемента управления

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

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Расширитель для приложений UWP требует библиотеки пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .

WinUI 2 Apis:класс Expander, свойство Header, свойство Content
Откройте приложение коллекции WinUI 2 и просмотрите расширитель в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Чтобы использовать код, приведенный в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API-интерфейсов библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:Expander />

Создание расширителя

Важные API:класс Expander, свойство Header, свойство Content

Откройте приложение "Коллекция WinUI 3" и просмотрите расширитель в действии.

Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

В этом примере показано, как создать простой расширитель со стилем по умолчанию. Свойство Header определяет всегда видимый элемент. Свойство Content определяет элемент, который можно свернуть и развернуть. В этом примере создается Expander, который выглядит, как на предыдущей иллюстрации.

<Expander Header="This text is in the header"
               Content="This is in the content"/>

Содержимое расширителя

Свойство Content объекта может иметь любой Expander тип объекта, но обычно это строка или UIElement. Дополнительные сведения о настройке Content свойства см. в разделе Примечания класса ContentControl .

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

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

Выравнивание содержимого

Вы можете выровнять содержимое, задав свойства HorizontalContentAlignment и VerticalContentAlignment в элементе Expander управления . При установке этих свойств выравнивание применяется только к расширенному содержимому, а не к заголовку.

Управление размером расширителя

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

Ширина

Если содержимое шире заголовка, ширина заголовка увеличивается в соответствии с областью содержимого при развертывании и уменьшается при сворачивании области содержимого. Чтобы предотвратить изменение ширины элемента управления при развертывании или свертывание, можно задать явную ширину или, если элемент управления является дочерним элементом панели Panel, задайте для параметра HorizontalAlignment значение Stretch и позволить панели макета управлять изменением размера.

Здесь ряд связанных Expander элементов управления помещается в StackPanel. Для HorizontalAlignment каждого Expander элемента в свойстве StackPanel задано Stretch значение Style в StackPanelresources, а ширина StackPanel определяет ширину Expander элементов управления.

<StackPanel x:Name="ExpanderStack" MaxWidth="600">
    <StackPanel.Resources>
        <Style TargetType="Expander">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </StackPanel.Resources>
    <Expander Header="Choose your crust"> ... </Expander>
    <Expander Header="Choose your sauce"> ... </Expander>
    <Expander Header="Choose your toppings"> ... </Expander>
 </StackPanel>

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

Высота

Не указывайте высоту в Expander. В этом случае элемент управления зарезервирует это пространство, даже если область содержимого свернута, что не соответствует назначению Expander. Чтобы указать размер развернутой области содержимого, задайте размеры для содержимого Expander. При необходимости можно ограничить содержимое Height и сделать его прокручиваемым.

Прокручиваемое содержимое

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

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

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

<Expander Header="Expander with scrollable content">
    <ScrollViewer MaxHeight="200">
        <Grid>
            <TextBlock TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </TextBlock>
        </Grid>
    </ScrollViewer>
</Expander>

Расширитель с прокручиваемым текстом в качестве содержимого

Развертывание и свертывание области содержимого

По умолчанию расширитель свернут и разворачивается вниз.

Присвойте свойству IsExpanded значение , true чтобы область содержимого была изначально расширена.
Присвойте свойству ExpandDirection значение Up , чтобы содержимое расширялось вверх.

<Expander IsExpanded="True" ExpandDirection="Up">

Разворачивается Expander или свернуто программным путем путем задания IsExpanded свойства или путем взаимодействия с Header; его нельзя закрыть без света.

Совет

Временный Flyout пользовательский интерфейс, например или открытый раскрывающийся ComboBoxсписок , закрывается при щелчке или касании за его пределами. Это называется светлым закрытием. Область содержимого Expander объекта не считается временной и не перекрывает другой пользовательский интерфейс, поэтому она не поддерживает закрытие света.

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

Событие развертывания

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

Внимание!

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

<StackPanel x:Name="ExpanderStack">
    <Expander Header="Choose your crust"
                   Expanding="Expander_Expanding"> ... </Expander>
    <Expander Header="Choose your sauce"
                   Expanding="Expander_Expanding"> ... </Expander>
    <Expander Header="Choose your toppings"
                   Expanding="Expander_Expanding"> ... </Expander>
 </StackPanel>

// Let the user opt out of custom behavior.
private bool _autoCollapse = true;

private void Expander_Expanding(muxc.Expander sender, 
                                muxc.ExpanderExpandingEventArgs args)
{
    if (_autoCollapse == true)
    {
        foreach (muxc.Expander ex in ExpanderStack.Children)
        {
            if (ex != sender && ex.IsExpanded)
                ex.IsExpanded = false;
        }
    }
}

Свернутое событие

В этом примере вы обрабатываете событие Collapsed и заполняете Header сводкой параметров, выбранных в Content.

На этом изображении показан элемент Expander с развернутыми содержимым и выбранными параметрами.

Развернутый элемент управления Expander с выбранными параметрами, отображаемыми в области содержимого

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

Свернутый элемент управления Expander с выбранными параметрами, обобщенными в заголовке

<Expander IsExpanded="True"
        Expanding="Expander_Expanding"
        Collapsed="Expander_Collapsed">
    <Expander.Header>
        <Grid>
            <TextBlock Text="Choose your crust"/>
            <TextBlock x:Name="tbCrustSelections"
                       HorizontalAlignment="Right"
                       Style="{StaticResource CaptionTextBlockStyle}"/>
        </Grid>
    </Expander.Header>
    <StackPanel Orientation="Horizontal">
        <RadioButtons x:Name="rbCrustType" SelectedIndex="0">
            <x:String>Classic</x:String>
            <x:String>Whole wheat</x:String>
            <x:String>Gluten free</x:String>
        </RadioButtons>
        <RadioButtons x:Name="rbCrustStyle" SelectedIndex="0" 
                           Margin="48,0,0,0">
            <x:String>Regular</x:String>
            <x:String>Thin</x:String>
            <x:String>Pan</x:String>
            <x:String>Stuffed</x:String>
        </RadioButtons>
    </StackPanel>
</Expander>

private void Expander_Collapsed(muxc.Expander sender, 
                                muxc.ExpanderCollapsedEventArgs args)
{
    // Update the header with options selected in the content.
    tbCrustSelections.Text = rbCrustType.SelectedItem.ToString() +
        ", " + rbCrustStyle.SelectedItem.ToString();
}

Облегченное определение стиля

Вы можете изменить значение по умолчанию Style и ControlTemplate , чтобы придать элементу управления уникальный внешний вид. Список доступных ресурсов темы см. в разделе Стиль и шаблон элемента управления документации по API расширения. Дополнительные сведения см. в разделе Облегченное определение стиля статьи Стили XAML.

Примеры кода

Этот КОД XAML создает группу элементов управления, показанную Expander в других частях этой статьи. Код для Expanding обработчиков событий и Collapsed также показан в предыдущих разделах.

<StackPanel x:Name="ExpanderStack" MaxWidth="600">
    <StackPanel.Resources>
        <Style TargetType="Expander">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </StackPanel.Resources>
    <Expander IsExpanded="True"
                   Expanding="Expander_Expanding"
                   Collapsed="Expander_Collapsed">
        <Expander.Header>
            <Grid>
                <TextBlock Text="Choose your crust"/>
                <TextBlock x:Name="tbCrustSelections" 
                           HorizontalAlignment="Right"
        Style="{StaticResource CaptionTextBlockStyle}"/>
            </Grid>
        </Expander.Header>
        <StackPanel Orientation="Horizontal">
            <RadioButtons x:Name="rbCrustType" SelectedIndex="0">
                <x:String>Classic</x:String>
                <x:String>Whole wheat</x:String>
                <x:String>Gluten free</x:String>
            </RadioButtons>
            <RadioButtons x:Name="rbCrustStyle" SelectedIndex="0" 
                   Margin="48,0,0,0">
                <x:String>Regular</x:String>
                <x:String>Thin</x:String>
                <x:String>Pan</x:String>
                <x:String>Stuffed</x:String>
            </RadioButtons>
        </StackPanel>
    </Expander>
    
    <Expander Header="Choose your sauce" Margin="24"
            Expanding="Expander_Expanding">
        <RadioButtons SelectedIndex="0" MaxColumns="2">
            <x:String>Classic red</x:String>
            <x:String>Garlic</x:String>
            <x:String>Pesto</x:String>
            <x:String>Barbecue</x:String>
        </RadioButtons>
    </Expander>

    <Expander Header="Choose your toppings"
                   Expanding="Expander_Expanding">
        <StackPanel>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="House special"/>
                </Expander.Header>
                <TextBlock Text="Cheese, pepperoni, sausage, black olives, mushrooms"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="Vegetarian"/>
                </Expander.Header>
                <TextBlock Text="Cheese, mushrooms, black olives, green peppers, artichoke hearts"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="All meat"/>
                </Expander.Header>
                <TextBlock Text="Cheese, pepperoni, sausage, ground beef, salami"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="Choose your own"/>
                </Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <StackPanel>
                        <CheckBox Content="Cheese"/>
                        <CheckBox Content="Pepperoni"/>
                        <CheckBox Content="Sausage"/>
                    </StackPanel>
                    <StackPanel>
                        <CheckBox Content="Ground beef"/>
                        <CheckBox Content="Salami"/>
                        <CheckBox Content="Mushroom"/>
                    </StackPanel>
                    <StackPanel>
                        <CheckBox Content="Black olives"/>
                        <CheckBox Content="Green peppers"/>
                        <CheckBox Content="Artichoke hearts"/>
                    </StackPanel>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Expander>
</StackPanel>

Expander

Выбор правильного элемента управления

UWP и WinUI 2

Создание расширителя

Содержимое расширителя

Выравнивание содержимого

Управление размером расширителя

Ширина

Высота

Прокручиваемое содержимое

Развертывание и свертывание области содержимого

Событие развертывания

Свернутое событие

Облегченное определение стиля

Рекомендации

Примеры кода

Обратная связь

Дополнительные ресурсы

Expander

Выбор правильного элемента управления

UWP и WinUI 2

Создание расширителя

Содержимое расширителя

Выравнивание содержимого

Управление размером расширителя

Ширина

Высота

Прокручиваемое содержимое

Развертывание и свертывание области содержимого

Событие развертывания

Свернутое событие

Облегченное определение стиля

Рекомендации

Примеры кода

Похожие статьи

Обратная связь

Дополнительные ресурсы