エキスパンダーの概要
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 の 4 つのうちどの方向に展開するかを設定します。 コンテンツ領域が折りたたまれているときは、Expander Header およびそのトグル ボタンだけが表示されます。 方向を示す矢印を表示する Button コントロールが、コンテンツ エリアを展開したり折りたたんだりするためのトグル ボタンとして使用されます。 展開されると、Expander は、ウィンドウに似た領域にすべてのコンテンツを表示しようとします。
パネル内のエキスパンダーのサイズの制御
Expander コントロールが StackPanel などの Panel から継承されるレイアウト コントロールの内側にあり、ExpandDirection プロパティが Down または Up に設定されている場合は、Expander に対して Height を指定しないでください。 同様に、ExpandDirection プロパティが Left または Right に設定されている場合は、Expander に対して Width を指定しないでください。
展開されたコンテンツを表示する方向のサイズを Expander コントロールに対して設定すると、コンテンツが使用する領域はExpander によって制御され、その周囲に境界線が表示されます。 コンテンツが折りたたまれても境界線は表示されます。 展開されたコンテンツ領域のサイズを設定するには、Expander のコンテンツに対してサイズを設定します。スクロール可能にする場合は、コンテンツを囲む ScrollViewer に対してサイズを設定します。
Expander コントロールが DockPanel の最後の要素である場合は、DockPanel の残りの領域に等しくなるように、Expander のサイズが Windows Presentation Foundation (WPF) によって自動的に設定されます。 この既定の動作を回避するには、DockPanel オブジェクトの LastChildFill プロパティを false に設定するか、Expander が DockPanel の最後の要素にならないようにします。
スクロール可能なコンテンツの作成
コンテンツが大きすぎてコンテンツ領域に表示できない場合は、Expander のコンテンツを ScrollViewer でラップすると、コンテンツがスクロール可能になります。 Expander コントロールは、スクロール機能を自動的に持つわけではありません。 ScrollViewer コントロールを持つ Expander コントロールを次の図に示します。
ScrollViewer 内のエキスパンダー
.jpg "ScrollBar を持つ Expander")
Expander コントロールを ScrollViewer 内に配置する場合は、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>
配置プロパティの使用
コンテンツの配置 (左揃えや上揃えなど) を指定するには、Expander コントロールの HorizontalContentAlignment プロパティおよび VerticalContentAlignment プロパティを設定します。 これらのプロパティを設定すると、配置がヘッダーに適用され、展開されたコンテンツにも適用されます。