扩展器概述

Expander 控件提供了一种方法,用于在类似于窗口且包含标题的可扩展区域中提供内容。

创建简单的扩展器

以下示例演示如何创建简单的 Expander 控件。 此示例创建了一个类似于之前插图的 Expander

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

ContentHeaderExpander 还可以包含复杂内容,例如 RadioButtonImage 对象。

设置展开内容区域的方向

可以使用 Expander 属性设置 Down 控件的内容区域,以四个方向之一(UpLeftRightExpandDirection)展开。 当内容区域处于折叠状态时,仅显示 ExpanderHeader 及其切换按钮。 显示方向箭头的 Button 控件用作切换按钮以展开或折叠内容区域。 展开后,Expander 会尝试在类似窗口的区域中显示其所有内容。

控制面板中扩展器的大小

如果 Expander 控件位于从 Panel继承的布局控件内(如 StackPanel),则当 Height 属性设置为 ExpanderExpandDirection时,不会在 Down 上指定 Up。 同样,当 Width 属性设置为 ExpanderExpandDirection时,不要在 Left 上指定 Right

当您在 Expander 控件上设置与展开内容显示方向一致的大小维度时,Expander 会控制被内容使用的区域,并在其周围显示边框。 即使内容已折叠,也会显示该边框。 若要设置扩展内容区域的大小,请对 Expander的内容设置大小维度,或者如果需要滚动功能,请对包含内容的 ScrollViewer 设置大小维度。

Expander 控件是 DockPanel的最后一个元素时,Windows Presentation Foundation (WPF) 会自动将 Expander 维度设置为等于 DockPanel的剩余区域。 若要防止此默认行为,请将 LastChildFill 对象上的 DockPanel 属性设置为 false,或确保 Expander 不是 DockPanel中的最后一个元素。

创建可滚动内容

如果内容区域的大小不足以容纳内容,可以将 Expander 的内容包裹在 ScrollViewer 中,从而提供可滚动的内容。 Expander 控件不会自动提供滚动功能。 下图显示了包含 Expander 控件的 ScrollViewer 控件。

ScrollViewer 中的 Expander

屏幕截图,其中显示了带有 ScrollBar 的扩展器。

Expander中放置 ScrollViewer 控件时,设置与 ScrollViewer 内容打开方向相对应的 Expander 维度属性,使其与 Expander 内容区域的大小一致。 例如,如果将 ExpandDirection 上的 Expander 属性设置为 Down(内容区域关闭),请将 Height 控件上的 ScrollViewer 属性设置为内容区域所需的高度。 如果改为在内容本身上设置高度维度,ScrollViewer 无法识别此设置,因此不提供可滚动的内容。

以下示例演示如何创建一个包含复杂内容并含有 Expander 控件的 ScrollViewer 控件。 本示例创建一个 Expander,类似于本部分开头的插图。


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>


使用对齐属性

可以通过设置 HorizontalContentAlignment 控件上的 VerticalContentAlignmentExpander 属性来对齐内容。 设置这些属性时,对齐方式将同时应用于标头和扩展内容。

另请参阅