Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
El control Expander
proporciona un contenedor expandible para hospedar cualquier contenido. El control tiene dos propiedades principales para almacenar el contenido:
Encabezado
Esta Header
propiedad se puede proporcionar con cualquier vista para permitir la personalización completa. Siempre Header
estará visible e interactuará con él (haciendo clic o pulsando) se mostrará o contraerá Content
.
Nota:
No se recomienda colocar controles dentro del encabezado que permitan la interacción del usuario.
Contenido
Este es el contenido principal que se mostrará cuando la Header
propiedad se interactúe con ella (se hace clic o pulsa) o se modifica la IsExpanded
propiedad.
Nota:
Expander
no se admite en ListView
iOS/MacCatalyst y genera NotSupportedException. Sin embargo, se puede reemplazar por la implementación personalizada estableciendo public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }
. Esta acción se ejecuta cada vez que se pulsa el encabezado. Preste atención al cambiar esta acción, puede recibir un comportamiento diferente en CollectionView
y ListView
en todas las plataformas.
Uso básico
En los ejemplos siguientes se muestra cómo usar la Expander
vista estableciendo la Header
propiedad para que sea un Label
control y para Content
que sea con HorizontalStackLayout
un Image
elemento y un Label
elemento dentro.
XAML
Incluir el espacio de nombres XAML
Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns
a la página o vista:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Por lo tanto, el siguiente:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
</ContentPage>
Se modificaría para incluir el xmlns
de la siguiente manera:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
</ContentPage>
Uso del expansador
En el ejemplo siguiente se muestra cómo agregar una Expander
vista en XAML.
<toolkit:Expander>
<toolkit:Expander.Header>
<Label Text="Baboon"
FontAttributes="Bold"
FontSize="Medium" />
</toolkit:Expander.Header>
<HorizontalStackLayout Padding="10">
<Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
Aspect="AspectFill"
HeightRequest="120"
WidthRequest="120" />
<Label Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
FontAttributes="Italic" />
</HorizontalStackLayout>
</toolkit:Expander>
C#
El siguiente ejemplo muestra cómo añadir una vista Expander
en C#.
using CommunityToolkit.Maui.Views;
var expander = new Expander
{
Header = new Label
{
Text = "Baboon",
FontAttributes = FontAttributes.Bold,
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
}
};
expander.Content = new HorizontalStackLayout
{
Padding = new Thickness(10),
Children =
{
new Image
{
Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
Aspect = Aspect.AspectFill,
HeightRequest = 120,
WidthRequest = 120
},
new Label
{
Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
FontAttributes = FontAttributes.Italic
}
}
};
Marcado de C#
using CommunityToolkit.Maui.Views;
Content = new Expander
{
Header = new Label()
.Text("Baboon")
.Font(bold: true, size: 18),
Content = new HorizontalStackLayout
{
new Image()
.Source("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg")
.Size(120)
.Aspect(Aspect.AspectFill),
new Label()
.Text("Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.")
.Font(italic: true)
}.Padding(10)
}.CenterHorizontal();
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
Command |
ICommand |
Se ejecuta cuando se pulsa el Expander encabezado. |
CommandParameter |
object |
Parámetro que se pasa a Command . |
Direction |
ExpandDirection |
Define la dirección del expansador. |
Content |
IView? |
Define el contenido que se va a mostrar cuando Expander se expande. |
Header |
IView? |
Define el contenido del encabezado. |
IsExpanded |
bool |
Determina si Expander se expande. Esta propiedad usa el TwoWay modo de enlace y tiene un valor predeterminado de false . |
La enumeración ExpandDirection
define los miembros siguientes:
Valor | Descripción |
---|---|
Down |
Indica que el Expander contenido está bajo el encabezado. |
Up |
Indica que el Expander contenido está por encima del encabezado. |
El Expander
control también define un ExpandedChanged
evento que se desencadena cuando se pulsa el Expander
encabezado.
ExpandedChangedEventArgs
Argumento de evento que contiene Expander
IsExpanded
el estado.
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
IsExpanded | bool |
Determina si Expander se expande. |
Ejemplos
Puede encontrar un ejemplo de esta característica en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.
API
Puede encontrar el código fuente de Expander
en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.
.NET MAUI Community Toolkit