将TabItem样式更改为TabControl.ItemTemplate

本文关键字：TabControl ItemTemplate TabItem 样式 | 更新日期: 2023-09-27 18:06:22

谁能帮帮我?我已经为TabItem Header编写了样式。但是因为我的TabItem Header是绑定的，所以我需要使用TabControl。ItemTemplate代替TabItem Header

那么我如何开始在TabControl上获得相同的样式呢?我为TabItem设置的ItemTemplate

这里是:

<TabItem Header="Tab1" Style="{StaticResource TabStyle}">
</TabItem>

现在我有了这个:

<TabControl.ItemTemplate>
  <!-- this is the header template-->
  <DataTemplate>
     <TextBlock Text="{Binding Person}" />
  </DataTemplate>
</TabControl.ItemTemplate>

这是原始TabItem的样式:

<Style x:Key="TabStyle" TargetType="{x:Type TabItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border  Padding="3">
                    <Grid Name ="grid" Height="24">
                        <Border Name="BorderName" 
                                CornerRadius="12,12,12,12"                           
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"     />
                        <Rectangle Name="TabItemBackgorund" 
                                RadiusX="12"
                                RadiusY="12" 
                                Fill="{StaticResource TabItemBackgroundBrush}">
                        </Rectangle>
                        <Border Name="border" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter Name="TabItemTextbox" 
                                ContentSource="Header" 
                                Margin="6,0,6,0"     
                                TextBlock.Foreground="{StaticResource TabItemBackgroundBrush}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#00bfc2" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="{StaticResource TabItemBackgroundBrush}" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#9494a3" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#00bfc2" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger SourceName="grid" Property="IsMouseOver" Value="True">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#FF4F78" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

将TabItem样式更改为TabControl.ItemTemplate

我已经为TabItem Header编写了样式。但是因为我TabItem Header被绑定，我需要使用TabControl。ItemTemplate代替TabItem Header

代替TabItem的Header="Tab1"，你可以继续使用你原来的TabItem的样式与Header Setter 

<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Header" Value="{Binding Person}"/>
<Setter Property="Template">

和将样式应用于 TabControl.ItemContainerStyle 

<TabControl>
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
           <Setter Property="Background" Value="Transparent"/>
           <Setter Property="VerticalContentAlignment" Value="Center"/>
           <Setter Property="HorizontalContentAlignment" Value="Center"/>
           <Setter Property="Header" Value="{Binding Person}"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type TabItem}">

…

        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

相关文章：