文本框带有圆角和阴影

我试图复制一个文本框是这样的：文本框带有圆角和阴影

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

的问题是，所述阴影在顶部和右侧的圆角之外;文字是阴影;我还没有想出如何添加一个阴影到左边&底部之外。

如果我从了borderThickness删除

CornerRadius="8"

然后我得到在里面的阴影矩形。

我愿意在如何解决这个任何指针。

来源

2012-11-06 andrew

我会诚实地说，你说的文本框是丑陋的。它不漂亮。我只是觉得有必要说。 – Dai

很确定你需要在你的第二个边框上添加一个圆角半径来获得固定在顶部和右侧的投影。 –

@戴，请问为什么你不喜欢它？盒子的外部是父容器的背景 - 你会看到线性渐变的片段。 – andrew

将一个Background放置在Border的空白或透明之外，其中DropShadowEffect为DropShadowEffect，否则它包含的任何元素也会得到阴影。另外，玩弄DropShadowEffect的Direction属性，以获得不同角度的影子

来源

2012-11-06 03:09:31

由于某种原因，这会删除边框本身。我会继续试验 – andrew

文本框带有圆角和阴影

回答

相关问题