Información general sobre el control Expander
Un control Expander ofrece una manera de proporcionar contenido en un área ampliable que se parece a una ventana e incluye un encabezado.
Crear un control Expander simple
En el ejemplo siguiente se muestra cómo crear un control Expander simple. En este ejemplo se crea un control Expander similar al de la ilustración anterior.
<Expander Name="myExpander" Background="Tan"
HorizontalAlignment="Left" Header="My Expander"
ExpandDirection="Down" IsExpanded="True" Width="100">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua
</TextBlock>
</Expander>
Las propiedades Content yHeader de un control Expander pueden contener también contenido complejo, como objetos RadioButton y Image.
Establecer la dirección del área de contenido de expansión
Puede establecer el área de contenido de un control Expander para expandir en una de cuatro direcciones (Down, Up, Left, o Right) mediante la propiedad ExpandDirection. Cuando el área de contenido se contrae, solo aparecen el ExpanderHeader y su botón de alternancia. Para expandir o contraer el área de expansión se usa un control Button que muestra una flecha de dirección. Cuando se expande, el control the Expander intenta mostrar todo su contenido en un área similar a una ventana.
Controlar el tamaño de un control Expander en un panel
Si hay un control Expander dentro de un control de diseño que se hereda de Panel, como StackPanel, no especifique una Height en el control Expander cuando la propiedad ExpandDirection se establece en Down o en Up. De forma similar, no especifique una Width en el control Expander cuando la propiedad ExpandDirection se establece en Left o en Right.
Cuando en un control Expander se define una dimensión de tamaño en la dirección en que se muestra el contenido expandido, Expander toma el control del área que usa el contenido y muestra un borde alrededor. El borde se muestra aunque el contenido se contraiga. Para establecer el tamaño del área de contenido ampliada, establezca las dimensiones de tamaño del contenido en el control Expander o, si quiere incluir la funcionalidad de desplazamiento, en la clase ScrollViewer que encierra el contenido.
Cuando un control Expander es el último elemento de una DockPanel, Windows Presentation Foundation (WPF) establece automáticamente las dimensiones del control Expander en las del área restante de la DockPanel. Para evitar este comportamiento predeterminado, establezca la propiedad LastChildFill del objeto DockPanel en false o asegúrese de que el control Expander no es el último elemento de una DockPanel.
Crear contenido desplazable
Si el contenido de un control Expander es demasiado grande para el tamaño del área de contenido, puede ajustarlo en un ScrollViewer para proporcionar contenido desplazable. El control Expander no proporciona automáticamente la funcionalidad de desplazamiento. En la ilustración siguiente se muestra un control Expander que contiene un control ScrollViewer.
Control Expander en un control ScrollViewer
Cuando coloque un control Expander en un ScrollViewer, establezca la propiedad de dimensión de ScrollViewer correspondiente a la dirección en la que se abre el contenido de Expander en el tamaño del área de contenido de Expander. Por ejemplo, si establece la propiedad ExpandDirection del control Expander en Down (el área de contenido se abre hacia abajo), establezca la propiedad Height del control ScrollViewer en el alto necesario para el área de contenido. Si en cambio establece la dimensión de alto en el propio contenido, ScrollViewer no reconoce este valor y, por lo tanto, no proporciona contenido desplazable.
En el ejemplo siguiente se muestra cómo crear un control Expander que tiene contenido complejo e incluye un control ScrollViewer. En este ejemplo se crea un control Expander similar al de la ilustración del principio de esta sección.
void MakeExpander()
{
//Create containing stack panel and assign to Grid row/col
StackPanel sp = new StackPanel();
Grid.SetRow(sp, 0);
Grid.SetColumn(sp, 1);
sp.Background = Brushes.LightSalmon;
//Create column title
TextBlock colTitle = new TextBlock();
colTitle.Text = "EXPANDER CREATED FROM CODE";
colTitle.HorizontalAlignment= HorizontalAlignment.Center;
colTitle.Margin.Bottom.Equals(20);
sp.Children.Add(colTitle);
//Create Expander object
Expander exp = new Expander();
//Create Bullet Panel for Expander Header
BulletDecorator bp = new BulletDecorator();
Image i = new Image();
BitmapImage bi= new BitmapImage();
bi.UriSource = new Uri(@"pack://application:,,/images/icon.jpg");
i.Source = bi;
i.Width = 10;
bp.Bullet = i;
TextBlock tb = new TextBlock();
tb.Text = "My Expander";
tb.Margin = new Thickness(20,0,0,0);
bp.Child = tb;
exp.Header = bp;
//Create TextBlock with ScrollViewer for Expander Content
StackPanel spScroll = new StackPanel();
TextBlock tbc = new TextBlock();
tbc.Text =
"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.";
tbc.TextWrapping = TextWrapping.Wrap;
spScroll.Children.Add(tbc);
ScrollViewer scr = new ScrollViewer();
scr.Content = spScroll;
scr.Height = 50;
exp.Content = scr;
exp.Width=200;
exp.HorizontalContentAlignment= HorizontalAlignment.Stretch;
//Insert Expander into the StackPanel and add it to the
//Grid
sp.Children.Add(exp);
myGrid.Children.Add(sp);
}
Sub MakeExpander()
'Create containing stack panel and assign to Grid row/col
Dim sp As StackPanel = New StackPanel()
Grid.SetRow(sp, 0)
Grid.SetColumn(sp, 1)
sp.Background = Brushes.LightSalmon
'Create column title
Dim colTitle As TextBlock = New TextBlock()
colTitle.Text = "EXPANDER CREATED FROM CODE"
colTitle.HorizontalAlignment = HorizontalAlignment.Center
colTitle.Margin.Bottom.Equals(20)
sp.Children.Add(colTitle)
'Create Expander object
Dim exp As Expander = New Expander()
'Create Bullet Panel for Expander Header
Dim bp As BulletDecorator = New BulletDecorator()
Dim i As Image = New Image()
Dim bi As BitmapImage = New BitmapImage()
bi.UriSource = New Uri("pack://application:,,./images/icon.jpg")
i.Source = bi
i.Width = 10
bp.Bullet = i
Dim tb As TextBlock = New TextBlock()
tb.Text = "My Expander"
tb.Margin = New Thickness(20, 0, 0, 0)
bp.Child = tb
exp.Header = bp
'Create TextBlock with ScrollViewer for Expander Content
Dim spScroll As StackPanel = New StackPanel()
Dim tbc As TextBlock = New TextBlock()
tbc.Text = _
"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."
tbc.TextWrapping = TextWrapping.Wrap
spScroll.Children.Add(tbc)
Dim scr As ScrollViewer = New ScrollViewer()
scr.Content = spScroll
scr.Height = 50
exp.Content = scr
'Insert Expander into the StackPanel and add it to the
'Grid
exp.Width = 200
exp.HorizontalContentAlignment = HorizontalAlignment.Stretch
sp.Children.Add(exp)
myGrid.Children.Add(sp)
End Sub
<Expander Width="200" HorizontalContentAlignment="Stretch">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Width="10" Source="images\icon.jpg"/>
</BulletDecorator.Bullet>
<TextBlock Margin="20,0,0,0">My Expander</TextBlock>
</BulletDecorator>
</Expander.Header>
<Expander.Content>
<ScrollViewer Height="50">
<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>
</ScrollViewer>
</Expander.Content>
</Expander>
Usar propiedades de alineación
Puede alinear contenido estableciendo las propiedades HorizontalContentAlignment y VerticalContentAlignment en el control Expander. Al establecer estas propiedades, la alineación se aplica al encabezado y también al contenido ampliado.
Vea también
.NET Desktop feedback
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente las Cuestiones de GitHub como mecanismo de retroalimentación para el contenido y lo sustituiremos por un nuevo sistema de retroalimentación. Para más información, consulta: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de