2008-12-30 54 views
6

使用xaml(wpf)我试图摆脱下面的“插图A”中显示的选项卡控件下的行,以便它最终看起来像“插图B”:摆脱标签控件的该选项卡下的行

插图甲

http://www.arulerforwindows.com/images/peskylinea.png

插图乙

http://www.arulerforwindows.com/images/peskylineb.png

钍当我定义选项卡项目但显示为附加到选项卡控件时,e行显示出来,因为在选项卡项目或选项卡控件中的任一个或两个上更改BorderThickness似乎不会产生所需的结果。

我需要通过透明背景来做到这一点,其中实心填充矩形不能用来掩盖问题。

下面的代码:

<!--Tab Control--> 
<Style TargetType="{x:Type TabControl}"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid KeyboardNavigation.TabNavigation="Local"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" /> 
        <Border 
         Name="Border" 
         Grid.Row="1" 
         Background="{StaticResource WindowBackgroundBrush}" 
         BorderBrush="{StaticResource DefaultSystemBrush}" 
         BorderThickness="1,1,1,1" 
         Margin="0,0,0,0" 
         CornerRadius="4" 
         KeyboardNavigation.TabNavigation="Local" 
         KeyboardNavigation.DirectionalNavigation="Contained" 
         KeyboardNavigation.TabIndex="2" > 
         <ContentPresenter 
          Name="PART_SelectedContentHost" 
          Margin="4" 
          ContentSource="SelectedContent" /> 
        </Border>           
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
         <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
        </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
      <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" /> 
     </Trigger> 
     </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid> 
        <Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0"> 
         <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Panel.ZIndex" Value="100" /> 
         <Setter TargetName="Border" Property="Background" Value="Transparent" /> 
         <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="LightGray" /> 
         <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

由于提前,

罗布

+0

我可能会丢失一些东西,但tabitem的默认tabcontrol不会在您的插图中有该行。你在谈论未被选中的标签吗?见http://blog.paranoidferret.com/index.php/2008/01/18/the-wpf-tab-control-inside-and-out/那里的图片没有显示该行。 – Jab 2008-12-30 15:15:27

+0

我也曾见过。如果仔细观察,前几个插图在选定选项卡下面没有行,但最后几个(在定义tabitem之后)在它们下面有一行。 – Rob 2008-12-30 15:24:24

回答

2

使用ShowMeTheTemplate我发现了风格的一部分,它是在TabItem的。如果您覆盖它,您可能有兴趣设置的默认控制模板中还有很多。

<MultiTrigger> 
    <MultiTrigger.Conditions> 
    <Condition Property="Selector.IsSelected"> 
     <Condition.Value> 
     <s:Boolean>True</s:Boolean> 
     </Condition.Value> 
    </Condition> 
    <Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Top}" /> 
    </MultiTrigger.Conditions> 
    <Setter Property="FrameworkElement.Margin"> 
    <Setter.Value> 
     <Thickness>-2,-2,-2,-1</Thickness> 
    </Setter.Value> 
    </Setter> 
</MultiTrigger> 
1

这工作得很好。

<Style TargetType="TabItem"> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Border x:Name="Chrome" 
         BorderThickness="1,1,1,0" 
         BorderBrush="Black" 
         Background="{TemplateBinding Background}" 
         Padding="2,2,2,1" Margin="1,1,1,0"> 
        <ContentPresenter ContentSource="Header" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Selector.IsSelected" Value="True"> 
         <Setter TargetName="Chrome" Property="Margin" Value="1,1,1,-1"/> 
         <Setter TargetName="Chrome" Property="Padding" Value="2"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

只需更改所选标签项目上的边距和填充。

0

调整边距和填充不适合我。画一个白色(背景颜色)边境上的标签控制边界的伎俩但是:

<ControlTemplate TargetType="{x:Type TabItem}"> 
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 7 0"> 
     <Border x:Name="tabContentBorder" BorderThickness="2 2 2 0" Background="AliceBlue" BorderBrush="AliceBlue" CornerRadius="6 6 0 0"> 
     <ContentPresenter HorizontalAlignment="Center" x:Name="Content" VerticalAlignment="Center" ContentSource="Header" Margin="7 3 7 3"/> 
    </Border> 
    <Border x:Name="tabBottomBorder" BorderBrush="White" BorderThickness="1" Visibility="Hidden" Margin="2 0 2 -2" HorizontalAlignment="Stretch"></Border> 
</StackPanel> 
<ControlTemplate.Triggers> 
    <Trigger Property="IsSelected" Value="True"> 
     <Setter TargetName="tabContentBorder" Property="Background" Value="White" /> 
     <Setter TargetName="tabBottomBorder" Property="Visibility" Value="Visible"/> 
    </Trigger> 
</ControlTemplate.Triggers> 

1

有同样的问题。注意到该行仅为设置了高度的选项卡绘制(它仅设置为一个选项卡,并自动将所有选项卡设置为存储高度)。所以我添加了一个新的TabItemwidth=0height指定并从所有其他选项卡中删除height并为我制造了诀窍。

1
<Style TargetType="TabControl"> 
     <Setter Property="Template"> 
      <Setter.Value> 

       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid KeyboardNavigation.TabNavigation="Local"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 

         <TabPanel x:Name="HeaderPanel" 
           Grid.Row="0" 
           Panel.ZIndex="1" 
           Margin="0,0,0,-1" 
           IsItemsHost="True" 
           KeyboardNavigation.TabIndex="1" 
           Background="Transparent" /> 

         <Border x:Name="Border" 
          Grid.Row="1" 
          BorderThickness="1" 
          KeyboardNavigation.TabNavigation="Local" 
          KeyboardNavigation.DirectionalNavigation="Contained" 
          KeyboardNavigation.TabIndex="2"> 

          <Border.Background> 
           <SolidColorBrush Color="White"/> 
          </Border.Background> 

          <Border.BorderBrush> 
           <SolidColorBrush Color="White"/> 
          </Border.BorderBrush> 

          <ContentPresenter x:Name="PART_SelectedContentHost" 
              Margin="0" 
              ContentSource="SelectedContent" /> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 
0

另一种非常简单的方法是只需添加一个额外的标签宽度为零,你可以设置高度为你想要的东西,甚至只是做它的可见性隐藏。然后,您可以设置选项卡高度,而不需要在设置高度的选项卡上使用恼人的水平线。

  <TabItem Header="" Width="0" Height="30" Visibility="Hidden" /> 
相关问题