设置TabControl
的BorderThickness
属性设置为0:
<TabControl Margin="0"
ItemsSource="{Binding TabItems}"
SelectedIndex="0"
BorderThickness="0">
<!--The rest of your code here-->
</TabControl>
更新 - 调整标签头
这一个是有点棘手 - 这将需要更新TabControl
的模板。你可以用手做,但TabControl
的模板非常大,所以我推荐使用Blend开始。在Blend中打开项目,打开“对象和时间线”窗口,右键单击您的TabControl
,单击编辑模板,然后选择“编辑副本”。这将创建一个默认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>
找到TabPanel
名为“headerPanel”,其左边距设置为0,最后一件事,如果你使用的混合它应该设置您TabControl
的风格来使用你的新风格,但如果没有你需要确保你自己设定的风格:
Style="{StaticResource TabControlStyle1}"
,消除周围的标签控件的内容部分的边界。大!第一个标签项目也有点偏离边缘的问题。不知何故可以调整吗? – konrad
@konrad - 查看更新后的答案。 –