Question

我正在尝试复制像这样的文本框：

Textbox with drop shadow

文本框外的背景将由父容器处理。

据我所知，我需要照顾4项：

圆角
在顶部和右侧添加内部阴影
在左侧和底侧添加外部阴影
避免文本框中的文本继承阴影效果。

我从WPF rounded corner textbox和http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight借用了代码，但我对WPF没有足够的把握来做这件事。

目前的代码：

<Window x:Class="Test.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
        <Border Background="{TemplateBinding Background}" 
            x:Name="Bd" BorderBrush="Black"
            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8"
                ClipToBounds="True">
            <Border Background="Transparent" BorderBrush="Black" BorderThickness="0,10,10,0" Margin="0,-11,-11,0">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
                </Border.Effect>
                <ScrollViewer x:Name="PART_ContentHost"/>
            </Border>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="Width" Value="Auto">
                <Setter Property="MinWidth" Value="100"/>
            </Trigger>
            <Trigger Property="Height" Value="Auto">
                <Setter Property="MinHeight" Value="20"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5">
        Text
    </TextBox>
</Grid>
</Window>

这呈现为：

CurrentCode

问题是投影在顶部和右侧的圆角之外;文字是阴影;我还没弄明白如何在左边和外边添加阴影底部。

如果我删除

CornerRadius="8"

从BorderThickness那里得到一个带有阴影的矩形。

我对如何解决这个问题的任何指示持开放态度。

Answer 1

在具有Background的{{1}}中放置除{null}或透明以外的Border，否则其中包含的任何元素也将获得该阴影。另外，使用DropShadowEffect的{{3}}属性来获取不同角度的阴影

带圆角和投影的文本框

1 个答案: