WPF TabControl header 间距，键盘焦点矩形不对齐

Question

我将 ControlTemplates 设置为 space out TabItems，但键盘焦点矩形不再对齐：

有人知道解决这个问题的简单方法吗？

这是简化的示例代码：

<TabControl x:Name="tabControl">
    <TabControl.Resources>
        <ControlTemplate x:Key="tabItemTemplate"
                         TargetType="{x:Type TabItem}">
            <Grid x:Name="templateRoot" Margin="0,0,40,0">
                <Border BorderBrush="LightGray"
                        BorderThickness="1"/>
                <ContentPresenter ContentSource="Header"
                                  Margin="10,5"/>
            </Grid>
        </ControlTemplate>
    </TabControl.Resources>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
</TabControl>

Answer 1

尝试使网格可聚焦且 tabItem 不是制表位。

   <TabControl x:Name="tabControl">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="IsTabStop" Value="False"/>
                </Style>
            </TabControl.ItemContainerStyle>
            <TabControl.Resources>
                <ControlTemplate x:Key="tabItemTemplate"
            TargetType="{x:Type TabItem}">
                    <Grid x:Name="templateRoot" Margin="0,0,40,0" Focusable="True">
                        <Border BorderBrush="LightGray"
                        BorderThickness="1"/>
                        <ContentPresenter ContentSource="Header"
                                  Focusable="False"
                                  Margin="10,5"/>
                    </Grid>
                </ControlTemplate>
            </TabControl.Resources>
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
    </TabControl>

Answer 2

我发现最简单的方法是自定义 FocusVisualStyle 并给它一个边距，类似于 space 选项卡的边距。

示例：

<TabControl x:Name="tabControl">
    <TabControl.Resources>
        <Style x:Key="tabItemStyle" TargetType="TabItem">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Margin="2,2,42,2" SnapsToDevicePixels="True"
                                            Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                                            StrokeDashArray="1 2" StrokeThickness="1" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid x:Name="templateRoot" Margin="0,0,40,0">
                            <Border BorderBrush="LightGray" BorderThickness="1" />
                            <ContentPresenter Margin="10,5" ContentSource="Header" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
</TabControl>

那个自定义 FocusVisualStyle 是默认值的修改版本（我调整了边距），我通过属性 Window:[=16= 从虚拟 TabItem 中提取了它]

WPF TabControl header 间距，键盘焦点矩形不对齐

WPF TabControl header spacing, keyboard focus rectangle doesn't line up

c#

wpf

xaml

tabcontrol