Question

我有一个带有四个TabItem的WPF TabControl，并对TabControl和TabItems应用了一个自定义Style，如下所示：

<Style TargetType="TabControl" x:Key="TabControlStyle">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- The container for tab item headers -->
                    <TabPanel 
                         Grid.Column="0"
                         Panel.ZIndex="1" 
                         Margin="0,0,4,-1" 
                         IsItemsHost="True"
                         Background="Transparent" />

                    <!-- Shadow to the left of the tab pages -->
                    <Border Grid.Column="0" Width="5" HorizontalAlignment="Right">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Offset="0" Color="Transparent" />
                                <GradientStop Offset="1" Color="{StaticResource ShadowGray}" /> 
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>

                    <!-- Tab page -->
                    <Border Grid.Column="1" 
                            Background="White" 
                            SnapsToDevicePixels="true"
                            BorderThickness="1" 
                            BorderBrush="{StaticResource HeaderBlueBrush}">
                        <ContentPresenter ContentSource="SelectedContent" />    
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <!-- Tab item header -->
                <Border Name="border" 
                        SnapsToDevicePixels="True" 
                        BorderThickness="0" 
                        Padding="5,8,40,8"
                        Margin="0,0,-4,0">
                    <TextBlock Name="buttonText" 
                                Margin="0" 
                                FontSize="14" 
                                Foreground="{StaticResource FontDarkGrayBrush}" 
                                Text="{TemplateBinding Header}" 
                                VerticalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBlueBrush}" />
                       </Trigger.Setters>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource SelectionBlueBrush}" />
                            <Setter TargetName="buttonText" Property="Foreground" Value="White"/>
                        </Trigger.Setters>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

正如您所看到的，标签项标题包含一个边框（当鼠标悬停在其上或选中时，它会获得不同的颜色），并且在该边框中有一个显示标题标题的TextBlock。我想这很简单。

问题是标题对鼠标输入没有正确反应。基本上：我必须在他们做出反应之前悬停/点击实际文本（TextBlock我猜）。如果我单击文本右侧，则没有任何反应。同样的悬停。但是，当我已经将鼠标悬停在一个标题的文本上时（因此它会获得'悬停颜色'），然后将鼠标移动到文本的右侧（通常不会反应），那么悬停的颜色仍然存在并且确实存在在我离开边境之前不要离开。

这是一张图片来澄清它：

Example screenshot

导致此行为的原因是什么？我认为它不正常，这很烦人，因为TabControl没有像人们期望的那样做出反应。

我尝试'反转'边框/ TextBlock组合的边距/填充（通过给TextBlock一个边距来制作空间，而不是给边框任何填充），但这不会改变任何东西。

帮助？

Answer 1

标签项模板中边框的背景必须为非空。否则是鼠标交互不可见的边框。透明也可以。

<Border Name="border" Background="Transparent" ...

TabItem标题不响应鼠标，仅对文本有效

1 个答案: