Question

按照我的风格，我正在尝试为鼠标输入，鼠标离开和所选事件设置tabitem的颜色。

它正在部分工作，因为即使对于选定的选项卡，也会触发鼠标输入和鼠标离开事件。

我希望在标签处于活动状态时忽略这些事件。这可能吗？

此图片展示了当前的情况。

这是我的风格

   <Style TargetType="TabItem" x:Name="MyTab">
            <Setter Property="MinHeight" Value="35" />
            <Setter Property="MinWidth" Value="105" />
            <Setter Property="Foreground" Value="#f2f2f2"/>
            <!--Template-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="TabItem">
                        <Grid Name="Panel" Background="#424f5a" TextBlock.Foreground="#e8e8e8">
                            <Border Name="Border">
                                <ContentPresenter x:Name="ContentSite"
                            VerticalAlignment="Center" HorizontalAlignment="Center"
                            ContentSource="Header" Margin="10,2"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!-- Selected state-->
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Panel" Property="Background" Value="#383838" />
                                <Setter Property="Foreground" Value="#fbfbfb"/>
                            </Trigger>
                            <!-- Mouse enter state -->
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <ColorAnimation  Duration="0:0:0.1" To="#5e6972" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Panel"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                                <EventTrigger.ExitActions>

                                </EventTrigger.ExitActions>
                            </EventTrigger>
                            <!-- Mouse leave -->
                            <EventTrigger RoutedEvent="MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation  Duration="0:0:0.1" To="#424f5a" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Panel"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

我的解决方案 :(参见下面的说明）

<Style TargetType="TabItem" x:Name="MyTab">
    <Setter Property="MinHeight" Value="35" />
    <Setter Property="MinWidth" Value="105" />
                <!-- 3 -->
    <Setter Property="Background" Value="#424f5a" />
    <!--Template-->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                                            <!-- 2 -->
                <Grid Name="Panel" Background="{TemplateBinding Background}" TextBlock.Foreground="#e8e8e8">
                    <Border Name="Border">
                        <ContentPresenter x:Name="ContentSite"
                    VerticalAlignment="Center" HorizontalAlignment="Center"
                    ContentSource="Header" Margin="10,2"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Selected state-->
                    <Trigger Property="IsSelected" Value="True">
                                    <!-- 4 -->
                        <Setter TargetName="Panel" Property="Background" Value="#383838" />
                        <Setter Property="Foreground" Value="#fbfbfb"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <!-- 1 -->
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard >
                    <Storyboard>
                        <ColorAnimation  Duration="0:0:0.1" To="#5e6972" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <!-- Mouse leave -->
        <EventTrigger RoutedEvent="MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation  Duration="0:0:0.1" To="#424f5a" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

解释（请参阅我的解决方案，我在每个与每个解释说明相关的地方添加了评论）

首先，我已将MouseEnter / MouseLeave触发事件放入Style的触发器中（稍后您会明白原因）
我已将Grid的{{1}}设为TemplateBinding（模板化为BackGround的{{1}}。如果您想要Style，则需要这样做}的触发事件会影响BackGround的{{1}}（在您的情况下，Style的{{1}}）。
我们必须指定ControlTemplate的{{1}}才能创建此绑定。
如果你的目光很敏锐，你注意到我的Background触发器中没有任何改变。但是，如果我将Grid从BackGround中删除，您的遗嘱会再次出现（Check It！），这将使您在将来知道这一点非常重要。由于两个原因（彼此连接）出现问题：第一个是，当我们省略Style时，我们实际上告诉设置者更改Background的{{1}}属性，而不是IsSelected的{{1}}属性。第二个原因是TargetName="Panel"的优先级高于Setter（阅读Precedence documantation）。这就是TargetName触发器将覆盖Style触发器行为的原因。

要总结，我不确定这是解决这个问题的唯一/最佳解决方案，也许还有其他最佳做法适用于这种情况（我认为这是一种流行的情况），但是这是一个非常简单的问题，特别是如果你承担了背后的所有机制。

Answer 2

您应该使用MultiTrigger，因为TabItem的情况包含多个属性。我在下面做了它，它的工作原理。您可以根据自己的意愿进行开发。

<ControlTemplate.Triggers>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsSelected" Value="False"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Panel"  Duration="0:0:0.1" To="#5e6972" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
    <MultiTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Panel" Duration="0:0:0.1" To="#424f5a" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsSelected" Value="True"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Panel"  Duration="0:0:0.1" To="#5e6972" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
    <MultiTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Panel" Duration="0:0:0.1" To="#383838" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="False"/>
        <Condition Property="IsSelected" Value="True"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.Setters>
        <Setter TargetName="Panel" Property="Background" Value="#383838"/>
    </MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>

鼠标输入和鼠标离开时的WPF TabItem颜色

2 个答案: