2016-09-09 30 views
1

是否有人可以幫助我。 我有一個已經寫好的TabItem頭的樣式。 但是因爲我的TabItem頭被綁定我需要使用 TabControl.ItemTemplate代替TabItem的標題將TabItem樣式更改爲TabControl.ItemTemplate

那麼,如何我甚至開始獲得在TabControl.ItemTemplate相同的風格,我對TabItem的

所以我有這樣的:

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

現在我有這樣的:

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

這是聖YLE原始的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> 

回答

1

我有一個TabItem的頭一個已經寫好的風格。但是因爲我的 TabItem的頭被綁定我需要使用TabControl.ItemTemplate 代替TabItem的標題

而不是在TabItem的Header="Tab1",您可以繼續使用原來的TabItem的風格,配有HeaderSetter

<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> 
+0

太謝謝你了。正是我需要的,最後一個問題:我如何將這種風格放在資源中?我試過這個,但得到的消息不能爲空? – user1702369

+0

將'ItemContainerStyle'直接綁定到'TabControl'中的資源,就像'

+0

再次感謝百萬 – user1702369