タブコントロール
最終更新:
atachi
-
view
タブアイテムへの画像表示
<Window x:Class="TabControlTutorial.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Tabs" Height="281" Width="454">
<Grid>
<TabControl>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="18" Source="cheese.jpg" />
<TextBlock Text="Cheese" Margin="2,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="18" Source="pepperoni.jpg" />
<TextBlock Text="Pepperoni" Margin="2,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="18" Source="mushrooms.jpg" />
<TextBlock Text="Mushrooms" Margin="2,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
</TabControl>
</Grid>
</Window>
コントロールテンプレート
TabItemへの適応
タブコントロールに表示されるタブの部分(TabItem)のテンプレートを定義します。
#ref error :ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (TabItemControlTemplate1.png)
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<!-- タブの枠(ボーダー)の設定 -->
<Border
Name="Border"
Background="LightBlue"
BorderBrush="#2E7992"
BorderThickness="1,2,1,2"
CornerRadius="6,6,0,0"
>
<ContentPresenter
x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2" />
</Border>
</Grid>
<!-- トリガー -->
<ControlTemplate.Triggers>
<!-- 「TabItem.IsSelected == True」の場合 -->
<Trigger Property="IsSelected" Value="True">
<!-- TargetNameは上で定義したBorder要素を指す -->
<Setter
TargetName="Border"
Property="Background"
Value="LightBlue" />
</Trigger>
<!-- 「TabItem.IsSelected == False」の場合 -->
<Trigger Property="IsSelected" Value="False">
<Setter
TargetName="Border"
Property="Background"
Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
グラデーション化とリソース化
このセクションではTabItemの背景をグラデーションに塗りつぶし、複数箇所で使用しても使いやすいようにブラシをリソースとして定義します。
#ref error :ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (TabItemControlTemplate2.png)
最初にある「SelectableTabItemBackgroundBrush」と「DisabledTabItemBackgroundBrush」は線形グラデーションのブラシです。
<LinearGradientBrush x:Key="SelectableTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientBrush.GradientStops>
<GradientStop Color="LightBlue" Offset="0.0"/>
<GradientStop Color="White" Offset="1.0"/>
</GradientBrush.GradientStops>
</LinearGradientBrush >
<LinearGradientBrush x:Key="DisabledTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientBrush.GradientStops>
<GradientStop Color="LightBlue" Offset="0.0"/>
<GradientStop Color="Gray" Offset="1.0"/>
</GradientBrush.GradientStops>
</LinearGradientBrush >
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<!-- タブの枠(ボーダー)の設定 -->
<Border
Name="Border2"
BorderBrush="#2E7992"
Background="{StaticResource SelectableTabItemBackgroundBrush}"
BorderThickness="1,2,1,2"
CornerRadius="6,6,0,0"
>
<ContentPresenter
x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2" />
</Border>
</Grid>
<!-- トリガー -->
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter
TargetName="Border2"
Property="Background"
Value="{StaticResource SelectableTabItemBackgroundBrush}"
/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter
TargetName="Border2"
Property="Background"
Value="{StaticResource DisabledTabItemBackgroundBrush}"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>