简体   繁体   English

将TabItem样式更改为TabControl.ItemTemplate

[英]Changing TabItem Style To a TabControl.ItemTemplate

Could someone please help me. 有人可以帮我吗。 I have a already written style for a TabItem Header. 我已经为TabItem标头编写了样式。 But because my TabItem Header are binded I needed to use TabControl.ItemTemplate instead of TabItem Header 但是因为绑定了TabItem标头,所以我需要使用TabControl.ItemTemplate而不是TabItem标头

So how do I even start getting the same style on a TabControl.ItemTemplate that I have for the TabItem 所以,我什至如何开始在TabControl.ItemTemplate上获得与TabItem相同的样式

So I had this: 所以我有这个:

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

Now I have this: 现在我有这个:

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

This is the Style for the original TabItem: 这是原始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>

I have a already written style for a TabItem Header. 我已经为TabItem标头编写了样式。 But because my TabItem Header are binded I needed to use TabControl.ItemTemplate instead of TabItem Header 但是因为绑定了TabItem标头,所以我需要使用TabControl.ItemTemplate而不是TabItem标头

Instead of Header="Tab1" in TabItem, you could continue using your original TabItem's Style with a Header Setter 取而代之的Header="Tab1"中的TabItem,您可以继续使用原来的TabItem的风格,配有Header Setter

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

and apply the style to TabControl.ItemContainerStyle 并将样式应用于 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM