Información general sobre el control Expander

  • Artículo

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

Captura de pantalla que muestra un control Expander con ScrollBar.

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