6

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

提前致谢，

抢

4

6 回答 6

2

Using ShowMeTheTemplate I found out part of the style, it's on the TabItem. There is a lot more in the default control template you may be interested in setting up if you override it. 

<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-30T15:45:25.990 回答
2

有同样的问题。请注意，这条线仅针对设置了高度的选项卡绘制（仅针对一个选项卡设置，并且所有选项卡都自动具有保存高度）。所以我添加了一个新TabItem的 withwidth=0并height指定并height从所有其他选项卡中删除，这对我来说是个窍门。

于 2012-08-30T09:27:50.230 回答
1

这工作得很好。

<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-20T13:10:42.477 回答
1 
   <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-03T08:30:07.680 回答
0

调整边距和填充对我来说效果不佳。然而，在选项卡控件边框上绘制一个白色（背景色）边框就可以了：

<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-18T21:14:49.267 回答
0

另一种非常简单的方法是添加一个宽度为零的额外选项卡，您可以在其中将高度设置为所需的高度，甚至只是使其可见性隐藏。然后，您可以设置选项卡高度，而无需在设置高度的选项卡上设置恼人的水平线。

            <TabItem Header="" Width="0" Height="30" Visibility="Hidden" />
于 2016-11-17T14:08:25.063 回答