マウスオーバーによるタブヘッダーの背景色の変更

Question

XAMLが初めてで、ネストされたタブコントロールを含むAppを設計しています。最近、マウスオーバーと選択されたトリガー（選択された=緑、マウスオーバー=青）によってタブヘッダーを変更するために検索し、それが機能しました。しかし、私には2つの問題があります。

1. 私は、ネストされたタブを持っており、内側のタブも（それはそれは私がタブを統一与え、私のために大丈夫です）外TabControl.Resourceに従っています。

2. この問題は、マウスオーバートリガーに関するものです。タブを選択すると、タブが選択されてから緑色に変わり、グリッドの内側にマウスを置くと、TabHeaderが選択されます緑）がマウスオーバートリガーに続き、青色に変わります。

これは私のXAMLです：

<TabControl Margin="0,0,0,0.2" TabStripPlacement="Left" Background="{x:Null}" BorderBrush="Gainsboro"> 
         <!-- ******outter TAB*******--> 

         <TabControl.Resources> 
          <Style TargetType="TabItem"> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="TabItem"> 
              <Grid Name="TnrT1"> 
               <ContentPresenter x:Name="ContentSite" 
                    VerticalAlignment="Center" 
                    HorizontalAlignment="Center" 
                    ContentSource="Header" 
                    Margin="10,2"/> 

              </Grid> 

              <ControlTemplate.Triggers> 

               <Trigger Property="IsSelected" Value="True"> 
                <Setter TargetName="TnrT1" Property="Background" Value="#FF7AB945"/> 
               </Trigger> 

               <Trigger Property="IsMouseOver" Value="True"> 
                <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
               </Trigger> 


              </ControlTemplate.Triggers> 

             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
         </TabControl.Resources> 



         <TabItem x:Name="TnrMng" Height="136" VerticalAlignment="Top" HorizontalAlignment="Left" Width="105" Background="White"> 
          <TabItem.Header> 
           <StackPanel HorizontalAlignment="Center" Width="94" Height="116" VerticalAlignment="Center" Margin="0,1,-0.4,21.4"> 
            <Image Source="Resource/mngp.png" Height="90" Margin="-2,0,-5.6,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="102" /> 
            <TextBlock Height="28" RenderTransformOrigin="0.498,0.913" VerticalAlignment="Center" HorizontalAlignment="Center" Width="84" FontWeight="Normal" FontSize="16" Margin="10,0,0.4,0" FontFamily="Tw Cen MT Condensed Extra Bold">مدیرت استاد</TextBlock> 
           </StackPanel> 
          </TabItem.Header> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition/> 
           </Grid.ColumnDefinitions> 
           <TextBox x:Name="inst_inst_search_txt_Copy" Margin="10,58,0,0" TextWrapping="Wrap" FontWeight="Normal" VerticalContentAlignment="Center" Height="22" Controls:TextBoxHelper.Watermark="جستجو استاد" VerticalAlignment="Top" HorizontalAlignment="Left" Width="153" HorizontalContentAlignment="Center"/> 

           <Image x:Name="inst_search_png_Copy" Margin="168,58,0,0" Stretch="Fill" FlowDirection="RightToLeft" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="29"> 
            <Image.Source> 
             <BitmapImage UriSource="Resource/search.png"/> 
            </Image.Source> 
           </Image> 
           <ComboBox x:Name="tnr_search_filter_combo" HorizontalAlignment="Left" Margin="77,10,0,0" VerticalAlignment="Top" Width="86" FontSize="8" Height="22"> 
            <ComboBoxItem Content="همه موارد"/> 
            <ComboBoxItem Content="کد شناسه"/> 
            <ComboBoxItem Content="نام"/> 
            <ComboBoxItem Content="شماره ملی"/> 
            <ComboBoxItem Content="شماره تماس"/> 
            <ComboBoxItem Content="آدرس"/> 
            <ComboBoxItem Content="پست الکترونیک"/> 
           </ComboBox> 
           <ListView x:Name="tnr_tnr_search_lst" HorizontalAlignment="Left" Margin="10,113,0,24.4" Width="175"> 
            <ListView.View> 
             <GridView> 
              <GridViewColumn Header="استاد" HeaderStringFormat="" Width="160"/> 
             </GridView> 
            </ListView.View> 
           </ListView> 

           <!-- ******inner TAB*****--> 
           <TabControl Margin="190,10,0.2,0.4"> 
            <TabItem Header="TabItem"> 
             <Grid Background="#FFE5E5E5"/> 
            </TabItem> 
            <TabItem Header="TabItem"> 
             <Grid Background="#FFE5E5E5"/> 
            </TabItem> 
           </TabControl> 
           <!-- ***inner TAB***--> 

          </Grid> 
         </TabItem> 
         <TabItem Margin="0,7,-0.4,-66.4" Width="105" Height="136"> 
          <TabItem.Header> 
           <StackPanel HorizontalAlignment="Center" Width="94" Height="116" VerticalAlignment="Center" Margin="0,1,-0.4,21.4"> 
            <Image Source="Resource/addp.png" Height="90" Margin="-2,0,-5.6,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="102" /> 
            <TextBlock Height="28" RenderTransformOrigin="0.498,0.913" VerticalAlignment="Center" HorizontalAlignment="Center" Width="84" FontWeight="Normal" FontSize="16" Margin="10,0,0.4,0" FontFamily="Tw Cen MT Condensed Extra Bold">ثبت استاد</TextBlock> 
           </StackPanel> 
          </TabItem.Header> 
          <Grid> 
           <ListBox HorizontalAlignment="Left" Height="366" Margin="49,99,0,0" VerticalAlignment="Top" Width="533"/> 
          </Grid> 
         </TabItem> 
        </TabControl> 
        <!--******Outter TAB*****--> 

そして、これらは、第二の問題を示した画像です：私は第二の問題を見てみましょう

Answer 1

を。 TabItemのスタイルが定義され、マウスがTabItem（TabItemのヘッダーとコンテンツの両方を含む）上にあるとき、背景は青に変わります。

<Trigger Property="IsMouseOver" Value="True"> 
    <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
</Trigger> 

MultiTriggerで：あなたは変更は、項目が選択されていない場合にのみ実行するこのトリガーを交換したいのであれば、

<MultiTrigger> 
    <MultiTrigger.Conditions> 
     <Condition Property="IsMouseOver" Value="True"/> 
     <Condition Property="IsSelected" Value="False"/> 
    </MultiTrigger.Conditions> 
    <Setter TargetName="TnrT1" Property="Background" Value="#CC119EDA"/> 
</MultiTrigger> 

今最初の問題（それはあなたのように問題はありません悲しい、しかしまだ）。あなたのTabItemスタイルが（TabControlのリソースで）定義されているように、そのTabControl内のすべてのTabItemに適用されます（ネストされたTabControl内のTabItemを含みます - コードコメントの内側のTAB）。 には明示的なキーがないため、TabItem型のすべてのコントロールに適用されるためです。これを避けるには、あなたのスタイルにキーを与えてくださいx:Key="MyTabItemStyle"。次に、そのスタイルを必要なTabItemだけに適用します。外側のTabItemに対しては、Style="{StaticResource MyTabItemStyle}"と設定できます。