1

我有一个带有四个 TabItems 的 WPF TabControl，并将自定义样式应用于 TabControl 和 TabItems，如下所示：

<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）。如果我单击文本的右侧，则没有任何反应。悬停也是一样。但是，当我已经将鼠标悬停在一个标题的文本上时（因此它会获得“悬停颜色”），然后将鼠标移动到文本的右侧（通常不会做出反应），然后悬停颜色仍然存在并且确实在我真正离开边境之前不要离开。

这是一张图片来澄清它：

示例截图

是什么导致了这种行为？我假设这是不正常的，这很烦人，因为 TabControl 不会像人们期望的那样做出反应。

我尝试“反转”边框/文本块组合的边距/填充（通过为 TextBlock 提供边距来留出空间，而不是为边框提供任何填充），但这并没有改变任何东西。

帮助？

4

1 回答 1

4

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

<Border Name="border" Background="Transparent" ...
于 2012-11-21T21:08:05.370 回答