Condividi tramite

Panoramica dell'Expander

  • Articolo

Un controllo Expander consente di fornire contenuto in un'area espandibile simile a una finestra e include un'intestazione.

Creazione di un semplice espansore

Nell'esempio seguente viene illustrato come creare un controllo Expander semplice. In questo esempio viene creata una Expander che assomiglia all'illustrazione precedente.

<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>

I Content e i Header di un Expander possono anche contenere contenuti complessi, ad esempio RadioButton e oggetti Image.

Impostazione della direzione dell'area contenuto espandibile

È possibile impostare l'area del contenuto di un controllo Expander per espandersi in una delle quattro direzioni (Down, Up, Lefto Right) usando la proprietà ExpandDirection. Quando l'area del contenuto viene compressa, vengono visualizzati solo i ExpanderHeader e il relativo pulsante di attivazione/disattivazione. Un controllo Button che visualizza una freccia direzionale viene utilizzato come pulsante di attivazione/disattivazione per espandere o comprimere l'area del contenuto. Se espanso, il Expander tenta di visualizzare tutto il contenuto in un'area simile a una finestra.

Controllo delle dimensioni di un espansore in un pannello

Se un controllo Expander si trova all'interno di un controllo di layout che eredita da Panel, ad esempio StackPanel, non specificare un Height nel Expander quando la proprietà ExpandDirection è impostata su Down o Up. Analogamente, non specificare un Width nel Expander quando la proprietà ExpandDirection è impostata su Left o Right.

Quando si imposta una dimensione di dimensioni su un controllo Expander nella direzione in cui viene visualizzato il contenuto espanso, il Expander assume il controllo dell'area utilizzata dal contenuto e visualizza un bordo intorno a esso. Il bordo viene visualizzato anche quando il contenuto viene compresso. Per impostare le dimensioni dell'area del contenuto espanso, impostare le dimensioni sul contenuto del Expander, oppure, se si desidera la possibilità di scorrere, impostarle sul ScrollViewer che racchiude il contenuto.

Quando un controllo Expander è l'ultimo elemento di un DockPanel, Windows Presentation Foundation (WPF) imposta automaticamente le dimensioni Expander per eguagliare l'area rimanente del DockPanel. Per evitare questo comportamento predefinito, impostare la proprietà LastChildFill sull'oggetto DockPanel su falseoppure assicurarsi che l'Expander non sia l'ultimo elemento di un DockPanel.

Creazione di contenuto scorrevole

Se il contenuto è troppo grande per le dimensioni dell'area del contenuto, è possibile eseguire il wrapping del contenuto di un Expander in un ScrollViewer per fornire contenuto scorrevole. Il controllo Expander non fornisce automaticamente funzionalità di scorrimento. Nella figura seguente viene illustrato un controllo Expander che contiene un controllo ScrollViewer.

Expander in un ScrollViewer

Screenshot che mostra un elemento espandibile con barra di scorrimento.

Quando si posiziona un controllo Expander in un ScrollViewer, impostare la proprietà dimensionale ScrollViewer che corrisponde alla direzione di apertura del contenuto Expander alle dimensioni dell'area del contenuto Expander. Ad esempio, se si imposta la proprietà ExpandDirection sul Expander su Down (l'area del contenuto si apre verso il basso), impostare la proprietà Height sul controllo ScrollViewer all'altezza necessaria per l'area del contenuto. Se invece si imposta la dimensione di altezza sul contenuto stesso, ScrollViewer non riconosce questa impostazione e pertanto non fornisce contenuto scorrevole.

Nell'esempio seguente viene illustrato come creare un controllo Expander con contenuto complesso e che contiene un controllo ScrollViewer. In questo esempio viene creata una Expander simile all'illustrazione all'inizio di questa sezione.


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>

Utilizzo delle proprietà di allineamento

È possibile allineare il contenuto impostando le proprietà HorizontalContentAlignment e VerticalContentAlignment nel controllo Expander. Quando si impostano queste proprietà, l'allineamento si applica all'intestazione e anche al contenuto espanso.

Vedere anche