Expander

  • Artículo

El control Expansor le permite mostrar u ocultar contenido menos importante relacionado con un fragmento de contenido principal que siempre está visible. Los elementos contenidos en el encabezado siempre son visibles. El usuario puede expandir y contraer el área Contenido , donde se muestra el contenido secundario, interactuando con el encabezado. Cuando se expande el área de contenido, inserta otros elementos de la interfaz de usuario fuera del camino; no superpone otra interfaz de usuario. Expander puede expandirse hacia arriba o hacia abajo.

Header Las áreas y Content pueden contener cualquier contenido, desde texto simple hasta diseños de interfaz de usuario complejos. Por ejemplo, puede usar el control para mostrar opciones adicionales para un elemento.

Un expansador contraído que se expande y, a continuación, se contrae. El encabezado tiene el texto

¿Es este el control adecuado?

Use cuando Expander algún contenido principal siempre debe estar visible, pero el contenido secundario relacionado puede estar oculto hasta que sea necesario. Esta interfaz de usuario se usa normalmente cuando el espacio de visualización está limitado y cuando la información o las opciones se pueden agrupar. Ocultar el contenido secundario hasta que sea necesario también puede ayudar a centrar al usuario en las partes más importantes de la aplicación.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

El expansivo para aplicaciones para UWP requiere la Biblioteca de interfaz de usuario de Windows 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows). Las API de este control existen en el espacio de nombres Microsoft.UI.Xaml.Controls .

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

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

<muxc:Expander />

Creación de un expansador

Abra la aplicación Galería de WinUI 3 y vea el expansivo en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

En este ejemplo se muestra cómo crear un expansador sencillo con el estilo predeterminado. La propiedad Header define el elemento que siempre está visible. La propiedad Content define el elemento que se puede contraer y expandir. En este ejemplo se crea un control Expander similar al de la ilustración anterior.

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

Contenido del expansivo

La propiedad Content de un Expander puede ser cualquier tipo de objeto, pero normalmente es una cadena o UIElement. Para obtener más información sobre cómo establecer la Content propiedad, vea la sección Comentarios de la clase ContentControl .

Puede usar una interfaz de usuario compleja e interactiva como contenido de Expander, incluidos los controles anidados Expander en el contenido de un elemento primario Expander , como se muestra aquí.

Un expansador abierto con cuatro controles expansivo anidados en su contenido. Cada uno de los controles Expander anidados tiene un botón de radio y texto en su encabezado

Alineación del contenido

Puede alinear el contenido estableciendo las propiedades HorizontalContentAlignment y VerticalContentAlignment en el Expander control. Al establecer estas propiedades, la alineación solo se aplica al contenido expandido, no al encabezado .

Controlar el tamaño de un expansor

De forma predeterminada, el tamaño de las áreas Encabezado y Contenido se ajusta automáticamente a su contenido. Es importante usar las técnicas correctas para controlar el tamaño de Expander para evitar la apariencia o el comportamiento no deseados.

Ancho

Si el contenido es más ancho que el encabezado, el ancho del encabezado aumenta para que coincida con el área de contenido cuando se expande y se reduce cuando se contrae el área de contenido. Para evitar que el ancho del control cambie cuando se expanda o contraiga, puede establecer un ancho explícito o, si el control es el elemento secundario de un Panel, establezca HorizontalAlignment en Stretch y deje que el panel de diseño controle el ajuste de tamaño.

Aquí, una serie de controles relacionados Expander se colocan en un StackPanel. De HorizontalAlignment cada Expander una de las StackPanel propiedades se establece en Stretch mediante un estilo en los StackPanelrecursos y el ancho de determina StackPanel el ancho de los Expander controles.

<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>

Tres controles de expansión apilados verticalmente, todo el mismo ancho

Alto

No especifique un alto en .Expander Si lo hace, el control reservará ese espacio incluso cuando se contraiga el área de contenido, lo que derrota el propósito de .Expander Para especificar el tamaño del área de contenido expandida, establezca dimensiones de tamaño en el contenido de Expander. Si lo necesita, puede restringir el Height contenido y hacer que el contenido se pueda desplazar.

Contenido desplazable

Si el contenido es demasiado grande para el tamaño del área de contenido, puede encapsular el contenido un ScrollViewer para que el área de contenido se pueda desplazar. El control Expander no proporciona automáticamente la funcionalidad de desplazamiento.

Al colocar un ScrollViewer en el Expander contenido, establezca el alto en el ScrollViewer control en el alto necesario para el área de contenido. Si en su lugar establece la dimensión de alto en el contenido dentro ScrollViewerde , ScrollViewer no reconoce esta configuración y, por lo tanto, no proporciona contenido desplazable.

En el ejemplo siguiente se muestra cómo crear un Expander control que contenga texto desplazable como contenido.

<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>

Un expansivo con texto desplazable como contenido

Expandir y contraer el área de contenido

De forma predeterminada, el expansivo se contrae y se expande hacia abajo.

  • Establezca la propiedad IsExpanded en true para que el área de contenido se expanda inicialmente.
  • Establezca la propiedad ExpandDirection en Up para que el contenido se expanda hacia arriba.
<Expander IsExpanded="True" ExpandDirection="Up">

Se Expander expande o contrae mediante programación estableciendo la IsExpanded propiedad o interactuando con Header; no se puede descartar la luz.

Sugerencia

La interfaz de usuario transitoria, como o Flyout la lista desplegable abierta de , ComboBoxse cierra al hacer clic o pulsar fuera de él. Esto se denomina cierre de luz. El área de contenido de un Expander objeto no se considera transitoria y no superpone otra interfaz de usuario, por lo que no admite el descarte de luz.

También puede controlar los eventos Expanding y Collapsed para realizar una acción cuando el contenido se muestra u oculta. Estos son algunos ejemplos de estos eventos.

Expansión del evento

En este ejemplo, tiene un grupo de expansores y desea tener solo uno abierto a la vez. Cuando el usuario abre un Expander, controla el evento Expanding y contrae todos los Expander controles del grupo que no sean el que el usuario ha hecho clic.

Precaución

Dependiendo de la aplicación y la experiencia del usuario, puede ser conveniente contraer Expander automáticamente los controles cuando el usuario expanda uno diferente. Sin embargo, esto también quita el control del usuario. Si el comportamiento puede ser útil, considere la posibilidad de convertirla en una opción que el usuario pueda establecer fácilmente.

<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;
        }
    }
}

Evento contraído

En este ejemplo, controlará el evento Collapsed y rellenaráHeader con un resumen de las opciones seleccionadas en .Content

Esta imagen muestra con Expander el contenido expandido y las opciones seleccionadas.

Un control Expansor expandido con las opciones seleccionadas que se muestran en el área de contenido

Cuando se contrae, las opciones seleccionadas se resumen en el encabezado para que el usuario pueda verlos sin abrir .Expander

Un control Expansor contraído con las opciones seleccionadas resumidas en el encabezado 

<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();
}

Estilos ligeros

Puede modificar el valor predeterminado Style y ControlTemplate proporcionar al control una apariencia única. Consulte la sección Estilo de control y plantilla de la documentación de la API de Expander para obtener una lista de los recursos de tema disponibles. Para obtener más información, consulte la sección de estilos ligeros del artículo Controles de estilo.

Recomendaciones

  • Use un Expander valor cuando el espacio para mostrar esté limitado y es posible que algún contenido secundario esté oculto hasta que el usuario lo solicite.

Ejemplos de código

Este XAML crea el grupo de Expander controles que se muestran en otras partes de este artículo. El código de los Expanding controladores de eventos y Collapsed también se muestra en las secciones anteriores.

<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>