1

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

带有阴影的文本框

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

据我所知,我需要注意 4 个项目:

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

我从WPF 圆角文本框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>

这呈现为:

当前代码

问题是阴影在顶部和右侧的圆角之外;文本被遮蔽;而且我还没有弄清楚如何在左侧和底部之外添加阴影。

如果我删除

CornerRadius="8"

从 BorderThickness 然后我得到一个内部有阴影的矩形。

我愿意接受有关如何解决此问题的任何指示。

4

1 回答 1

0

在具有 的 中放置一个Background不是 null 或透明BorderDropShadowEffect,否则它包含的任何元素也会得到阴影。另外,使用 的Direction属性DropShadowEffect来获得不同角度的阴影

于 2012-11-06T03:09:31.523 回答