2012-11-21 33 views
1

我有一個WPF TabControl的有四個的TabItems和應用自定義樣式到兩個的TabControl和的TabItems如下:TabItem的標題不響應鼠標,只在文字

<Style TargetType="TabControl" x:Key="TabControlStyle"> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="TabStripPlacement" Value="Left" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="TabControl"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 

        <!-- The container for tab item headers --> 
        <TabPanel 
         Grid.Column="0" 
         Panel.ZIndex="1" 
         Margin="0,0,4,-1" 
         IsItemsHost="True" 
         Background="Transparent" /> 

        <!-- Shadow to the left of the tab pages --> 
        <Border Grid.Column="0" Width="5" HorizontalAlignment="Right"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
           <GradientStop Offset="0" Color="Transparent" /> 
           <GradientStop Offset="1" Color="{StaticResource ShadowGray}" /> 
          </LinearGradientBrush> 
         </Border.Background> 
        </Border> 

        <!-- Tab page --> 
        <Border Grid.Column="1" 
          Background="White" 
          SnapsToDevicePixels="true" 
          BorderThickness="1" 
          BorderBrush="{StaticResource HeaderBlueBrush}"> 
         <ContentPresenter ContentSource="SelectedContent" />  
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 

       <!-- Tab item header --> 
       <Border Name="border" 
         SnapsToDevicePixels="True" 
         BorderThickness="0" 
         Padding="5,8,40,8" 
         Margin="0,0,-4,0"> 
        <TextBlock Name="buttonText" 
           Margin="0" 
           FontSize="14" 
           Foreground="{StaticResource FontDarkGrayBrush}" 
           Text="{TemplateBinding Header}" 
           VerticalAlignment="Center" /> 
       </Border> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.Setters> 
          <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBlueBrush}" /> 
         </Trigger.Setters> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="True"> 
         <Trigger.Setters> 
          <Setter TargetName="border" Property="Background" Value="{StaticResource SelectionBlueBrush}" /> 
          <Setter TargetName="buttonText" Property="Foreground" Value="White"/> 
         </Trigger.Setters> 
        </Trigger> 

       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

正如你所看到的,標籤項目標題包含一個邊框(當鼠標懸停在它上面或當它被選中時獲得不同的顏色),並且在該邊框中有一個顯示標題標題的TextBlock。我猜想很簡單。

問題是標題對鼠標輸入沒有正確反應。基本上說:我必須在他們做出反應之前將鼠標懸停/點擊實際文本(我猜測出的TextBlock)。如果我點擊文字的右側,則什麼都不會發生。懸停也一樣。但是,當我已經將鼠標懸停在一個標題的文本上(因此它獲得了「懸停顏色」),然後將鼠標移動到文本的右側(它通常不會反應),那麼懸停的顏色仍然存在在我離開邊境之前不要離開。

這裏有一個形象作出澄清:

Example screenshot

是什麼原因造成這種現象?我認爲這是不正常的,這是非常惱人的,因爲TabControl沒有反應人們期望的方式。

我試着'扭轉'邊界/ TextBlock組合的邊距/填充(通過給TextBlock一個邊距來製作空間,而不是給邊框任何填充),但是這並沒有改變任何東西。

幫助?

+0

你不會碰巧有這樣的版本分享嗎?這是一個令人驚歎的造型,我想將其納入我的應用程序:),當然還有許可。 – Andy

回答

4

選項卡項目模板中的邊框背景必須爲非空白。否則,邊框對於鼠標交互不可見。透明也可以。

<Border Name="border" Background="Transparent" ... 
+0

真棒,我從來不知道!謝謝... –