如何使用 WPF XAML 获得插入阴影

Question

我已经尝试在 SO 上遵循一些不同的答案，以在我的Textbox上实现投影效果，这是我到目前为止的代码：

<Style x:Key="TextBoxRoundedInset" TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" ClipToBounds="True">
                            <Border Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="-2">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                            <Border.Effect>
                                    <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
                                </Border.Effect>
                            </Border>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>

然后用我的样式显示

<TextBox x:Name="textBox" Background="#263238" Height="40" Margin="0,0,0,50" TextWrapping="Wrap" Width="221" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="0" Style="{DynamicResource TextBoxRoundedInset}" FontSize="25"/>

但我最终得到的结果如下所示：

我不希望文本发光，相反，我基本上希望文本字段看起来像是放入背景中的任何有关如何更正此问题的信息都将非常感谢

Answer 1

我通常将BorderThickness属性与BorderBrush属性结合使用来提供 3D 效果，通过交换两个 Borders 的BorderThickness值，使其看起来好像字段被压在内部，甚至外部。

这是我用你的截图：

<Border x:Name="border" CornerRadius="3" BorderBrush="White" BorderThickness="0,0,2,2" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" ClipToBounds="True">
    <Border Background="Transparent" BorderBrush="Black" BorderThickness="2,2,0,0" CornerRadius="2">
        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
    </Border>
</Border>

缺点是无法再更改BorderBrush和BorderThickness属性，因为它们没有绑定。

只需更改这两个边框中的颜色以满足您的需要，我通常只使用黑色和白色，因为这种组合通常会产生最强的效果。

Answer 2

老问题，但我做的有点不同。 效果看起来不那么刺眼，具体取决于所选的 BorderBrush 和 BorderThickness。

<Border Background="Transparent"  BorderThickness="2"  BorderBrush="Black">
    <Border.Effect>
        <BlurEffect/>
    </Border.Effect>
    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>

结果可能是这样的