需要一些建议如何设置自定义tabcontrol

Question

如何使tabitem（标题）边框与内容部分对齐。下面我将项目标题放在网格中。我附上了一张照片。左边有一些小空间。顶部相同的事情。我希望它被填补。

<Grid>
    <TabControl Margin="10" BorderThickness="2" Background="LightGray" Padding="0">            
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid Name="Panel">
                                <ContentPresenter x:Name="ContentSite" 
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="30,3"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Panel" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <TabItem Header="General">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>
</Grid>

Answer 1

TabItem的默认模板的边距为-1，但在您的情况下，边框厚度为2。所以-2的边际应该适合你。

在网格上设置边距：

<ControlTemplate TargetType="TabItem">
    <Grid Name="Panel" Margin="-2,-2,-2,0">
        <ContentPresenter x:Name="ContentSite" 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        ContentSource="Header"
                        Margin="30,3"/>
    </Grid>
    .....

Answer 2

设置TabItem的边距而不是Tab

<TabItem Header="General", Margin="0,0,0,0"/>

将TabItem的边距设置为0，这将覆盖默认边距并根据您的要求工作