Expander 概觀

發行項
08/21/2008

更新：2007 年 11 月

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>

Content 和 Expander 的 Header 也會包含複雜的內容，例如，RadioButton 和 Image 物件。

設定展開內容區域的方向

您可以設定Expander 控制項的內容區域，使用 ExpandDirection 屬性，往任一個方向展開 (包括 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 中的最後一個項目。

建立可捲動的內容

如果內容大於內容區域的大小，則可以將 Expander 的內容換行到 ScrollViewer，才能提供可捲動的內容。Expander 控制項不會自動提供捲動功能。以下範例示範包含 ScrollViewer 控制項的 Expander 控制項。

ScrollViewer 的 Expander

具有 ScrollBar 的 Expander

當您將 Expander 控制項置於 ScrollViewer，請設定與方向相對應的 ScrollViewer 維度屬性，此方向就是 Expander 內容開啟至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>