Compartir a través de

Información general sobre el expansador

Un Expander control proporciona una manera de proporcionar contenido en un área expandible similar a una ventana e incluye un encabezado.

Creación de un expansador simple

En el ejemplo siguiente se muestra cómo crear un control simple Expander . 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>

Content y Header de un Expander también pueden contener 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 Expander control para expandirse en una de las cuatro direcciones (Down, Up, Lefto Right) mediante la ExpandDirection propiedad . Cuando se contrae el área de contenido, solo aparecen el ExpanderHeader y su botón de alternancia. Un Button control que muestra una flecha direccional se usa como botón de alternancia para expandir o contraer el área de contenido. Cuando se expande, el Expander intenta mostrar todo su contenido en un área similar a una ventana.

Controlar el tamaño de un expansor en un panel

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

Cuando se establece una dimensión de tamaño en un Expander control en la dirección en la que se muestra el contenido expandido, Expander toma el control del área que usa el contenido y muestra un borde alrededor de él. El borde se muestra incluso cuando el contenido está contraído. Para establecer el tamaño del área de contenido expandida, establezca dimensiones en el contenido de Expander, o si desea funcionalidad de desplazamiento, en el ScrollViewer que contiene el contenido.

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

Crear contenido desplazable

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

Expansor en un ScrollViewer

Captura de pantalla que muestra un expansador con ScrollBar.

Cuando coloque un Expander control en un ScrollViewer, establezca la propiedad de dimensión ScrollViewer que corresponde a la dirección en la que se abre el Expander contenido al tamaño del área de contenido Expander. Por ejemplo, si establece la propiedad ExpandDirection en Expander a Down (el área de contenido se abre hacia abajo), establezca la propiedad Height en el control ScrollViewer al alto necesario para el área de contenido. Si establece en su lugar la dimensión de alto en el propio contenido, ScrollViewer no reconoce esta configuración y, por lo tanto, no proporciona contenido desplazable.

En el ejemplo siguiente se muestra cómo crear un Expander control que tenga contenido complejo y que contenga un ScrollViewer control . En este ejemplo se crea un Expander que es similar a la ilustración al 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>

Uso de las propiedades de alineación

Puede alinear el contenido configurando 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 expandido.

Consulte también