Panoramica sul controllo Expander

Articolo
06/02/2023

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

Creazione di un controllo Expander semplice

Nell'esempio seguente viene illustrato come creare un controllo semplice Expander . In questo esempio viene creato un oggetto Expander simile 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>

E Content Header di un Expander può contenere anche contenuto complesso, ad esempio RadioButton e Image oggetti .

Impostazione della direzione dell'area del contenuto espandibile

È possibile impostare l'area del contenuto di un Expander controllo per espandersi in una delle quattro direzioni (Down, Up, Lefto Right) usando la ExpandDirection proprietà . Quando l'area del contenuto è compressa, vengono visualizzati solo il pulsante e il Expander Header relativo interruttore. Un Button controllo che visualizza una freccia direzionale viene utilizzato come pulsante di attivazione/disattivazione per espandere o comprimere l'area del contenuto. Se espanso, tenta Expander 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 si trova all'interno di Expander un controllo di layout che eredita da Panel, ad esempio StackPanel, non specificare un Height oggetto in Expander quando la ExpandDirection proprietà è impostata su Down o Up. Analogamente, non specificare un Width oggetto in Expander quando la ExpandDirection proprietà è impostata su Left o Right.

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

Quando un Expander controllo è l'ultimo elemento di , DockPanelWindows Presentation Foundation (WPF) imposta automaticamente le Expander dimensioni su come uguale all'area rimanente dell'oggetto DockPanel. Per evitare questo comportamento predefinito, impostare la LastChildFill proprietà sull'oggetto falseDockPanel su o assicurarsi che Expander non sia l'ultimo elemento di un oggetto 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 oggetto in per ScrollViewer fornire contenuto scorrevole. Il Expander controllo non fornisce automaticamente funzionalità di scorrimento. Nella figura seguente viene illustrato un Expander controllo che contiene un ScrollViewer controllo .

Controllo Expander in un controllo ScrollViewer

Screenshot that shows an expander with ScrollBar.

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

Nell'esempio seguente viene illustrato come creare un Expander controllo con contenuto complesso e che contiene un ScrollViewer controllo . In questo esempio viene creato un oggetto 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>

Uso delle proprietà di allineamento

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

Condividi tramite