更新 - 调整标签页

Question

如何删除TabItem与Window边缘之间的空格。选项卡内容框周围似乎也有一个边框，这是不需要的。我怎样才能删除它？

这是我的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＆＃39; s BorderThickness属性设置为0：

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

更新 - 调整标签页

这个有点棘手 - 这需要更新TabControl的模板。您可以手动执行此操作，但TabControl的模板非常大，因此我建议您使用Blend开始使用。在Blend中打开您的项目，打开＆＃39;对象和时间线＆＃39;窗口，右键单击TabControl，单击编辑模板，然后“编辑副本”。这将创建默认TabControl模板的副本，供您开始使用。

这将为您创建一个 lot 的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>

使用名称＆＃39; headerPanel＆＃39;查找TabPanel并将其左边距设置为0.最后，如果您使用Blend，它应该设置您的TabControl样式以使用您的新样式，但如果不是，您需要确保自己设置样式：

Style="{StaticResource TabControlStyle1}"

如何在第一个TabItem和Window边缘之间删除这个小空格？

1 个答案:

更新 - 调整标签页