Избавьтесь от строки под этой вкладкой элемента управления вкладки

Question

Используя xaml (wpf), я пытаюсь избавиться от строки под элементом управления вкладками, как показано на «Иллюстрации A» ниже, чтобы она выглядела как «Иллюстрация B»:

Иллюстрация A

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

Иллюстрация B

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

Линия отображается, когда я определяю элемент вкладки, но, кажется, присоединен к элементу управления вкладкой, в результате чего изменение 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>

Заранее спасибо,

Rob

Answer 1

Использование 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>

Answer 2

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

Answer 3

Была такая же проблема. Обратите внимание, что эта линия рисуется только для вкладки с заданной высотой (она установлена ​​только для одной вкладки, и автоматически все вкладки имеют высоту сохранения). Итак, я добавил новый TabItem с width=0 и height и удалил height из всех других вкладок, и это помогло мне.

Answer 4

Это прекрасно работает.

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

Просто измените Margin и Padding на выбранном элементе Tab.

Answer 5

Другой очень простой способ - просто добавить одну дополнительную вкладку с нулевой шириной, где вы можете установить желаемую высоту или даже просто сделать ее скрытой. Затем вы можете установить высоту вкладки без раздражающей горизонтальной линии на вкладке, где вы устанавливаете высоту.

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

Answer 6

Настройка полей и отступов не работает для меня. Однако, нарисовав белую границу (цвет фона) поверх границы элемента управления вкладкой, добились цели:

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