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

Question

我正在使用html { } body { overflow: hidden; margin: 40px 15px; font-family: Arial, sans-serif; font-size: 12px; } .group {float:left;width:19.5%;} .row {overflow:hidden;} input{max-width:90%;}，我创建了以下<div id="distribution"> <div class="row"> <div class="group"> <img src="~/Images/financiering.png" class="imgCat"> <p>Algemene financiering</p> <input type="text" class="dFinan" value="0" readonly /> </div> <div class="group"> <img src="~/Images/care.png" class="imgCat"> <p>Zorg en opvang</p> <input type="text" class="dZorg" value="0" readonly /> </div> <div class="group"> <img src="~/Images/house.png" class="imgCat"> <p>Wonen en ruimtelijke ordening</p> <input type="text" class="dWonen" value="0" readonly /> </div> <div class="group"> <img src="~/Images/police.png" class="imgCat"> <p>Veiligheidszorg</p> <input type="text" class="dVeiligheid" value="0" readonly /> </div> <div class="group"> <img src="~/Images/culture.png" class="imgCat"> <p>Cultuur en vrije tijd</p> <input type="text" class="dCultuur" value="0" readonly /> </div> </div> <!-- .row --> <div class="row"> <div class="group"> <img src="~/Images/financiering.png" class="imgCat"> <p>Algemene financiering</p> <input type="text" class="dFinan" value="0" readonly /> </div> <div class="group"> <img src="~/Images/care.png" class="imgCat"> <p>Zorg en opvang</p> <input type="text" class="dZorg" value="0" readonly /> </div> <div class="group"> <img src="~/Images/house.png" class="imgCat"> <p>Wonen en ruimtelijke ordening</p> <input type="text" class="dWonen" value="0" readonly /> </div> <div class="group"> <img src="~/Images/police.png" class="imgCat"> <p>Veiligheidszorg</p> <input type="text" class="dVeiligheid" value="0" readonly /> </div> <div class="group"> <img src="~/Images/culture.png" class="imgCat"> <p>Cultuur en vrije tijd</p> <input type="text" class="dCultuur" value="0" readonly /> </div> </div><!-- .row --> </div><!-- #distribution -->：

MahApp

如何处理TabControl事件并更改颜色？实际上，如果我将鼠标移到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>