鼠标结束时如何更改 TabItem 颜色？

Question

我正在使用 MahApp，我创建了以下 TabControl：

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
<TabItem>
    <TabItem.Header>
        <Image Source="Images/Icon.png"></Image>
    </TabItem.Header>
    <TabItem.Content>
            <Grid>
                <Controls:Scheduler x:Name="Scheduler"/>
            </Grid>
    </TabItem.Content>
</TabItem>
</TabControl>

如何处理 MouseOver 事件并更改颜色？实际上，如果我将鼠标移到 TabItem 上，用户不会理解 TabItem 是否可点击。提前致谢。

Answer 1

您可以添加 TabItem 样式作为 TabControl 的一部分。 Style 将根据 MouseOver.

触发

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Height" Value="Auto"/>
            <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="IsMouseOver" Value="True" SourceName="Border">
                                <Setter TargetName="Border" Property="Background" Value="Blue" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.Header>
            <Image Source="Images/Icon.png"></Image>
        </TabItem.Header>
        <TabItem.Content>
            <Grid>

            </Grid>
        </TabItem.Content>
    </TabItem>
</TabControl>

编辑：如果您希望颜色在选择 TabItem 时保持不变，请将其添加到 ControlTemplate.Triggers

            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Border" Property="Background" Value="Blue" />
            </Trigger>

鼠标结束时如何更改 TabItem 颜色？

How to change the TabItem color when mouse is over?

wpf

mahapps.metro