Silverlight／WPFで使える逆引きTips集
――タブ機能

（7） TabControlとTabItemコントロール

2011/02/01 14:00

ポスト

ダウンロード TabControl_WPF_VB.zip (77.9 KB)
ダウンロード TabControl_WPF_CS.zip (73.8 KB)
ダウンロード TabControl_Silverlight_VB.zip (418.3 KB)
ダウンロード TabControl_Silverlight_CS.zip (345.1 KB)

09.タブの背景色を設定する

　タブの背景色はTabItemのBackgroundプロパティで設定することができますが、ここで指定した色はタブが未選択の場合の色です。

　タブの選択時やマウスオーバー時などを任意の色に変更したい場合には、コントロールテンプレートを使用します。

　WPFとSilverlightではXAMLの記述方法が異なるので、それぞれ分けて説明します。

　完成したコントロールテンプレートを適用したイメージを下記に示します。

タブの背景色を設定する例（WPF）

タブの背景色を設定する例（Silverlight）

　最初はWPFです。はじめに、リソースとしてSolidColorBrush（純色）やLinearGradientBrush（線形グラデーション）を使用して、背景色や枠線の色などを下記のように定義しておきます。

リソースを定義するXAMLの例

<Window.Resources>
    <!-- TabItemの枠線の色 -->
    <SolidColorBrush x:Key="TabItemNormalBorderBrush" Color="Black"/>
    <!-- TabItemの背景色 -->
    <LinearGradientBrush x:Key="TabItemBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B5D8FB" Offset="0"/>
        <GradientStop Color="#6DB9F1" Offset="0.5"/>
        <GradientStop Color="#0493E8" Offset="0.5"/>
        <GradientStop Color="#1CC0FF" Offset="1"/>
    </LinearGradientBrush>
    <!-- TabItemのマウスオーバー時の背景色 -->
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#C1D9C7" Offset="0.15"/>
        <GradientStop Color="#6EA5A4" Offset=".5"/>
        <GradientStop Color="#20BBD2" Offset=".5"/>
        <GradientStop Color="#47D9D3" Offset="1"/>
    </LinearGradientBrush>
    <!-- TabItemのマウスオーバー時の枠線の色 -->
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="Red"/>
    <!-- TabItem選択時の背景色 -->
    <LinearGradientBrush x:Key="TabItemSelectedBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B4C6D3" Offset="0"/>
        <GradientStop Color="#2D678E" Offset="0.5"/>
        <GradientStop Color="#044977" Offset="0.5"/>
        <GradientStop Color="#06E1FA" Offset="1"/>
    </LinearGradientBrush>
    <!-- TabItem無効化時の色 -->
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="DarkGray"/>
    <!-- TabItem無効化時の枠線の色 -->
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
    
    <!-- ここでTabItemのスタイルを設定 -->
</Window.Resources>

　上記で定義したリソースにはそれぞれ名前を付けておきました。この名前は、後述するテンプレートから使用します。

　定義した「リソースの名前」と「使用する箇所の説明」を下記に示します。

リソース名と使用箇所

リソース名	使用箇所
TabItemNormalBorderBrush	TabItemの枠線の色
TabItemBackground	TabItemの背景色
TabItemHotBackgroun	TabItemのマウスオーバー時の背景色
TabItemHotBorderBrush	TabItemのマウスオーバー時の枠線の色
TabItemSelectedBackground	TabItem選択時の背景色
TabItemDisabledBackground	TabItem無効化時の色
TabItemDisabledBorderBrush	TabItem無効化時の枠線の色

　次にTabItemのスタイルを作成します。

　Foreground（タブの文字の色）プロパティにはWhiteを、BorderBrush（枠線の色）プロパティにはリソースのTabItemNormarBrushを、Background（背景色）プロパティにはリソースのTabItemBackgroundを設定しています。

下記の「TabItemスタイルXAMLの例」は先ほど示したXAMLのの位置に記述します。

TabItemスタイルのXAMLの例

<Style TargetType="{x:Type TabItem}">
    <!-- TabItemの文字の色 -->
    <Setter Property="Foreground" Value="White"/>
    <!-- TabItemの枠線の色-->
    <Setter Property="BorderBrush" Value="{StaticResource TabItemNormalBorderBrush}"/>
    <!-- TabItemの背景色の設定 -->
    <Setter Property="Background" Value="{StaticResource TabItemBackground}"/>
    <Setter Property="Template">
    
    
    <!-- ここでコントロールテンプレートを設定 -->
