在XAML中为TabHeader设置MouseOver事件/触发器

Question

遵循XAML代码以满足您的测试需求。

<Window x:Class="MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Name="MainWindow" Title="MainWindow"
Width="600" Height="300">
<Grid>
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="1,1,1,0" Margin="2,0,2,0">
                                <ContentPresenter ContentSource="Header"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Border" Property="Cursor" Value="Hand" />
                                    <Setter TargetName="Border" Property="TextElement.FontWeight" Value="Bold" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <TabItem>
            <TabItem.Header>
                <TextBlock Margin="5,2,5,2" TextAlignment="Center">
                    London
                </TextBlock>
            </TabItem.Header>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <TextBlock Margin="5,2,5,2" TextAlignment="Center">
                    Paris
                </TextBlock>
            </TabItem.Header>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <TextBlock Margin="5,2,5,2" TextAlignment="Center">
                    Tokyo
                </TextBlock>
            </TabItem.Header>
        </TabItem>

    </TabControl>
</Grid>
</Window>

如何在XAML中为TabHeader设置MouseOver事件/触发器？

以下代码无效;

<Setter TargetName="Border" Property="TextElement.FontWeight" Value="Bold" />

这里有什么建议吗？

如何在XAML中为TabHeader设置MouseOver事件/触发器？

Answer 1

试试这个：

<Setter TargetName="Border" Property="TextElement.FontWeight" Value="Bold" />

或者这个：

<Setter Property="FontWeight" Value="Bold" />

修改

如果要更改将TextBlock属性设置为的单个Header元素的属性，则不能使用TabItem样式。您可以使用HeaderTemplate：

执行此操作

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border" BorderThickness="1,1,1,0" Margin="2,0,2,0">
                            <ContentPresenter ContentSource="Header"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Cursor" Value="Hand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Margin="5,2,5,2" TextAlignment="Center" Text="{Binding}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
                                <Setter Property="FontWeight" Value="Bold" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </TabControl.Resources>

    <TabItem Header="London" HeaderTemplate="{StaticResource HeaderTemplate}">
    </TabItem>

    <TabItem Header="Paris" HeaderTemplate="{StaticResource HeaderTemplate}">
    </TabItem>

    <TabItem Header="Tokyo" HeaderTemplate="{StaticResource HeaderTemplate}">
    </TabItem>

</TabControl>