xaml - xaml WPF TabItem标头样式

  显示原文与译文双语对照的内容
137 4

我正在尝试样式化 rtc,并且已经经有 75%种方式,但是我对实际的TabItems设置了困难:

alt text

我想要实现的是删除默认的iframe,使得选项卡条目部分透明,而不是位置。

我相信这可以能不那么难,但是我只是无法解决这个问题 !

下面是TabControl的XAML:

<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>
时间:原作者:0个回答

88 4

尝试这个样式,它会修改模板本身。在那里,你可以将所需的所有内容更改为透明:

<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>
原作者:
132 4

在搜索一个圆形标签的方法时,我找到了卡罗的答案,但是我需要更多的帮助。这是我在他工作的基础上整理的。这是用 MS Visual Studio 2015完成的。

如下所示代码:

<Window x:Class="MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:local="clr-namespace:MealNinja"
 mc:Ignorable="d"
 Title="Rounded Tabs Example" Height="550" Width="700" WindowStartupLocation="CenterScreen" FontFamily="DokChampa" FontSize="13.333" ResizeMode="CanMinimize" BorderThickness="0">
 <Window.Effect>
 <DropShadowEffect Opacity="0.5"/>
 </Window.Effect>
 <Grid Background="#FF423C3C">
 <TabControl x:Name="tabControl" TabStripPlacement="Left" Margin="6,10,10,10" BorderThickness="3">
 <TabControl.Resources>
 <Style TargetType="{x:Type TabItem}">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="{x:Type TabItem}">
 <Grid>
 <Border Name="Border" Background="#FF6E6C67" Margin="2,2,-8,0" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="10">
 <ContentPresenter x:Name="ContentSite" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2,2,12,2" RecognizesAccessKey="True"/>
 </Border>
 <Rectangle Height="100" Width="10" Margin="0,0,-10,0" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Right" StrokeThickness="0" Fill="#FFD4D0C8"/>
 </Grid>
 <ControlTemplate.Triggers>
 <Trigger Property="IsSelected" Value="True">
 <Setter Property="FontWeight" Value="Bold"/>
 <Setter TargetName="ContentSite" Property="Width" Value="30"/>
 <Setter TargetName="Border" Property="Background" Value="#FFD4D0C8"/>
 </Trigger>
 <Trigger Property="IsEnabled" Value="False">
 <Setter TargetName="Border" Property="Background" Value="#FF6E6C67"/>
 </Trigger>
 <Trigger Property="IsMouseOver" Value="true">
 <Setter Property="FontWeight" Value="Bold"/>
 </Trigger>
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="HeaderTemplate">
 <Setter.Value>
 <DataTemplate>
 <ContentPresenter Content="{TemplateBinding Content}">
 <ContentPresenter.LayoutTransform>
 <RotateTransform Angle="270"/>
 </ContentPresenter.LayoutTransform>
 </ContentPresenter>
 </DataTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="Background" Value="#FF6E6C67"/>
 <Setter Property="Height" Value="90"/>
 <Setter Property="Margin" Value="0"/>
 <Setter Property="Padding" Value="0"/>
 <Setter Property="FontFamily" Value="DokChampa"/>
 <Setter Property="FontSize" Value="16"/>
 <Setter Property="VerticalAlignment" Value="Top"/>
 <Setter Property="HorizontalAlignment" Value="Right"/>
 <Setter Property="UseLayoutRounding" Value="False"/>
 </Style>
 <Style x:Key="tabGrids">
 <Setter Property="Grid.Background" Value="#FFE5E5E5"/>
 <Setter Property="Grid.Margin" Value="6,10,10,10"/>
 </Style>
 </TabControl.Resources>
 <TabItem Header="Planner">
 <Grid Style="{StaticResource tabGrids}"/>
 </TabItem>
 <TabItem Header="Section 2">
 <Grid Style="{StaticResource tabGrids}"/>
 </TabItem>
 <TabItem Header="Section III">
 <Grid Style="{StaticResource tabGrids}"/>
 </TabItem>
 <TabItem Header="Section 04">
 <Grid Style="{StaticResource tabGrids}"/>
 </TabItem>
 <TabItem Header="Tools">
 <Grid Style="{StaticResource tabGrids}"/>
 </TabItem>
 </TabControl>
 </Grid>
</Window>

屏幕截图:

enter image description here

原作者:
...