0

我正在尝试为 TabControl 视觉设计制作模板，应如下所示：

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

但不应将阴影应用于活动选项卡项

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

我正在使用边框来应用阴影

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

在此处输入图像描述

4

2 回答 2

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>
于 2013-07-16T10:28:21.017 回答
1

我想出了这个，使用 TabControl 的 Kaxaml 模板，它结合了 Adrian 使用 aLinearGradientBrush来模拟阴影的想法，我使用的是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它的背景，所以它不再是透明的（所以它有阴影。这可能会落在它的脸上，这取决于你想如何使用控件（即，如果你想在下面显示内容）。

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

祝你好运。

于 2013-07-16T11:45:39.020 回答