如何删除第一个 TabItem 和 Window 边缘之间的这个小 space？

Question

如何删除 TabItem 和 Window 边缘之间的 space。选项卡内容框周围似乎也有一个不需要的边框。我怎样才能同时删除它？

这是我的 XAML:

<Grid>
        <TabControl Margin="0" ItemsSource="{Binding TabItems}" SelectedIndex="0">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid Name="Panel">
                                    <Border Name="Border" 
                                            Margin="0,0,-4,0">
                                    </Border>
                                    <ContentPresenter x:Name="ContentSite"
                                                          VerticalAlignment="Center"
                                                          HorizontalAlignment="Center"
                                                          ContentSource="Header"
                                                          Margin="10,2"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="Orange" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Panel" Property="Background" Value="LightGray" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Header" Value="{Binding Header}"/>
                    <Setter Property="Content" Value="{Binding Content}"/>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>

我尝试添加边框并将其设置为 -4 边距，但似乎不起作用。任何帮助将不胜感激。谢谢！

Answer 1

将 TabControl 的 BorderThickness 属性设置为 0:

<TabControl Margin="0"
            ItemsSource="{Binding TabItems}"
            SelectedIndex="0"
            BorderThickness="0">
    <!--The rest of your code here-->
</TabControl>

更新 - 调整选项卡 headers

这个有点棘手 - 这需要更新 TabControl 的模板。您可以手动执行此操作，但 TabControl 的模板非常大，因此我建议使用 Blend 开始。在 Blend 中打开您的项目，打开 'Objects and Timeline' window，右键单击您的 TabControl，单击编辑模板，然后单击 'Edit a copy'。这将创建默认 TabControl 模板的副本，供您开始使用。

这将为您创建手的 XAML。你最终会得到一个看起来像这样的样式资源：

<Style x:Key="TabControlStyle1"
       TargetType="{x:Type TabControl}">
    <Setter Property="Padding"
            Value="2" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Background"
            Value="{StaticResource TabItem.Selected.Background}" />
    <Setter Property="BorderBrush"
            Value="{StaticResource TabItem.Selected.Border}" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid x:Name="templateRoot"
                      ClipToBounds="true"
                      SnapsToDevicePixels="true"
                      KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0" />
                        <ColumnDefinition x:Name="ColumnDefinition1"
                                          Width="0" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0"
                                       Height="Auto" />
                        <RowDefinition x:Name="RowDefinition1"
                                       Height="*" />
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="headerPanel"
                              Background="Transparent"
                              Grid.Column="0"
                              IsItemsHost="true"
                              Margin="2,2,2,0"
                              Grid.Row="0"
                              KeyboardNavigation.TabIndex="1"
                              Panel.ZIndex="1" />
                    <Border x:Name="contentPanel"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Grid.Column="0"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            Grid.Row="1"
                            KeyboardNavigation.TabIndex="2"
                            KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost"
                                          ContentSource="SelectedContent"
                                          Margin="{TemplateBinding Padding}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement"
                             Value="Bottom">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="1" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="Auto" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="2,0,2,2" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement"
                             Value="Left">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="contentPanel"
                                Value="1" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition0"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition1"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="0" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="2,2,0,2" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement"
                             Value="Right">
                        <Setter Property="Grid.Row"
                                TargetName="headerPanel"
                                Value="0" />
                        <Setter Property="Grid.Row"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Grid.Column"
                                TargetName="headerPanel"
                                Value="1" />
                        <Setter Property="Grid.Column"
                                TargetName="contentPanel"
                                Value="0" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition0"
                                Value="*" />
                        <Setter Property="Width"
                                TargetName="ColumnDefinition1"
                                Value="Auto" />
                        <Setter Property="Height"
                                TargetName="RowDefinition0"
                                Value="*" />
                        <Setter Property="Height"
                                TargetName="RowDefinition1"
                                Value="0" />
                        <Setter Property="Margin"
                                TargetName="headerPanel"
                                Value="0,2,2,2" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="TextElement.Foreground"
                                TargetName="templateRoot"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

找到名称为 'headerPanel' 的 TabPanel 并将其左边距设置为 0。最后一件事，如果您使用 Blend，它应该将 TabControl 的样式设置为使用您的新样式，但如果不是，您需要确保自己设置样式：

Style="{StaticResource TabControlStyle1}"

如何删除第一个 TabItem 和 Window 边缘之间的这个小 space？

How can I remove this little space between first TabItem and edge of Window?

c#

wpf

xaml

tabcontrol

更新 - 调整选项卡 headers