設置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 - 查看更新後的答案。 –