Question

我将ControlTemplates设置为将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并为其提供类似于用于分隔标签的边距。

示例：

<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是默认的修改版本（我调整了边距），我是通过属性窗口从虚拟TabItem中提取的：

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

2 个答案: