Общие сведения об элементе управления Expander

Статья
11/05/2008

Обновлен: Ноябрь 2007

Элемент управления 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 и Header элемента управления Expander могут также включать сложное содержимое, например объекты RadioButton и Image.

Задание направления развертывающейся области содержимого

Можно задать содержимое области элемента управления Expander для развертывания в одном из четырех направлений (Down, Up, Left или Right), используя свойство ExpandDirection. Когда область содержимого свернута, отображается только Expander Header и его выключатель. Элемент управления Button, отображающий стрелку направления, используется в качестве выключателя для развертывания или свертывания области содержимого. При развертывании Expander пытается отобразить все содержимое в области, подобной окну.

Управление размером элемента управления Expander на панели

Если элемент управления Expander находится внутри элемента управления макетом, наследуемого из Panel, например StackPanel, не указывайте свойство Height в элементе Expander, если для свойства ExpandDirection задано значение Down или Up. Так же не указывайте свойство Width в элементе Expander, если для свойства ExpandDirection задано значение Left или Right.

Если задается размерность элемента управления Expander в направлении отображения развернутого содержимого, то Expander принимает управление областью, которая используется содержимым, и отображает рамку вокруг нее. Рамка отображается даже тогда, когда содержимое свернуто. Чтобы установить размер развернутой области содержимого, задайте размерности для содержимого Expander или, если требуется возможность прокрутки, для элемента ScrollViewer, вмещающего содержимое.

Когда элемент управления Expander является последним элементом в DockPanel, Windows Presentation Foundation (WPF) автоматически устанавливает размерности равными оставшейся области Expander DockPanel. Чтобы избежать такой настройки по умолчанию, задайте для свойства LastChildFill в объекте DockPanel значение false или убедитесь, что Expander не является последним элементом в DockPanel.

Создание прокручиваемого содержимого

Если содержимое слишком велико для размера области содержимого, то можно поместить содержимое Expander в элемент ScrollViewer, чтобы обеспечить прокрутку содержимого. Элемент управления Expander автоматически не предоставляет возможность прокрутки. На следующем рисунке показан элемент управления Expander, содержащий элемент управления ScrollViewer.

Expander в ScrollViewer

Элемент управления Expander со ScrollBar

При помещении элемента управления Expander в элемент управления ScrollViewer задайте свойство размерности ScrollViewer, соответствующее направлению, в котором открывается содержимое Expander, по размеру области содержимого Expander. Например, если для свойства ExpandDirection в элементе управления Expander задается значение Down (область содержимого открывается вниз), то нужно задать для свойства Height в элементе управления ScrollViewer требуемую высоту для области содержимого. Если вместо этого задать размерность высоты самого содержимого, то 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>

Использование свойств выравнивания

Можно выровнять содержимое, задавая свойства HorizontalContentAlignment и VerticalContentAlignment в элементе управления Expander. При задании этих свойств выравнивание применяется к заголовку и развернутому содержимому.