</Style >

　続いて、コントロールテンプレートの定義を記述します。

　コントロールテンプレートでは、マウスオーバー時、タブの選択時、タブの無効化時など、アクションがあった場合の色を設定します。

　アクション時の設定は<ControlTemplate.Triggers>の中で行います。

　IsMouseOverプロパティでマウスオーバー時の色を、IsSelectedプロパティで選択時の色を、IsEnabledプロパティで無効化時の色をそれぞれ設定しています。

下記の「コントロールテンプレートXAMLの例」は先ほど示したXAMLのの位置に記述します。

コントロールテンプレートXAMLの例

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid SnapsToDevicePixels="true">
                <Border x:Name="Bd" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="1,1,1,0" 
                        Background="{TemplateBinding Background}" 
                        Padding="{TemplateBinding Padding}">
                    <ContentPresenter x:Name="Content" 
                                      ContentSource="Header" 
                                      HorizontalAlignment="{Binding HorizontalContentAlignment, 
                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                                      RecognizesAccessKey="True" 
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                      VerticalAlignment="{Binding VerticalContentAlignment, 
                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <!-- マウスオーバー時の背景色 -->
                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Panel.ZIndex" Value="1"/>
                    <!-- 選択時の背景色 -->
                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="false"/>
                        <Condition Property="IsMouseOver" Value="true"/>
                    </MultiTrigger.Conditions>
                    <!-- マウスオーバー時の枠線の色 -->
                    <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                </MultiTrigger>

                <Trigger Property="IsEnabled" Value="false">
                    <!-- 無効化時の背景色 -->
                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                    <!-- 無効化時の枠線の色-->
                    <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                    <!-- 無効化時の文字の色 -->
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

　以上がタブの背景色を変更するリソースとなります。

　このリソースが定義されたWindow内にTabControlを配置すると、冒頭で示した外観を持つタブコントロールが表示されます。

　次にSilverlightでのXAMLについて説明します。

　はじめに、リソースとしてSolidColorBrush（純色）やLinearGradientBrush（線形グラデーション）を使用して、タブ未選択時の背景色と選択時の背景色を下記のように定義しておきます。

リソースを定義するXAMLの例

<UserControl.Resources>
    <!-- TabItemの未選択時の背景色 -->
    <LinearGradientBrush x:Key="TabItemBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B5D8FB" Offset="0"/>
        <GradientStop Color="#6DB9F1" Offset="0.5"/>
        <GradientStop Color="#0493E8" Offset="0.5"/>
        <GradientStop Color="#1CC0FF" Offset="1"/>
    </LinearGradientBrush>
    <!-- TabItem選択時の背景色 -->
    <LinearGradientBrush x:Key="TabItemSelectedBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B4C6D3" Offset="0"/>
        <GradientStop Color="#2D678E" Offset="0.5"/>
        <GradientStop Color="#044977" Offset="0.5"/>
        <GradientStop Color="#06E1FA" Offset="1"/>
    </LinearGradientBrush>

    <!-- ここでTabItemのスタイルを設定 -->
</UserControl.Resources>

　上記で定義したリソースにはそれぞれ名前を付けておきました。この名前は、後述するテンプレートから使用します。

　定義した「リソースの名前」と「使用する箇所の説明」を下記に示します。

リソース名と使用箇所

リソース名	使用箇所
TabItemBackground	TabItemの未選択時の背景色
TabItemSelectedBackground	TabItem選択時の背景色

　次にTabItemのスタイルを作成します。

　Foreground（タブの文字の色）プロパティにはWhiteを、BorderBrush（枠線の色）プロパティにはリソースのTabItemNormarBrushを、Background（背景色）プロパティにはリソースのTabItemBackgroundを設定しています。

下記の「TabItemスタイルXAMLの例」は先ほど示したXAMLのの位置に記述します。

TabItemスタイルのXAMLの例

