鼠标悬停问题导致选项卡标题背景颜色发生变化

Question

我是 XAML 新手，正在设计一个包含嵌套选项卡控件的应用程序。最近，我搜索了通过鼠标悬停和选定触发器（选定=绿色，鼠标悬停=蓝色）来更改选项卡标题的方法，并且它确实有效。但我有两个问题。

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.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）。那是因为它没有显式的key，所以它适用于TabItem类型的所有控件。为了避免这种情况，给你的风格一个关键

x:Key="MyTabItemStyle"

。然后将该样式仅应用于您想要的 TabItem，因此对于外部 TabItem，您可以设置

Style="{StaticResource MyTabItemStyle}"

。