Vue d'ensemble de l'Expandeur

Un Expander contrôle permet de fournir du contenu dans une zone extensible qui ressemble à une fenêtre et inclut un en-tête.

Créer un Expander simple

L’exemple suivant montre comment créer un contrôle simple Expander . Cet exemple crée un Expander élément qui ressemble à l’illustration précédente.

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

L’objet Content et Header l’un Expander peuvent également contenir du contenu complexe, tel que RadioButton des objets et Image des objets.

Définir la direction de la zone de contenu extensible

Vous pouvez définir la zone de contenu d’un Expander contrôle à développer dans l’une des quatre directions (Down, , UpLeftou Right) à l’aide de la ExpandDirection propriété. Lorsque la zone de contenu est réduite, seul le ExpanderHeader bouton bascule et le bouton bascule s’affichent. Un Button contrôle qui affiche une flèche directionnelle est utilisé comme bouton bascule pour développer ou réduire la zone de contenu. Lorsqu’il est développé, il Expander tente d’afficher tout son contenu dans une zone de type fenêtre.

Contrôler la taille d’un Expander dans un panneau

Si un contrôle se trouve à l’intérieur d’un Expander contrôle de disposition qui hérite Panel, par exemple StackPanel, ne spécifiez pas d’élément Height sur le Expander moment où la ExpandDirection propriété est définie Down sur ou Up. De même, ne spécifiez pas une Width valeur sur la Expander valeur ou Rightla valeur de la ExpandDirection propriété Left .

Lorsque vous définissez une dimension de taille sur un Expander contrôle dans la direction dans laquelle le contenu développé est affiché, le Expander contrôle de la zone utilisée par le contenu et affiche une bordure autour de celle-ci. La bordure s’affiche même lorsque le contenu est réduit. Pour définir la taille de la zone de contenu développée, définissez les dimensions de taille sur le contenu du Expandercontenu, ou si vous souhaitez faire défiler la fonctionnalité, sur le ScrollViewer contenu englobant le contenu.

Lorsqu’un Expander contrôle est le dernier élément d’un DockPanel, Windows Presentation Foundation (WPF) définit automatiquement les Expander dimensions pour qu’elles correspondent à la zone restante du DockPanel. Pour empêcher ce comportement par défaut, définissez la LastChildFill propriété sur l’objet falseDockPanel sur , ou assurez-vous que l’élément Expander n’est pas le dernier élément d’un DockPanel.

Créer du contenu déroulant

Si le contenu est trop volumineux pour la taille de la zone de contenu, vous pouvez encapsuler le contenu d’un ExpanderScrollViewer élément afin de fournir du contenu défilant. Le Expander contrôle ne fournit pas automatiquement de fonctionnalité de défilement. L’illustration suivante montre un Expander contrôle qui contient un ScrollViewer contrôle.

Expander dans un ScrollViewer

Lorsque vous placez un Expander contrôle dans un ScrollViewer, définissez la ScrollViewer propriété de dimension qui correspond à la direction dans laquelle le Expander contenu s’ouvre à la taille de la Expander zone de contenu. Par exemple, si vous définissez la ExpandDirection propriété sur la DownExpander valeur (la zone de contenu s’ouvre), définissez la Height propriété sur le ScrollViewer contrôle sur la hauteur requise pour la zone de contenu. Si vous définissez plutôt la dimension de hauteur sur le contenu lui-même, ScrollViewer ne reconnaît pas ce paramètre et, par conséquent, ne fournit pas de contenu défilant.

L’exemple suivant montre comment créer un contrôle qui a du Expander contenu complexe et qui contient un ScrollViewer contrôle. Cet exemple crée un Expander exemple semblable à l’illustration au début de cette section.

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>

Utiliser les propriétés d’alignement

Vous pouvez aligner le contenu en définissant les propriétés et VerticalContentAlignment les HorizontalContentAlignment propriétés sur le Expander contrôle. Lorsque vous définissez ces propriétés, l’alignement s’applique à l’en-tête ainsi qu’au contenu développé.

Voir aussi

• Expander
• ExpandDirection
• Guides pratiques