WPF TabItem页眉样式 [英] WPF TabItem Header Styling

问题描述

我尝试设计一个TabControl，并且有75％的方式，但是我在设计实际的TabItems时遇到了困难：

我在努力实现的目标是删除默认的ContentPresenter，这样我可以使标签项目部分透明的圆边，而不是红色和绿色的地方持有人现在。

我相信它是可能不是那么困难，但我无法弄清楚，所以任何帮助都将得到最多的赞赏！

以下是到目前为止的TabControl的XAML：

 < TabControl TabStripPlacement =LeftHorizo​​ntalAlignment =StretchBorderBrush =＃41020202> 
< TabControl.BitmapEffect> 
< DropShadowBitmapEffect Color =BlackDirection =270/> 
 < TabControl.Resources> 
< Style TargetType ={x：Type TabItem}> 
< Setter Property =BorderThicknessValue =0/> 
< Setter Property =PaddingValue =0/> 
< Setter Property =HeaderTemplate> 
< Setter.Value> 
< DataTemplate> 
< Border x：Name =gridBackground =Red> 
< ContentPresenter> 
< ContentPresenter.Content> 
< TextBlock Margin =4FontSize =15Text ={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 =gridProperty =BackgroundValue =Green/> 
< / DataTrigger> 
< /DataTemplate.Triggers> 
< / DataTemplate> 
 < / Setter> 
< / style> 
 < TabControl.Background> 
< RadialGradientBrush Center = -  0.047,0.553GradientOrigin = -  0.047,0.553RadiusY =1.231RadiusX =0.8> 
< GradientStop Offset =1Color =＃06FFFFFF/> 
< GradientStop Color =＃14FFFFFF/> 
< / RadialGradientBrush> 
 < TabItem Header =Tab Item 1/> 
< TabItem Header =Tab Item 2/> 
< TabItem Header =Tab Item 3/> 
< TabItem Header =Tab Item 4/> 
< / TabControl> 
  

解决方案

试试这个样式，它会修改模板本身。在那里你可以改变你需要透明的所有东西：

 < Style TargetType ={x：Type TabItem}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type TabItem}> 
<网格> 
< Border Name =BorderMargin =0,0,0,0Background =Transparent
 BorderBrush =BlackBorderThickness =1,1,1,1CornerRadius = 5 > 
< ContentPresenter x：Name =ContentSiteVerticalAlignment =Center
 Horizo​​ntalAlignment =Center
 ContentSource =HeaderMargin =12,2,12,2
 RecognizesAccessKey =True> 
< ContentPresenter.LayoutTransform> 
< RotateTransform Angle =270/> 
< /ContentPresenter.LayoutTransform> 
< / ContentPresenter> 
< / Border> 
< / Grid> 
< ControlTemplate.Triggers> 
<触发属性=IsSelected值=真> 
< Setter Property =Panel.ZIndexValue =100/> 
< Setter TargetName =BorderProperty =BackgroundValue =Red/> 
< Setter TargetName =BorderProperty =BorderThicknessValue =1,1,1,0/> 
< /触发> 
<触发属性=IsEnabled值=假> 
< Setter TargetName =BorderProperty =BackgroundValue =DarkRed/> 
< Setter TargetName =BorderProperty =BorderBrushValue =Black/> 
< Setter Property =ForegroundValue =DarkGray/> 
< /触发> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
  

I'm trying to style a TabControl and have got 75% of the way there, but I'm having difficulty styling the actual TabItems:

What I am trying to achieve is remove the default ContentPresenter so that I can make the tab items partially transparent with rounded edges instead of the place holder red and green i have now.

I'm sure it's probably not that difficult, but I just can't figure it out so any help would be most appreciated!

Here's the XAML for the TabControl so far:

<TabControl 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>
  <TabControl.Background>
    <RadialGradientBrush Center="-0.047,0.553" GradientOrigin="-0.047,0.553" RadiusY="1.231" RadiusX="0.8">
      <GradientStop Offset="1" Color="#06FFFFFF"/>
      <GradientStop Color="#14FFFFFF"/>
    </RadialGradientBrush>
  </TabControl.Background>  
  <TabItem Header="Tab Item 1" />  
  <TabItem Header="Tab Item 2" />  
  <TabItem Header="Tab Item 3" />  
  <TabItem Header="Tab Item 4" />
</TabControl>

解决方案

Try this style instead, it modifies the template itself. In there you can change everything you need to transparent:

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid>
          <Border Name="Border" Margin="0,0,0,0" Background="Transparent"
                  BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header" Margin="12,2,12,2"
                              RecognizesAccessKey="True">
              <ContentPresenter.LayoutTransform>
            <RotateTransform Angle="270" />
          </ContentPresenter.LayoutTransform>
        </ContentPresenter>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="100" />
            <Setter TargetName="Border" Property="Background" Value="Red" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="DarkRed" />
            <Setter TargetName="Border" Property="BorderBrush" Value="Black" />
            <Setter Property="Foreground" Value="DarkGray" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

这篇关于WPF TabItem页眉样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！