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) 중 하나로 확장되도록 설정할 수 있습니다. 콘텐츠 영역이 축소되면 ExpanderHeader 및 토글 단추만 나타납니다. 방향 화살표를 표시하는 Button 컨트롤을 토글 단추로 사용하여 콘텐츠 영역을 확장하고 축소합니다. 확장하면 Expander에서 창과 같은 영역에 콘텐츠를 모두 표시합니다.
패널에서 확장기의 크기 제어
Expander 컨트롤이 StackPanel과 같은 Panel에서 상속되는 레이아웃 컨트롤 안에 있는 경우 ExpandDirection 속성이 Down 또는 Up로 설정되어 있다면 Expander에서 Height를 지정하지 마세요. 마찬가지로 ExpandDirection 속성이 Left 또는 Right로 설정되어 있다면 Expander에서 Width를 지정하지 마세요.
Expander 컨트롤에서 확장된 콘텐츠가 표시되는 방향으로 크기 차원을 설정하면 Expander가 콘텐츠에서 사용하는 영역을 컨트롤하고 해당 영역의 테두리를 표시합니다. 콘텐츠를 축소해도 테두리가 표시됩니다. 확장된 콘텐츠 영역의 크기를 설정하려면 Expander의 콘텐츠에서 크기 차원을 설정하거나, 스크롤링 기능을 원하는 경우에는 콘텐츠를 포함하는 ScrollViewer에서 크기 차원을 설정합니다.
Expander 컨트롤이 DockPanel에서 마지막 요소인 경우 Windows Presentation Foundation(WPF)는 DockPanel의 나머지 영역과 같게 Expander 차원을 자동으로 설정합니다. 이 기본 동작을 방지하려면 DockPanel 개체에서 LastChildFill 속성을 false로 설정하거나 Expander가 DockPanel에서 마지막 요소가 아니어야 합니다.
스크롤 가능한 콘텐츠 만들기
콘텐츠가 콘텐츠 영역의 크기에 비해 너무 큰 경우 스크롤 가능한 콘텐츠를 제공하기 위하여 ScrollViewer에서 Expander의 콘텐츠를 줄 바꿈할 수 있습니다. Expander 컨트롤은 스크롤 기능을 자동으로 제공하지 않습니다. 다음 그림은 ScrollViewer 컨트롤이 포함된 Expander 컨트롤을 보여 줍니다.
ScrollViewer의 확장기
ScrollBar를 통해 확장자를 보여주는 스크린샷.
Expander 컨트롤을 ScrollViewer에 배치할 때 Expander 콘텐츠가 열리는 방향에 해당하는 ScrollViewer 차원 속성을 Expander 콘텐츠 영역의 크기로 설정합니다. 예를 들어 Expander에서 ExpandDirection 속성을 Down으로 설정한 경우(콘텐츠 영역이 아래로 열림), ScrollViewer 컨트롤에서 Height 속성을 콘텐츠 영역에 필요한 높이로 설정합니다. 대신 콘텐츠 자체의 높이 차원을 설정하는 경우 ScrollViewer는 이 설정을 인식하지 않으므로 스크롤 가능 콘텐츠를 제공하지 않습니다.
다음 예제는 복잡한 콘텐츠가 있고 ScrollViewer 컨트롤을 포함하는 Expander 컨트롤을 만드는 방법을 보여 줍니다. 이 예제는 이 섹션의 시작 부분에 있는 그림과 같은 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>
맞춤 속성 사용
Expander 컨트롤에서 HorizontalContentAlignment 및 VerticalContentAlignment 속성을 설정하여 콘텐츠를 맞출 수 있습니다. 이러한 속성을 설정하면 맞춤이 헤더뿐만 아니라 확장된 콘텐츠에도 적용됩니다.
참고 항목
.NET Desktop feedback