標籤項目和選項卡控件的邊框樣式

如何樣式選項卡控件邊框，使得所選擇項項目沒有它的下面一條線嗎？標籤項目和選項卡控件的邊框樣式

WPF Tab Item

這是我的標籤控制和標籤項目的風格至今。

<!-- Tab control styling --> 
     <Style TargetType="{x:Type TabControl}"> 
      <Setter Property="Padding" Value="10,5,10,5" /> 
      <Setter Property="Margin" Value="3.5" /> 
      <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" /> 
     </Style> 
     <!-- Tab item styling --> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid> 
          <Border 
           Name="Border" 
           Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" 
           BorderBrush="Black" 
           BorderThickness="1,1,1,0" 
           CornerRadius="3,3,0,0" 
           MinWidth="120"> 
            <ContentPresenter x:Name="ContentSite" 
             VerticalAlignment="Center" 
             HorizontalAlignment="Center" 
             ContentSource="Header" 
             Margin="12,2,12,2"/> 
          </Border> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsFocused" Value="True" > 
           <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" /> 
           <Setter Property="HeaderTemplate"> 
            <Setter.Value> 
             <DataTemplate> 
              <TextBlock FontWeight="Bold" Text="{Binding}"/> 
             </DataTemplate> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
          <Trigger Property="IsMouseOver" Value="True" > 
           <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" /> 
           <Setter Property="HeaderTemplate"> 
            <Setter.Value> 
             <DataTemplate> 
              <TextBlock FontWeight="Bold" Text="{Binding}"/> 
             </DataTemplate> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="True" > 
           <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" /> 
           <Setter Property="HeaderTemplate"> 
            <Setter.Value> 
             <DataTemplate> 
              <TextBlock FontWeight="Bold" Text="{Binding}"/> 
             </DataTemplate> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

如果我能實現，而無需超載選項卡項目控件模板然後我沒有一個問題，因爲默認的選項卡項目模板沒有行它下面的屏幕截圖顯示的樣子選中標籤。到目前爲止我還沒有做到這一點。謝謝你的幫助。

來源

2012-03-16 dior001

我認爲你唯一的選擇是覆蓋TabControl的模板 – 2012-03-16 15:58:44

感謝您的評論。是的，我可能不得不重載tabcontrol模板。我只是不知道如何繪製tabcontrol邊框的頂部行，以便它有一條線，但該線在選定的tabitem下不可見。也許tabitem模板可以將tabcontrol覆蓋1個像素，從而允許我通過tabitem模板控制tabitem底部邊框線的可見性。目前還不確定xaml要做什麼，看起來假設它是可能的。 – dior001 2012-03-16 16:07:44

下面的XAML是我已經覆蓋了TabControl的解決這個問題。信息的關鍵部分是HeaderPanel的Margin財產。您會看到底部邊距爲-1，這將其下移到足以掩蓋該線的位置。

<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,4,-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="4" 
              ContentSource="SelectedContent" /> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2012-03-16 16:34:25 Stewbob

不會是隱藏所有的'TabItems'底線，而不是隻對選定的'TabItem'的？ – Rachel 2012-03-16 16:36:02

不，它沒有，因爲當前的TabItem位於其他TabHeaders之上。它工作非常順利。（以這種方式使用它幾年）。 – Stewbob 2012-03-16 16:39:43

優秀！感謝您的幫助。 – dior001 2012-03-16 17:12:05

在過去，我已經通過使TabItem完成這個擴展稍微再往下那麼它的分配，因此它在邊界元素的頂部實際計提並隱藏它

我不記得我是怎麼做到的，但我認爲它的底部有負邊距TabItem

來源

2012-03-16 16:34:59 Rachel

添加屬性Padding="0,0,0,0"到標籤控件:-)

來源

2015-07-15 14:43:17

其實將它設置爲-1會更好：Padding =「 - 1」 – RaceRalph 2018-02-23 11:24:50

而不是修改TabControl的模板，你可能也只是修改的TabItem模板，加入兩行，掩蓋了邊框，並採用減利潤率掩蓋。

（請看一看「TopLineCover」和「BottomLineCover」的邊界。）

<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}"> 
    <Setter Property="Foreground" Value="{DynamicResource VsBrush.WindowText}"/> 
    <Setter Property="Background" Value="{DynamicResource VsBrush.Window}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid SnapsToDevicePixels="true"> 
        <Border x:Name="HeaderBorder" Padding="8,3,8,3" BorderThickness="1,1,1,0" 
          Background="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBrushKey}}" 
          BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}"> 
         <ContentPresenter x:Name="Content" ContentSource="Header" 
              HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
              VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
              /> 
        </Border> 
        <Border x:Name="TopLineCover" BorderThickness="1,1,1,0" Margin="0,-2,0,0" Height="3" Panel.ZIndex="100" 
          Background="{DynamicResource VsBrush.Window}" BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}" 
          VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed"/> 
        <Border x:Name="BottomLineCover" BorderThickness="0,0,0,3" Margin="1,0,1,-2" Panel.ZIndex="100" BorderBrush="{DynamicResource VsBrush.Window}" 
          VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Visibility="Collapsed"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsMouseOver" Value="True"/> 
          <Condition Property="IsSelected" Value="False"/> 
         </MultiTrigger.Conditions> 
         <Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/> 
        </MultiTrigger> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/> 
         <Setter Property="Visibility" TargetName="TopLineCover" Value="Visible"/> 
         <Setter Property="Visibility" TargetName="BottomLineCover" Value="Visible"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2015-12-02 08:37:25 RainCast

標籤項目和選項卡控件的邊框樣式

回答

相關問題