WPF標籤的主題，沒有任何鼠標懸停效果

如何的方式創建WPF選項卡布局的主題，沒有了效果的鼠標和我跟着代碼標籤標題是WPF標籤的主題，沒有任何鼠標懸停效果

<Border Background="#363636" BorderThickness="10"> 
    <TabControl> 
     <TabItem> 
      <TabItem.Header> 
        <TextBlock Text="Blue" Background="White" FontSize="16" Foreground="Black" /> 
      </TabItem.Header> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabItem> 
      <TabItem.Header> 
       <TextBlock Margin="0" Text="Blue" Background="#363636" FontSize="16" Foreground="White" /> 
      </TabItem.Header> 
     </TabItem> 
     <TabItem> 
      <TabItem.Header> 
       <TextBlock Margin="0" Text="Blue" Background="#363636" FontSize="16" Foreground="White" /> 
      </TabItem.Header> 
     </TabItem> 
    </TabControl> 

</Border>

這產生的結果是這樣 enter image description here

但我期待一個結構類似

enter image description here

來源

2014-07-23 Jibin Mathew

您可能需要重寫爲標籤項目的模板。 – pushpraj

這是相當接近你想要

<Border Background="#363636" 
     BorderThickness="10"> 
    <TabControl> 
     <TabControl.Resources> 
      <Style TargetType="TabItem"> 
       <Setter Property="TextElement.Foreground" 
         Value="White" /> 
       <Setter Property="TextElement.FontSize" 
         Value="16" /> 
       <Setter Property="Background" 
         Value="#363636" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="TabItem"> 
          <Border Background="{TemplateBinding Background}"> 
           <ContentPresenter ContentSource="Header" Margin="10,5" /> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" 
             Value="true"> 
            <Setter Property="TextElement.Foreground" 
              Value="Black" /> 
            <Setter Property="Background" 
              Value="White" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TabControl.Resources> 
     <TabItem Header="red"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabItem Header="green"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabItem Header="blue"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
    </TabControl> 
</Border>

進一步匹配的內容，我們可能需要重寫標籤控件模板以及

更新

我試圖密切配合它你的要求

結果

result

XAML

<Border Background="#363636" 
     Margin="4" 
     CornerRadius="4"> 
    <TabControl> 
     <TabControl.Resources> 
      <Style TargetType="TabItem"> 
       <Setter Property="TextElement.Foreground" 
         Value="White" /> 
       <Setter Property="TextElement.FontSize" 
         Value="16" /> 
       <Setter Property="TextElement.FontWeight" 
         Value="SemiBold" /> 
       <Setter Property="Background" 
         Value="#363636" /> 
       <Setter Property="BorderBrush" 
         Value="{x:Null}" /> 
       <Setter Property="BorderThickness" 
         Value="0" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="TabItem"> 
          <Border x:Name="back" 
            CornerRadius="4,4,0,0" 
            Background="{TemplateBinding Background}"> 
           <ContentPresenter ContentSource="Header" 
                Margin="20,10" /> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" 
             Value="true"> 
            <Setter Property="TextElement.Foreground" 
              Value="Black" /> 
            <Setter Property="Background" 
              Value="White" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TabControl.Resources> 
     <TabItem Header="red"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabItem Header="green"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabItem Header="blue"> 
      <Label Content="Content goes here..." /> 
     </TabItem> 
     <TabControl.Template> 
      <ControlTemplate TargetType="TabControl"> 
       <Grid KeyboardNavigation.TabNavigation="Local" Margin="4"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <TabPanel x:Name="HeaderPanel" 
           Grid.Row="0" 
           Panel.ZIndex="1" 
           IsItemsHost="True" 
           KeyboardNavigation.TabIndex="1" /> 
        <Border x:Name="Border" 
          RenderOptions.EdgeMode="Aliased" 
          Grid.Row="1" 
          KeyboardNavigation.TabNavigation="Local" 
          KeyboardNavigation.DirectionalNavigation="Contained" 
          KeyboardNavigation.TabIndex="2" 
          Background="White" 
          CornerRadius="0,0,2,2"> 

         <ContentPresenter x:Name="PART_SelectedContentHost" 
              RenderOptions.EdgeMode="Unspecified" 
              Margin="4" 
              ContentSource="SelectedContent" /> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </TabControl.Template> 
    </TabControl> 
</Border>

來源

2014-07-23 09:09:52 pushpraj

WPF標籤的主題，沒有任何鼠標懸停效果

回答

相關問題