Cenni preliminari sul controllo Expander

Articolo
08/11/2011

Il controllo Expander consente di fornire contenuto in un'area espandibile dall'aspetto di una finestra e che include un'intestazione.

Nel presente argomento sono contenute le seguenti sezioni.

Creazione di un controllo Expander semplice
Impostazione della direzione dell'area del contenuto espandibile
Controllo delle dimensioni di un controllo Expander in un pannello
Creazione di contenuto scorrevole
Utilizzo delle proprietà di allineamento
Argomenti correlati

Creazione di un controllo Expander semplice

Nell'esempio seguente viene illustrato come creare un controllo Expander semplice. Viene creato un controllo Expander simile a quello riportato nell'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>

Le proprietà Content e Header di un controllo Expander possono anche contenere contenuto complesso, ad esempio oggetti RadioButton e Image.

Impostazione della direzione dell'area del contenuto espandibile

È possibile impostare l'area del contenuto di un controllo Expander in modo che si espanda in una di quattro direzioni (Down, Up, Left o Right) tramite la proprietà ExpandDirection. Quando l'area del contenuto è compressa, vengono visualizzati solo l'oggetto Expander Header e il relativo interruttore. Come interruttore per espandere o comprimere l'area del contenuto viene utilizzato un controllo Button che visualizza una freccia direzionale. Quando è espanso, il controllo Expander tenta di visualizzare tutto il contenuto in un'area simile a una finestra.

Controllo delle dimensioni di un controllo Expander 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 una proprietà Height per il controllo Expander quando la proprietà ExpandDirection è impostata su Down o su Up. Analogamente, non specificare una proprietà Width per il controllo Expander quando la proprietà ExpandDirection è impostata su Left o su Right.

Quando si imposta una dimensione per un controllo Expander nella direzione in cui viene visualizzato il contenuto espanso, Expander assume il controllo dell'area utilizzata dal contenuto e visualizza un bordo che la circonda. Il bordo viene visualizzato anche quando il contenuto è compresso. Per impostare le dimensioni dell'area del contenuto espansa, impostare le dimensioni sul contenuto del controllo Expander o, se si desidera la funzionalità di scorrimento, sul controllo ScrollViewer che racchiude il contenuto.

Quando un controllo Expander è l'ultimo elemento di un oggetto DockPanel, in Windows Presentation Foundation (WPF) le dimensioni di Expander vengono automaticamente impostate in modo che siano uguali all'area rimanente dell'oggetto DockPanel. Per evitare questo comportamento predefinito, impostare su false la proprietà LastChildFill per l'oggetto DockPanel o assicurarsi che il controllo Expander non sia l'ultimo elemento di un oggetto DockPanel.

Creazione di contenuto scorrevole

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

Controllo Expander in un controllo ScrollViewer

Expander con ScrollBar

Quando si inserisce un controllo Expander in un controllo ScrollViewer, impostare la proprietà della dimensione di ScrollViewer che corrisponde alla direzione in cui si apre il contenuto del controllo Expander sulle dimensioni dell'area del contenuto del controllo Expander. Ad esempio, se si imposta la proprietà ExpandDirection per il controllo Expander su Down (l'area del contenuto si apre verso il basso), impostare la proprietà Height del controllo ScrollViewer sull'altezza richiesta per l'area del contenuto. Se invece la dimensione dell'altezza viene impostata sul controllo stesso, ScrollViewer non riconosce questa impostazione e pertanto non fornisce contenuto scorrevole.

Nell'esempio seguente viene illustrato come creare un controllo Expander che include contenuto complesso e che contiene un controllo ScrollViewer. Viene creato un controllo Expander simile a quello dell'illustrazione riportata all'inizio di questa sezione.


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>

Utilizzo delle proprietà di allineamento

Per allineare il contenuto, è possibile impostare le proprietà HorizontalContentAlignment e VerticalContentAlignment per il controllo Expander. Quando si impostano queste proprietà, l'allineamento si applica all'intestazione e anche al contenuto espanso.