擺脫標籤控件的該選項卡下的行

使用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>

由於提前，

羅布

來源

2008-12-30 Rob

我可能會丟失一些東西，但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

我也曾見過。如果仔細觀察，前幾個插圖在選定選項卡下面沒有行，但最後幾個（在定義tabitem之後）在它們下面有一行。 – Rob 2008-12-30 15:24:24

使用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>

來源

2008-12-30 15:45:25 Jab

這工作得很好。

<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>

只需更改所選標籤項目上的邊距和填充。

來源

2011-05-20 13:10:42 stnkvcmls

調整邊距和填充不適合我。畫一個白色（背景顏色）邊境上的標籤控制邊界的伎倆但是：

<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>

來源

2011-10-18 21:14:49 nash

有同樣的問題。注意到該行僅爲設置了高度的選項卡繪製（它僅設置爲一個選項卡，並自動將所有選項卡設置爲存儲高度）。所以我添加了一個新的TabItem與width=0和height指定並從所有其他選項卡中刪除height併爲我製造了訣竅。

來源

2012-08-30 09:27:50 user1635583

<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>

來源

2016-06-03 08:30:07

另一種非常簡單的方法是隻需添加一個額外的標籤寬度爲零，你可以設置高度爲你想要的東西，甚至只是做它的可見性隱藏。然後，您可以設置選項卡高度，而不需要在設置高度的選項卡上使用惱人的水平線。

  <TabItem Header="" Width="0" Height="30" Visibility="Hidden" />

來源

2016-11-17 14:08:25

擺脫標籤控件的該選項卡下的行

回答

相關問題