web-dev-qa-db-ja.com

TabControl.Headerの背景色を変更する方法

TabControlヘッダーの背景色を変更する必要がありますが、TabControlにはそのプロパティがありません。どうすればよいですか?お願い助けて。これが私のコードです:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="502" Width="628">
    <TabControl Background="#123" TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202">
        <TabControl.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" Direction="270"/>
        </TabControl.BitmapEffect>
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Padding" Value="0" />
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Border x:Name="grid" Background="Red">
                                <ContentPresenter>
                                    <ContentPresenter.Content>
                                        <TextBlock Margin="4" FontSize="15" Text="{TemplateBinding Content}"/>
                                    </ContentPresenter.Content>
                                    <ContentPresenter.LayoutTransform>
                                        <RotateTransform Angle="270" />
                                    </ContentPresenter.LayoutTransform>
                                </ContentPresenter>
                            </Border>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                                    <Setter TargetName="grid" Property="Background" Value="Green"/>
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="Tab Item 1" />
        <TabItem Header="Tab Item 2" />
        <TabItem Header="Tab Item 3" />
        <TabItem Header="Tab Item 4" />
    </TabControl>
</Window>

これが私の結果です: My result

これが私が必要とする結果です: Here is result that I need

17
Creative

次のスタイルをTabControl.Resourcesセクションに追加すると、必要な処理を実行できます。

<Style TargetType="{x:Type TabPanel}">
    <Setter Property="Background" Value="Black"></Setter>
</Style>
29
ShadeOfGrey

TabPanelのスタイルを設定する必要があります...基本的には、TabControlのTabPanelにタブを配置します。

以下のコードが役に立ちます。

<TabControl Background="#123" TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202">
            <TabControl.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Direction="270"/>
            </TabControl.BitmapEffect>
            <TabControl.Resources>
                <Style TargetType="{x:Type TabPanel}">
                    <Setter Property="Background" Value="Yellow"/>
                </Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Border x:Name="grid" Background="Red">
                                    <ContentPresenter>
                                        <ContentPresenter.Content>
                                            <TextBlock Margin="4" FontSize="15" Text="{TemplateBinding Content}"/>
                                        </ContentPresenter.Content>
                                        <ContentPresenter.LayoutTransform>
                                            <RotateTransform Angle="270" />
                                        </ContentPresenter.LayoutTransform>
                                    </ContentPresenter>
                                </Border>
                                <DataTemplate.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                                        <Setter TargetName="grid" Property="Background" Value="Green"/>
                                    </DataTrigger>
                                </DataTemplate.Triggers>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem Header="Tab Item 1" />
            <TabItem Header="Tab Item 2" />
            <TabItem Header="Tab Item 3" />
            <TabItem Header="Tab Item 4" />
        </TabControl>
4
David Bekham

上記の解決策は機能しませんでしたが、ウィンドウコントロールではなくユーザーコントロールにタブコントロールがありました。代わりにユーザーコントロールの背景色を設定すると、問題が修正されました。賛成票を投じた解決策が機能しない場合、これは同じ問題を抱えている他の人にとって役立つかもしれません。

3
Whirlwind991

ShadeOfGreyの回答が機能しない場合は、Gridの代わりにTabPanelを使用する必要があります。

<TabControl.Resources>
    <Style TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="WhiteSmoke"/>
    </Style>
</TabControl.Resources>
0
NEBEZ