在TabItem上觸發IsMouseOver

我的TabItem風格存在一些問題。這裏是風格：在TabItem上觸發IsMouseOver

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Width" Value="160"/> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Height" Value="70"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="TabItem"> 
       <Border Name="Border" Background="Transparent"> 

        <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Left" 
            ContentSource="Header" 
            Margin="10,2"/> 

       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="Red" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="Green" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="Blue" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

的問題是，IsMouseOver事件是由上述任何其子項的運動也引發。我已經添加了SourceName="ContentSite"到觸發：

<Trigger SourceName="ContentSite" Property="IsMouseOver" Value="True">

這段代碼的IsMouseOver被周圍的子元素移動不再觸發，但它提出了另一個問題。僅當光標位於tabitem的標題上時纔會觸發IsMouseOver事件。另一個用戶對here進行了描述。建議的答案是將Background =「Transparent」值添加到Border中，但它對我沒有任何作用。

來源

2013-10-28 srg

什麼時候IsMouseOver被那麼如果觸發你不希望它在頭和子元素？那剩下的是什麼？這是一個TabItem所具有的。 :) –

您是否希望僅在標籤頁標題或內容或兩者上觸發該事件？ – sthotakura

我希望事件僅在標籤頁頭上觸發。通過添加SourceName =「ContentSite」，當光標位於TabItem.Header內部的TextBlock上時，該事件被觸發_only_。 – srg

如果我正確理解你的問題，你所要做的就是將Trigger上的SourceName更改爲ContentSite的邊框。

請嘗試以下方式：

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Width" Value="160"/> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Height" Value="70"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="TabItem"> 
       <Border Name="Border" Background="Transparent"> 

        <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Left" 
            ContentSource="Header" 
            Margin="10,2"/> 

       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="Red" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="Green" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True" SourceName="Border"> 
         <Setter TargetName="Border" Property="Background" Value="Blue" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

而且，如果你希望發生這種情況只適用於非選定的選項卡，你可以試試下面的MultiTrigger

<MultiTrigger> 
    <MultiTrigger.Conditions> 
     <Condition Property="IsMouseOver" SourceName="Border" Value="True" /> 
     <Condition Property="IsSelected" Value="False" /> 
    </MultiTrigger.Conditions> 
    <Setter TargetName="Border" Property="BorderBrush" Value="Blue" /> 
</MultiTrigger>

來源

2013-10-28 20:45:24 sthotakura

是的，SourceName =「Border」完成了訣竅。非常感謝。 – srg

在TabItem上觸發IsMouseOver

回答

相關問題