文本框帶有圓角和陰影

我試圖複製一個文本框是這樣的：文本框帶有圓角和陰影

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

文本框帶有圓角和陰影

回答

相關問題