Compartir a través de

Expander

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 están 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, empuja otros elementos de la interfaz de usuario fuera del camino; no superpone otros elementos de la interfaz. El Expander puede expandirse hacia arriba o hacia abajo.

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

Un expansor contraído que se expande y luego se contrae. El encabezado tiene el texto

¿Es este el control adecuado?

Utiliza un Expander cuando algún contenido principal deba estar siempre visible, pero el contenido secundario relacionado puede ocultarse hasta que se necesite. Esta interfaz de usuario se usa normalmente cuando el espacio para mostrar 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.

Creación de un expansador

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

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue 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 Expander que tiene el aspecto de la ilustración anterior.

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

Contenido del expansador

La propiedad Content de Expander puede ser un objeto de cualquier tipo, pero normalmente es una cadena o un 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 Expander anidados en el contenido de un elemento primario Expander, como se muestra aquí.

Un expansor abierto con cuatro controles de Expander anidados en su contenido. Cada uno de los controles Expander anidados tiene un botón de opción 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 el comportamiento o la apariencia no deseados.

Ancho

Si el contenido es más amplio 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.

En este caso, una serie de controles relacionados Expander se colocan en stackPanel. El HorizontalAlignment de cada Expander en el StackPanel se establece en Stretch mediante un estilo en los StackPanelrecursos, y el ancho de StackPanel determina el de los controles 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>

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

Altura

No especifique una altura en el Expander. Si lo hace, el control reservará ese espacio incluso cuando se contraiga el área de contenido, lo que contradice 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 es necesario, puede restringir el Height del contenido y permitir que el contenido se desplace.

Contenido desplazable

Si el contenido es demasiado grande para el tamaño del área de contenido, puede encapsular el contenido en un ScrollViewer para que el área de contenido sea desplazable. El control Expander no proporciona automáticamente la capacidad de desplazamiento.

Cuando coloque un ScrollViewer en el contenido Expander, establezca el control ScrollViewer a la altura necesaria para el área de contenido. Si establece la dimensión de alto en el contenido dentro de ScrollViewer, ScrollViewer no reconoce esta configuración y, por 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 expansador con texto desplazable como contenido

Expandir y contraer el área de contenido

De forma predeterminada, el expansador 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">

La Expander se expande o contrae programáticamente mediante la programación de la propiedad IsExpanded o interactuando con el Header; no se puede cerrar automáticamente.

Sugerencia

La interfaz de usuario transitoria, como un Flyout o la lista desplegable abierta de un ComboBox, se cierra al hacer clic o pulsar fuera de ella. 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 cierre de luz.

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

Evento en expansión

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

Precaución

Dependiendo de tu aplicación y la experiencia del usuario, puede ser conveniente contraer automáticamente los controles Expander cuando el usuario expanda otro control. 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 colapsado

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

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

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

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

Un control Expander colapsado 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();
}

Estilo ligero

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 temas disponibles. Para obtener más información, consulte la sección de estilos ligeros del artículo Controles de estilo.

Recommendations

  • Use un Expander 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>

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. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.

El expansador para aplicaciones para UWP requiere WinUI 2. Para obtener más información, incluidas las instrucciones de instalación, consulta WinUI 2. Existen API para este control 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. Consulta Introducción a WinUI 2 para obtener más información.

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

<muxc:Expander />
  • Last updated on