如何使WPF TabItem标题的背景透明？ [英] How to make WPF TabItem Headers' Background transparent?

问题描述

我有一个TabControl和几个TabItems。每个TabItem都有一个带有TextBlock和一个图像的网格，其中包含透明区域。

我的目标是让文本和图像完全可见并看到Window.Background透过透明区域的图像。

问题：无论我尝试了什么，Image和TextBlock背后都有一个白色背景。

<我试图将TabControl Opacity设置为0，但是这使得整个事情消失，正如预期的那样。
与TabItem Opacity - > TabItem相同的结果不可见。
Next我将TabItems Foreground，BorderBrush和Background设置为Opacity =0什么都没有改变：（$ / b>

我对WPF和英语都比较陌生是不是我的母语，所以原谅我，如果我的问题是愚蠢的，我的英语不好。

预先感谢！

编辑（Screenshotlink）： http://i.stack.imgur.com/NN8AR。 png

因为我没有10个声望，所以我添加了链接。 $ b
我删除了图像，只留下了文本框，所以不存在任何混淆。

解决方案

制作一个自定义的TabItem ControlTemplate来做到这一点。

这是一个略有修改的TabItem ControlTemplate（稍微修改 default one）：

 < SolidColorBrush x：Key =SolidBorderBrushColor =＃888/> 
 
< SolidColorBrush x：Key =DisabledBorderBrushColor =＃AAA/> 
 
< SolidColorBrush x：Key =DisabledForegroundBrushColor =＃888/> 
 
< Style TargetType ={x：Type TabItem}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type TabItem}> 
<网格背景=透明> 
< Border 
 Name =Border
 Margin =0,0，-4,0
 Background =Transparent
 BorderBrush ={StaticResource SolidBorderBrush}
 BorderThickness =1,1,1,1
 CornerRadius =2,12,0,0> 
 ContentPresenter x：Name =ContentSite
 VerticalAlignment =Center
 Horizo​​ntalAlignment =Center
 ContentSource =Header
 Margin =12， 2,12,2
 RecognizesAccessKey =True/> 
< / Border> 
< / Grid> 
< ControlTemplate.Triggers> 
<触发属性=IsSelected值=真> 
< Setter Property =Panel.ZIndexValue =100/> 
< Setter TargetName =BorderProperty =BorderThicknessValue =1,1,1,0/> 
< /触发> 
<触发属性=IsEnabled值=假> 
< Setter TargetName =BorderProperty =BorderBrushValue ={StaticResource DisabledBorderBrush}/> 
< Setter Property =ForegroundValue ={StaticResource DisabledForegroundBrush}/> 
< /触发> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
  

您可能需要对其进行一些修改以显示选择了哪个TabItem（在触发器中IsSelected）。

I have a TabControl with a few TabItems. Each TabItem has a Grid with a TextBlock and one Image, which has transparent areas, in it.

My goal is to have the Text and the Image completely visible and see the Window.Background Image through the transparent areas.

Problem: No matter what I tried, there is a white background behind the Image and TextBlock I have set.

I tried to set the TabControl Opacity to 0, but that makes the whole thing dissapear, as expected. Same result with the TabItem Opacity -> TabItem gets invisible. Next I set the TabItems Foreground, BorderBrush and Background to Opacity="0" what changes nothing at all :(

I am relatively new to WPF and english is not my native language, so forgive me if my question is dumb and my english is bad.

Thanks in advance!

EDIT(Screenshotlink): http://i.stack.imgur.com/NN8AR.png

I can't post the screenshot, because I do not have 10 reputation, so I added the link to it.
I removed the images and only left the Textboxes so there is no confusion about that

解决方案

You will need to make a custom TabItem ControlTemplate to do so.

Here is a slightly modified TabItem ControlTemplate (slightly modified from the default one):

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid Background="Transparent">
                    <Border 
                            Name="Border"
                            Margin="0,0,-4,0" 
                            Background="Transparent"
                            BorderBrush="{StaticResource SolidBorderBrush}" 
                            BorderThickness="1,1,1,1" 
                            CornerRadius="2,12,0,0" >
                        <ContentPresenter x:Name="ContentSite"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header"
                              Margin="12,2,12,2"
                              RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You'll probably need to modify it a bit to show what TabItem is selected (in the Trigger on IsSelected).

这篇关于如何使WPF TabItem标题的背景透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！