为什么我的标签被剪裁在右侧，我该如何解决这个问题？

Question

我有一个像这样的标签控件，每个标签的右侧都被剪裁了：

我无法弄清楚该怎么做才能使右侧不被剪裁。目前我正在使用具有以下内容的样式定义：<Setter Property="Margin" Value="5,0,0,0" />。如果我将其设置为Value="0,0,0,0"，则边距会正确显示，如下所示：

但这不起作用，因为我需要在它们之间保持5px的空间。

作为参考，这是我正在使用的风格：

<Style  TargetType="{x:Type TabControl}" x:Key="TabControlStyle">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1"  Margin="120,0,4,0" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                    <Border Name="Border" Grid.Row="1" Background="Transparent" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" >
                        <ContentPresenter Name="PART_SelectedContentHost" Margin="0" ContentSource="SelectedContent" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontFamily" Value="Verdana" />
    <Setter Property="Margin" Value="0,0,0,0" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Height" Value="35" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border Name="Border" Margin="0,0,0,0" Background="{DynamicResource RedGradient}" CornerRadius="7,7,0,0" >
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"
                            RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="#ABABB2" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource DarkRedColorBrush}" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True" />
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter TargetName="Border" Property="Background" Value="#ABABB2" />
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是一个如何实现其中一个标签的示例：

<TabControl Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,35,0,0" VerticalAlignment="Stretch" 
            Style="{DynamicResource TabControlStyle}" SelectionChanged="TabControl_SelectionChanged">            
    <TabItem Style="{DynamicResource TabItemStyle}" Name="tabCustomers" >
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Source="/Resources/Images/TabMenuIcons/Folder.png" Stretch="None" Margin="5,0,5,0"/>
                <TextBlock Foreground="White">CUSTOMERS</TextBlock>
            </StackPanel>
        </TabItem.Header>

    </TabItem> 

Answer 1

您可能想要将保证金更改为

    <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid>
            <Border Name="Border" Margin="5,0,0,0" Background="Red" CornerRadius="7,7,0,0" >
                <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"
                    RecognizesAccessKey="True"/>
            </Border>
        </Grid>

TabItem ControlTemplate中的

Answer 2

尝试将Horizo​​ntalAlignment更改为'Center'而不是'Left'

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
        <Setter Property="HorizontalAlignment" Value="Center" />