WPF如何创建类似凹陷边框的内阴影效果

我想要实现下图中的内阴影效果，这是一种类似凹陷边框的阴影。我尝试用线性渐变填充实现了近似效果，但还需要添加模糊效果。

当前我使用的XAML样式代码如下：

<Style TargetType="{x:Type local:LargeLabelWithUnitControl}">
    <Setter Property="MaxHeight" Value="80"/>
    <Setter Property="MinHeight" Value="80"/>
    <Setter Property="MaxWidth" Value="130"/>
    <Setter Property="MinWidth" Value="130"/>
    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:LargeLabelWithUnitControl}">
                <Border BorderThickness="6" CornerRadius="15" >
                    <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="10"
                            >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        
                        <!-- 显示LabelText -->
                        <TextBlock Text="{Binding LabelText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                   Foreground="{TemplateBinding Foreground}" 
                                   HorizontalAlignment="Center"
                                   FontSize="50" 
                                   FontFamily="Calibri"/>

                        <!-- 显示UnitText -->
                        <TextBlock Text="{Binding UnitText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                   Grid.Row="1"
                                   Foreground="{TemplateBinding Foreground}" 
                                   HorizontalAlignment="Center" 
                                   FontSize="20" 
                                   FontFamily="Calibri"/>
                    </Grid>

                    
                    </Border>
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0.3, 0.8" >
                            <GradientStop Color="#ff095750" Offset="0.0"/>
                            <GradientStop Color="#ff148F7F" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

请问该如何实现这种带模糊的凹陷内阴影效果？

实现方案 #

可以通过给内层Border添加DropShadowEffect来实现模糊的凹陷内阴影效果，调整阴影参数与现有渐变边框匹配，修改后的完整样式代码如下：

<Style TargetType="{x:Type local:LargeLabelWithUnitControl}">
    <Setter Property="MaxHeight" Value="80"/>
    <Setter Property="MinHeight" Value="80"/>
    <Setter Property="MaxWidth" Value="130"/>
    <Setter Property="MinWidth" Value="130"/>
    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:LargeLabelWithUnitControl}">
                <!-- 外层边框保留渐变效果，模拟凹陷边框的层次感 -->
                <Border BorderThickness="6" CornerRadius="15">
                    <!-- 内层边框添加内阴影效果 -->
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="10">
                        <!-- 添加内阴影效果 -->
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="10" 
                                              ShadowDepth="-3" 
                                              Color="#FF095750" 
                                              Opacity="0.7"/>
                        </Border.Effect>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="2*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            
                            <!-- 显示LabelText -->
                            <TextBlock Text="{Binding LabelText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                       Foreground="{TemplateBinding Foreground}" 
                                       HorizontalAlignment="Center"
                                       FontSize="50" 
                                       FontFamily="Calibri"/>

                            <!-- 显示UnitText -->
                            <TextBlock Text="{Binding UnitText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                       Grid.Row="1"
                                       Foreground="{TemplateBinding Foreground}" 
                                       HorizontalAlignment="Center" 
                                       FontSize="20" 
                                       FontFamily="Calibri"/>
                        </Grid>
                    </Border>
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0.3, 0.8" >
                            <GradientStop Color="#ff095750" Offset="0.0"/>
                            <GradientStop Color="#ff148F7F" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

参数说明 #

• ShadowDepth="-3"：设置为负数让阴影向内偏移，实现内阴影效果
• BlurRadius="10"：控制阴影的模糊程度，数值越大模糊效果越明显
• Color="#FF095750"：匹配外层渐变的深色，保证整体视觉统一
• Opacity="0.7"：调整阴影透明度，避免阴影过于突兀

如果需要更精细的效果，可以尝试叠加多层DropShadowEffect，或者调整渐变的StartPoint/EndPoint参数，让边框的渐变过渡与阴影更协调。

内容的提问来源于stack exchange，提问作者RBCSharp