<Style TargetType="sdk:TabItem">
    <Setter Property="IsTabStop" Value="False"/>
    <!-- タブアイテムの文字の色 -->
    <Setter Property="Foreground" Value="White" />
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="6,2,6,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="5"/>
    <Setter Property="MinHeight" Value="5"/>
    
    <!-- ここでコントロールテンプレートを設定 -->
</Style>

　次はコントロールテンプレートの定義を記述します。

　コントロールテンプレートでは、マウスオーバー時、タブの選択時、タブの無効化時など、アクションがあった場合の色を設定します。

　Silverlightでは、タブを上部、右部、下部、左部に配置した場合のそれぞれに対して定義するため、XAMLは長くなります。

　ここでは既定値の配置である「上部」の場合のコントロールテンプレートについて説明します（すべてのコードはサンプルソースコードをダウンロードして参照ください）。

　マウスオーバー時は、マウスがタブの上に乗ったときに徐々に色が変わるように設定するために<Storyboard>で<ColorAnimationUsingKeyFrames>を使用して色がグラデーションになるように設定しています。

　次にタブの選択時と未選択時ですが、<Grid X:Name="TemplateTopSelected" ～　の箇所が選択時を表しており、<Grid x:name="TemplateTopUnselected" ～が未選択時を表しています。それぞれ最初に定義したリソースを使用した色を設定しています。

下記の「コントロールテンプレートXAMLの例」は先ほど示したXAMLのの位置に記述します。

コントロールテンプレートXAMLの例

<ControlTemplate TargetType="sdk:TabItem">
    <Grid x:Name="Root">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                :省略（サンプルコードをダウンロードして確認してください）
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="BorderTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                        </ColorAnimationUsingKeyFrames>

                        <!-- 上部に配置されたタブがマウスオーバーされたときの背景色-->
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#6EA5A4"/>
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#20BBD2"/>
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#47D9D3"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                :省略（サンプルコードをダウンロードして確認してください）
        </VisualStateManager.VisualStateGroups>

        <!-- 上部に配置されたタブの選択時 -->
        <Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{Binding Background}" CornerRadius="3,3,0,0" Margin="-2,-2,-2,0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
                    <Grid>
                        <!-- 選択時の背景色 -->
                        <Rectangle Fill="{StaticResource TabItemSelectedBackground}" Margin="0,0,0,-2"/>
                        <ContentControl x:Name="HeaderTopSelected" 
                                        Cursor="{TemplateBinding Cursor}" 
                                        Foreground="{TemplateBinding Foreground}" 
                                        FontSize="{TemplateBinding FontSize}" 
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                        IsTabStop="False" 
                                        Margin="{TemplateBinding Padding}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                    </Grid>
                </Border>
            </Border>
            <Border x:Name="FocusVisualTop" BorderBrush="#FF6DBDD1" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Visibility="Collapsed"/>
            <Border x:Name="DisabledVisualTopSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Opacity="0"/>
        </Grid>

        <!-- 上部に配置されたタブの未選択時 -->
        <Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
            <Border x:Name="BorderTop" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="3,3,0,0">
                <Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0"
                        Background="{StaticResource TabItemBackground}">
                    <!-- 未選択時の背景色 -->
                    <Grid>
                        <ContentControl x:Name="HeaderTopUnselected" Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                    </Grid>
                </Border>
            </Border>
            <Border x:Name="DisabledVisualTopUnSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Opacity="0"/>
        </Grid>
        
        :省略（サンプルコードをダウンロードして確認してください）
    </Grid>
</ControlTemplate>

　以上のリソースを適用すると、冒頭で示した外観を持つタブコントロールになります。

ポイント

　タブの背景色を変更するにはコントロールテンプレートを使用する。

次のページ
10.タブ数を取得する

この記事は参考になりましたか？

印刷用を表示

ポスト

Silverlight／WPFで使える逆引きTips集連載記事一覧: Silverlight／WPFで使える逆引きTips集　――マルチタッチ機能

Silverlight／WPFで使える逆引きTips集　――DataGrid機能（Silv...

Silverlight／WPFで使える逆引きTips集　――DataGrid機能（Silv...

もっと読む

この記事の著者: HIRO（ヒロ）

HIRO's.NETのHIROです。とある半導体工場のSEです。VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。最近はBlog でPowerShellについて書いています。2008/07/07にPowerShell from Japan!!というサイトを立ち上げまし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事