2012-03-16 1 views
15

タブコントロールボーダーのスタイルを変更して、選択したタブアイテムの下にラインがないようにするにはどうすればよいですか?タブアイテムとタブコントロールボーダースタイル

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> 

私はタブ項目コントロールテンプレートをオーバーロードすることなく、スクリーンショットに表示された外観を実現することができた場合は、デフォルトのタブの項目テンプレートが上、その下の行を持っていないとして、私は問題を持っていません選択されたタブ。私はこれまでこれを行うことができませんでした。ご協力いただきありがとうございます。

+1

私はあなたが持っている唯一のオプションは、タブコントロールのテンプレートをあなたのコメントを –

+0

感謝を上書きすることだと思います。はい、私はたぶんtabcontrolテンプレートをオーバーロードする必要があります。私はちょうど私はtabcontrolの境界線の一番上の行を描画する方法を知っていないので、それは行があるが、その行は選択されたtabitemの下に表示されません。たぶんtabitemテンプレートは、tabitemテンプレートを介してtabitemの下の境界線の可視性を制御できるように、1ピクセルでtabcontrolをオーバーレイすることができます。それが可能であると仮定するように見えるxamlが現在何をしているのかは現在わかりません。 – dior001

答えて

20

以下のXAMLは、この問題を解決するためにTabControlをオーバーライドした方法です。情報の重要な部分はHeaderPanelMarginプロパティです。ボトムマージンが-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> 
+1

選択した 'TabItem'だけではなく、' TabItems'のすべての行を隠すことはできませんか? – Rachel

+0

現在のTabItemが他のTabHeadersの上にあるため、そうではありません。それは非常にスムーズに動作します。 (それを数年間使ってきた)。 – Stewbob

+1

優秀!ご協力ありがとうございました。 – dior001

1

私は、それは、その実際に境界要素の上に描画して、割り当てられたと

それを隠しています TabItemは少しさらに下延長することによって、これを達成しました

どうしたのか正確には思い出せませんが、それは底辺にマイナスのマージンがあると思います。

1

プロパティを追加Padding="0,0,0,0" to tab control:

+0

実際に-1に設定するほうがずっと良い:Padding = " - 1" – RaceRalph

1

tabcontrolテンプレートを変更する代わりに、境界線を覆う2つの行を追加し、隠蔽にマイナスの余白を使用して、TabItemテンプレートを変更することもできます。

(「TopLineCover」と「BottomLineCover」国境をご覧ください。)

enter image description here

<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> 
関連する問題