Tab header background color change by mouse-over issue

Question

I'm new to XAML and I'm designing an App that contains nested tab controls. Recently I searched for changing the tab header by mouse-over and selected trigger (selected = green, mouse-over = blue), and it did work. But I have two problems .

1. I have a nested tab and the inner tab is also following the outer TabControl.Resource (it's okay for me, it gives me united tabs).

2. This problem is about the mouse-over trigger: when I select the tab and it turns to green since it's selected, inside its grid whenever I mouse-over to any controls, that TabHeader which is selected (and should remain green) follows the mouse-over trigger and turns to blue.

This is my 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*****-->

And these are the images that show the 2nd problem:

Answer 1

Let me start with the second issue. The way your style for TabItem is defined, when mouse is over TabItem (that includes both TabItem's Header and Content), the background changes to blue. So, if you want the change to execute only when the item is not selected, replace this trigger:

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

with MultiTrigger:

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

Now the first issue (that is not a problem as you sad, but still). The way your TabItem style is defined (in TabControl's resources), it will be applied to all TabItems within that TabControl (including the TabItems within nested TabControls - the inner TAB in your code comments). That is because it doesn't have explicit key, so it is applied to all controls of TabItem type. To avoid this give your style a key x:Key="MyTabItemStyle". Then apply that Style only to TabItems you want, so for your outer TabItems you can set Style="{StaticResource MyTabItemStyle}".