在 tabcontrol FLAT (WPF) 中制作 TabItems

Question

我的 WPF 应用程序中有一个 tabControl。我想让选项卡变得平坦。当我将鼠标悬停在它们上方时，它们不能改变。

你能帮我解决这个问题吗？

Answer 1

不知道这是否正是您所需要的，但您可以将此数据模板和样式添加到资源字典中，以使用平面样式格式化 TabControl ...

    <ControlTemplate x:Key="TabItemTemplate" TargetType="{x:Type TabItem}">
    <Border Cursor="Hand" x:Name="tab" Background="White" BorderThickness="1,1,1,0" BorderBrush="Black" Padding="5">
        <Grid>
            <ContentPresenter   x:Name="contentPresenter" ContentSource="Header"
                                TextBlock.Foreground="Black"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"/>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="False">
            <Setter TargetName="tab" Property="Background" Value="Gray"/>
            <Setter TargetName="tab" Property="BorderBrush" Value="Black"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="False" />
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter TargetName="tab" Property="BorderBrush" Value="White"/>
                <Setter TargetName="tab" Property="BorderThickness" Value="1,1,1,0"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="HeaderPanel" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                    <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template" Value="{StaticResource TabItemTemplate}" />
</Style>

Answer 2

由于您想让 TabItem 变得扁平，因此您需要的只是从 TabItem 的默认 ControlTemplate 中删除触发器，这些触发器负责为您提供TabItem 交互式控件的外观和感觉。尝试这个示例，希望这是您想要的 -

<Grid>
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid SnapsToDevicePixels="True">
                                <Border BorderThickness="1,1,1,0" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}"
                                        Background="{TemplateBinding Panel.Background}" Name="Bd">
                                    <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}"
                                                      ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
                                                      ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" 
                                                      ContentSource="Header" Name="Content" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                      SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Content="test1" Header="test1"/>
        <TabItem Content="test2" Header="test2"></TabItem>
        <TabItem Content="test3" Header="test3"></TabItem>
    </TabControl>
</Grid>