2017-07-16 62 views
0

如何删除TabItemWindow边缘之间的空间。似乎还有一个标签内容框周围的边框,这是不需要的。我怎样才能删除它?如何删除第一个TabItem和Window边缘之间的这个小空间?

enter image description here

这里是我的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保证金,但似乎并不奏效。任何帮助将不胜感激。谢谢!

回答

1

设置TabControlBorderThickness属性设置为0:

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

更新 - 调整标签头

这一个是有点棘手 - 这将需要更新TabControl的模板。你可以用手做,但TabControl的模板非常大,所以我推荐使用Blend开始。在Blend中打开项目,打开“对象和时间线”窗口,右键单击您的TabControl,单击编辑模板,然后选择“编辑副本”。这将创建一个默认TabControl的模板的副本供您开始使用。

enter image description here

这将创建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}" 
+0

,消除周围的标签控件的内容部分的边界。大!第一个标签项目也有点偏离边缘的问题。不知何故可以调整吗? – konrad

+0

@konrad - 查看更新后的答案。 –

相关问题