Вкладка Элемент и вкладка Стиль пограничной границы

Как мне настроить пограничную панель управления вкладками так, чтобы у выбранного элемента табуляции не было строки под ним?

Это мои стили управления Tab и 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

Ниже приведен XAML, как я переопределил TabControl для решения этой проблемы. Ключевым элементом информации является свойство Margin HeaderPanel. Вы увидите, что нижнее поле равно -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>

Ответ 2

В прошлом я выполнил это, сделав TabItem продолжением немного дальше, чем он был выделен, поэтому он фактически нарисован поверх элемента границы и скрывает его

Я не помню, как я это сделал, но я думаю, что это было с отрицательным пределом в нижней части TabItem

Ответ 3

Добавить свойство Padding="0,0,0,0" в элемент управления табуляции: -)

Ответ 4

Вместо изменения шаблона 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>