WPF：摆脱选项卡标题中的阴影

Posted 2023-03-29

【中文标题】WPF：摆脱选项卡标题中的阴影

【英文标题】：WPF: Get rid of shadow in tab headers

【发布时间】：2021-09-11 11:03:28

【问题描述】：

我有以下代码：

     <Grid>
        <Grid.Resources>
            <Style TargetType="x:Type TabItem" x:Key="TabItemStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="x:Type TabItem">
                            <Border x:Name="Chrome"
                                    BorderBrush="Blue" 
                                    Background="Transparent">
                                <ContentPresenter ContentSource="Header"
                                                  Margin="0,0,0,3"
                                                  HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                                                  VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Selector.IsSelected" Value="True">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,3"/>
                                </Trigger>
                                <Trigger Property="Selector.IsSelected" Value="False">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <Grid.Effect>
            <DropShadowEffect Color="Black"
                              BlurRadius="10"
                              Opacity="0.25"
                              ShadowDepth="4"
                              Direction="270" />
        </Grid.Effect>

        <TabControl Background="Transparent">
            <TabItem Style="DynamicResource TabItemStyle" Header="Tab 1" />

            <TabItem Style="DynamicResource TabItemStyle" Header="Tab 2" />
        </TabControl>
    </Grid>

网格有一个我需要的 DropshadowEffect。 TabControl 的背景必须是透明的。 我有我需要的 TabItems 的样式。

TabItems 的样式导致选项卡标题有阴影。我不想要那个影子。

有没有办法消除 TabItem 标题上的阴影？ 但请保持网格上的阴影。

请帮忙！

最好的问候 /斯蒂夫

【问题讨论】：

网格将填充父网格并位于 tabcontrol 后面。只是网格似乎有阴影。

【参考方案1】：

您可以尝试将效果应用于兄弟Grid：

<Grid>
    <Grid Background="White">
        <Grid.Effect>
            <DropShadowEffect Color="Black"
                              BlurRadius="10"
                              Opacity="0.25"
                              ShadowDepth="4"
                              Direction="270" />
        </Grid.Effect>
    </Grid>

    <Grid>
        <Grid.Resources>
            <Style TargetType="x:Type TabItem" x:Key="TabItemStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="x:Type TabItem">
                            <Border x:Name="Chrome"
                                    BorderBrush="Blue" 
                                    Background="Transparent">
                                <ContentPresenter ContentSource="Header"
                                                  Margin="0,0,0,3"
                                                  HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                                                  VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Selector.IsSelected" Value="True">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,3"/>
                                </Trigger>
                                <Trigger Property="Selector.IsSelected" Value="False">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <TabControl Background="Transparent">
            <TabItem Style="DynamicResource TabItemStyle" Header="Tab 1" />

            <TabItem Style="DynamicResource TabItemStyle" Header="Tab 2" />
        </TabControl>
    </Grid>
</Grid>

那么它不会影响TabControl。

【讨论】：

@Mc_Topaz：你试过这个还是发生了什么？