Question

我正在尝试为TabControl制作模板视觉设计应遵循：

TabControl内容区域应该在TabItems上有小阴影

但不应将阴影应用于活动标签页

问题是我只能将这些模板写成单独的样式这意味着，如果我使用网格，它们将最终出现在不同的网格中，我无法更改Zindex，只能使一个TabItem突然出现在阴影中

我正在使用Border来应用阴影

<Border BorderThickness="0" >
  <Border.Effect>
    <DropShadowEffect Direction="90" ShadowDepth="1" Color="#b6b6b6" />
  </Border.Effect>
</Border>

enter image description here

Answer 1

您可以通过在TabItem上将背景颜色更改为渐变来获得类似的内容：

<Style TargetType="TabItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="False">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#eeeeee" Offset="0.0"/>
                        <GradientStop Color="#eeeeee" Offset="0.6"/>
                        <GradientStop Color="#b6b6b6" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

我想出了这个，使用Kaxaml模板进行TabControl，它结合了Adrian的使用LinearGradientBrush来模拟阴影的想法，我正在使用ControlTemplate：

<TabControl>
            <TabControl.Resources>
                <LinearGradientBrush x:Key="myBrush" StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#ffffff" Offset="0.0"/>
                    <GradientStop Color="#eeeeee" Offset="0.46"/>
                    <GradientStop Color="#787878" Offset="1"/>
                </LinearGradientBrush>

                <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="{StaticResource myBrush}" />                                        
                                    <Border Name="Border" Grid.Row="1" Background="#FFFFFF"  BorderBrush="#888888" BorderThickness="1" 
                                            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="#888888" />
                                        <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- SimpleStyles: TabItem -->
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid>
                                    <Border Name="Border" Margin="0,0,-4,0" Background="#E0E0E0" BorderBrush="#888888" BorderThickness="1,1,1,1" >
                                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                          ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter Property="Panel.ZIndex" Value="100" />
                                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                        <Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
                                        <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
                                        <Setter Property="Foreground" Value="#888888" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem Header="Test" />
            <TabItem Header="Test2" />
            <TabItem Header="Test3" />
            <TabItem Header="Test4" />
        </TabControl>

通过解释。

LinearGradientBrush myBrush将在两个地方使用，第一个位于TabControl，Background：

<TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1"  IsItemsHost="True" 
                                              KeyboardNavigation.TabIndex="1" Background="{StaticResource myBrush}" />

第二个在TabItem模板中作为未使用触发器选择的所有项目的背景*;如果需要，您可以添加其他选定的样式：

<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}" />

注意：我已经改变了TabControl的背景，所以它不再透明（因此它有阴影。根据你想要使用控件的方式，它可能会在它的脸上掉下来（即如果你想在下面显示内容。

在此版本之前，我有一个使用DropShadow和剪切网格的不同版本，如果需要，它将保留底层透明度。它依赖于您手动将渐变画笔与DropShadow匹配。如果您需要其他版本，请告诉我，我会发布。

祝你好运。

WPF TabItem和TabControl模板相结合

2 个答案: