Partilhar via

Visão geral do expansor

  • Artigo

Um controle Expander fornece uma maneira de fornecer conteúdo em uma área expansível que se assemelha a uma janela e inclui um cabeçalho.

Criando um expansor simples

O exemplo a seguir mostra como criar um simples controle de Expander. Este exemplo cria uma Expander semelhante à ilustração 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>

O Content e Header de um Expander também podem conter conteúdo complexo, como objetos RadioButton e Image.

Definindo a direção da área de conteúdo em expansão

Você pode definir a área de conteúdo de um controle Expander para expandir em uma das quatro direções (Down, Up, Leftou Right) usando a propriedade ExpandDirection. Quando a área de conteúdo é recolhida, apenas o ExpanderHeader e seu botão de alternância são exibidos. Um controle Button que exibe uma seta direcional é usado como um botão de alternar para expandir ou reduzir a área de conteúdo. Quando expandido, o Expander tenta exibir todo o conteúdo em uma área semelhante a uma janela.

Controlando o tamanho de um expansor em um painel

Se um controle Expander estiver dentro de um controle de layout que herda de Panel, como StackPanel, não especifique um Height no Expander quando a propriedade ExpandDirection estiver definida como Down ou Up. Da mesma forma, não especifique um Width no Expander quando a propriedade ExpandDirection estiver definida como Left ou Right.

Quando você define uma dimensão de tamanho em um controle Expander na direção em que o conteúdo expandido é exibido, o Expander assume o controle da área que é usada pelo conteúdo e exibe uma borda ao seu redor. A borda é exibida mesmo quando o conteúdo é recolhido. Para definir o tamanho da área de conteúdo expandida, defina dimensões no conteúdo do Expanderou, se desejar a funcionalidade de rolagem, no ScrollViewer que envolve o conteúdo.

Quando um controle Expander é o último elemento em um DockPanel, o Windows Presentation Foundation (WPF) define automaticamente as dimensões de Expander como igual à área restante do DockPanel. Para evitar esse comportamento padrão, defina a propriedade LastChildFill no objeto DockPanel para falseou verifique se o Expander não é o último elemento em um DockPanel.

Criando conteúdo rolável

Se o conteúdo for muito grande para o tamanho da área de conteúdo, você poderá encapsular o conteúdo de um Expander em um ScrollViewer para fornecer conteúdo rolável. O controle Expander não fornece automaticamente a funcionalidade de rolagem. A ilustração a seguir mostra um controle Expander que contém um controle ScrollViewer.

Expansor em um ScrollViewer

Captura de tela que mostra um expansor com ScrollBar.

Quando você colocar um controle Expander em um ScrollViewer, defina a propriedade de dimensão ScrollViewer que corresponde à direção na qual o conteúdo do Expander é aberto para o tamanho da área de conteúdo Expander. Por exemplo, se você definir a propriedade ExpandDirection no Expander como Down (a área de conteúdo abre para baixo), defina a propriedade Height no controle ScrollViewer para a altura necessária para a área de conteúdo. Se você definir a dimensão de altura no próprio conteúdo, ScrollViewer não reconhecerá essa configuração e, portanto, não fornecerá conteúdo rolável.

O exemplo a seguir mostra como criar um controle Expander que tenha conteúdo complexo e que contenha um controle ScrollViewer. Este exemplo cria uma Expander semelhante à ilustração no início desta seção.


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>

Usando as propriedades de alinhamento

Você pode alinhar o conteúdo definindo as propriedades HorizontalContentAlignment e VerticalContentAlignment no controle Expander. Quando você define essas propriedades, o alinhamento se aplica ao cabeçalho e também ao conteúdo expandido.

Consulte também