今日は、HeaderedContentControlについてみてみようと思う。
これは、ヘッダーがあってコンテンツがあるコントロールの基本となります。
例えば、ExpanderやGroupBoxやTabItemが子クラスにいたりする。
つまり、こいつを使いこなせれば、子供もお手の物！！
というわけで小さなサンプルをこさえてみた。
<Window x:Class="WpfHeader.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<HeaderedContentControl Header="へっだー" Content="こんてんつ">
</HeaderedContentControl>
</Grid>
</Window>
実行すると、こんな感じになる。
ContentはContentControlと同じように任意のオブジェクトを突っ込んで、任意のDataTemplateとかをあてて好きに出来る。
HeaderもContentと同じように好きなものを設定可能になってる。
さて、ここでちょっぴり疑問なのが、ControlTemplateをあてるときに、どうやってHeaderの値を表示するんだろう？ということですね！
HeaderTemplateとかの値も反映しようと思うとちょっと悩む。とりあえず、Content部分のみをBorderで囲むテンプレートをこさえてみる。
<Window x:Class="WpfHeader.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<HeaderedContentControl Header="へっだー" Content="こんてんつ">
<HeaderedContentControl.Template>
<!-- ちょっと丸みのある感じにしてみた -->
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Grid>
<Border CornerRadius="5"
Background="LightBlue"
BorderThickness="2"
BorderBrush="Blue">
<ContentPresenter />
</Border>
</Grid>
</ControlTemplate>
</HeaderedContentControl.Template>
</HeaderedContentControl>
</Grid>
</Window>
実行すると下のようになる。
ContentPresenterを使ってコンテンツをばっちり表示できて涼しそうな色にすることが出来た。
ヘッダーは消えたけどな！
ということで、HeaderをControlTemplateで表示する方法！！
ContentPresenterにContentSourceというプロパティがある。そこにHeaderとか設定すると、Headerのデータをもとに表示しようと頑張ってくれるようだ。
ということでControlTemplateにHeaderを表示するContentPresenterを置いてみた。ちょっと変わった感じを出すために、ヘッダーをあえて下に表示するようにしてみた。
<Window x:Class="WpfHeader.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<HeaderedContentControl Header="へっだー" Content="こんてんつ">
<HeaderedContentControl.Template>
<!-- ちょっと丸みのある感じにしてみた -->
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border CornerRadius="5"
Background="LightBlue"
BorderThickness="2"
BorderBrush="Blue">
<ContentPresenter />
</Border>
<!-- ヘッダーをあえて下にしてみた！ -->
<Border Grid.Row="1"
CornerRadius="5"
Background="LightBlue"
BorderThickness="2"
BorderBrush="Blue">
<ContentPresenter ContentSource="Header"/>
</Border>
</Grid>
</ControlTemplate>
</HeaderedContentControl.Template>
</HeaderedContentControl>
</Grid>
</Window>
早速実行してみた。
うまくいった～。ばっちりだ！