Información general sobre el control Expander

Artículo
10/07/2008

Actualización: noviembre 2007

Un control Expander proporciona una manera de proporcionar contenido en un área ampliable que se parece una ventana e incluye un encabezado.

Este tema contiene las secciones siguientes.

Crear un ampliador sencillo
Establecer la dirección del área de contenido ampliable
Controlar el tamaño de un ampliador en un panel
Crear contenido desplazable
Usar las propiedades de alineación
Temas relacionados

Crear un ampliador sencillo

En el ejemplo siguiente se muestra cómo crear un control Expander sencillo. En este ejemplo se crea un control Expander que se parece 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 y Header de un control Expander también pueden incluir contenido complejo, como objetos RadioButton e Image.

Establecer la dirección del área de contenido ampliable

Puede establecer el área de contenido de un control Expander de modo que se expanda en cuatro direcciones (Down, Up, Left o Right) mediante la propiedad ExpandDirection. Cuando se contrae el área de contenido, sólo aparecen el encabezado (Header) del control Expander y su botón de alternar. Para expandir o contraer el área de contenido, se usa como botón de alternar un control Button que muestra una flecha de dirección. Cuando se expande el control Expander, intenta mostrar todos su contenido en un área similar a una ventana.

Controlar el tamaño de un ampliador en un panel

Si un control Expander está dentro de un control de diseño que hereda de un control Panel, como StackPanel, no especifique la propiedad Height en Expander cuando la propiedad ExpandDirection esté establecida en Down o en Up. De igual forma, no especifique la propiedad Width en un control Expander cuando la propiedad ExpandDirection esté establecida en Left o Right.

Si establece dimensiones en un control Expander en la dirección en que se muestra el contenido ampliado, Expander asume el control del área usada por el contenido y muestra un borde alrededor de ella. Este borde aparece aunque el contenido esté contraído. Para establecer el tamaño del área de contenido ampliada, establezca las dimensiones en el contenido del control Expander. Opcionalmente, si desea disponer de la función de desplazamiento, establézcalas en el control ScrollViewer que encierra el contenido.

Cuando un control Expander es el último elemento de un control DockPanel, Windows Presentation Foundation (WPF) establece automáticamente las dimensiones de Expander en un tamaño igual al área restante de DockPanel. Para evitar este comportamiento predeterminado, establezca la propiedad LastChildFill del objeto DockPanel en false o asegúrese de que Expander no sea el último elemento del control DockPanel.

Crear contenido desplazable

Si el contenido es demasiado grande para el tamaño del área de contenido, puede ajustar el contenido del control Expander en un control ScrollViewer para proporcionar contenido desplazable. El control Expander no proporciona automáticamente la función de desplazamiento. En la ilustración siguiente se muestra un control Expander que contiene un control ScrollViewer.

Control Expander en un control ScrollViewer

Expander con ScrollBar

Cuando coloque un control Expander en un control ScrollViewer, establezca la propiedad de dimensión de ScrollViewer que corresponda 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 de 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 lugar de ello establece la dimensión de alto en el propio contenido, ScrollViewer no reconoce este valor y, por consiguiente, no proporciona contenido desplazable.

En el ejemplo siguiente se muestra cómo crear un control Expander que incluye contenido complejo y un control ScrollViewer. En este ejemplo se crea un control Expander parecido al de la ilustración del principio de esta sección.

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

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

<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 las propiedades de alineación

Puede alinear el contenido estableciendo las propiedades HorizontalContentAlignment y VerticalContentAlignment del control Expander. Cuando se establecen estas propiedades, la alineación se aplica al encabezado y también al contenido ampliado.