Expander 개요

아티클
08/20/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>

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의 마지막 요소인 경우 WPF(Windows Presentation Foundation)에서 자동으로 Expander 크기를 DockPanel의 남은 영역과 동일하게 설정합니다. 이 기본 동작이 수행되지 않게 하려면 DockPanel 개체에 대한 LastChildFill 속성을 false로 설정하거나 Expander가 DockPanel의 마지막 요소가 되지 않게 합니다.

스크롤할 수 있는 콘텐츠 만들기

콘텐츠가 콘텐츠 영역 크기보다 큰 경우 Expander의 콘텐츠를 ScrollViewer에 래핑하여 스크롤할 수 있는 콘텐츠를 제공할 수 있습니다. Expander 컨트롤이 스크롤 기능을 자동으로 제공하는 것은 아닙니다. 다음 그림에서는 ScrollViewer 컨트롤을 포함하는 Expander 컨트롤을 보여 줍니다.

ScrollViewer에 포함된 Expander

ScrollBar가 있는 Expander

ScrollViewer 내부에 Expander 컨트롤을 배치하는 경우 Expander 콘텐츠가 열리는 방향에 해당하는 ScrollViewer 크기 속성을 Expander 콘텐츠 영역의 크기로 설정합니다. 예를 들어 Expander의 ExpandDirection 속성을 Down으로 설정한 경우, 즉 콘텐츠 영역이 아래쪽으로 열리는 경우 ScrollViewer 컨트롤의 Height 속성을 콘텐츠 영역에 필요한 높이로 설정합니다. 그렇지 않고 콘텐츠 자체의 높이로 설정하면 ScrollViewer가 이 설정을 인식하지 못하므로 스크롤할 수 있는 콘텐츠를 제공하지 않습니다.

다음 예제에서는 복합 콘텐츠가 있으며 ScrollViewer 컨트롤을 포함하는 Expander 컨트롤을 만드는 방법을 보여 줍니다. 이 예제에서는 이 단원의 시작 부분에 있는 그림과 비슷한 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>