Expander 概述

利用 Expander 控件可以在类似于窗口并包括标题的可展开区域中提供内容。

本主题包括下列各节。

• 创建简单的 Expander
• 设置展开内容区域的方向
• 在面板中控制 Expander 的大小
• 创建可滚动的内容
• 使用对齐方式属性
• 相关主题

创建简单的 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>

Expander 的 Content 和 Header 也可以包含复杂内容，比如 RadioButton 和 Image 对象。

设置展开内容区域的方向

通过使用 ExpandDirection 属性，您可以将 Expander 控件的内容区域设置为在四个方向的其中一个方向上展开（Down、Up、Left 或 Right）。 内容区域处于折叠状态时，只会显示 Expander Header 及其切换按钮。 将使用显示方向箭头的 Button 控件作为展开或折叠内容区域的切换按钮。 在展开时，Expander 将尝试在一个类似于窗口的区域中显示它的所有内容。

在面板中控制 Expander 的大小

如果 Expander 控件位于从 Panel（如 StackPanel）继承的布局控件的内部，当 ExpandDirection 属性设置为 Down 或 Up 时，不要在 Expander 上指定 Height。 同样，当 ExpandDirection 属性设置为 Left 或 Right 时，不要在 Expander 上指定 Width。

如果在 Expander 控件显示展开内容的方向上设置大小维度，Expander 将控制内容使用的区域，并在内容周围显示一个边框。 即使当内容处于折叠状态时，该边框也会显示。 若要设置展开内容区域的大小，请在 Expander 的内容上设置大小维度，或者，如果需要滚动功能，请在封闭内容的 ScrollViewer 上设置大小维度。

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

创建可滚动的内容

如果内容对于内容区域的大小而言太大，您可以在 ScrollViewer 中换行显示 Expander 的内容，以便提供可滚动的内容。 Expander 控件本身未自动提供滚动功能。 下图显示了一个包含 ScrollViewer 控件的 Expander 控件。

ScrollViewer 中的 Expander

如果将 Expander 控件放在 ScrollViewer 中，请将与 Expander 内容展开方向对应的 ScrollViewer 维度属性设置为 Expander 内容区域的大小。 例如，如果将 Expander 的 ExpandDirection 属性设置为 Down（内容区域向下展开），请将 ScrollViewer 控件的 Height 属性设置为内容区域的必需高度。 如果您设置的是内容本身的高度维度，ScrollViewer 将无法识别此设置，并因此无法提供可滚动的内容。

下面的示例演示如何创建一个 Expander 控件，该控件具有复杂内容并包含 ScrollViewer 控件。 此示例将创建一个与本节开头的插图类似的 Expander。

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>

使用对齐方式属性

可以通过在 Expander 控件上设置 HorizontalContentAlignment 和 VerticalContentAlignment 属性来对齐内容。 设置了这些属性后，对齐方式将应用于标题，并同时应用于展开的内容。

请参见

参考

Expander

ExpandDirection

其他资源

Expander 帮助主题