textbox with rounded corners and drop shadow

Question

I'm trying to replicate a textbox like this:

The background outside the textbox will be taken care of by the parent container.

To my knowledge there are 4 items I need to take care of:

• Rounding corners
• Adding an inner drop shadow to the top and right hand side
• Adding an outer drop shadow to the left and bottom sides
• Avoiding the text in the text box inheriting the shadow effects.

I've borrowed code from WPF rounded corner textbox and http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight but I just don't have enough grasp on WPF to do this.

Code at present:

<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>

This renders as:

Problems are that the drop shadow is outside the rounded corners on the top and right; the text is shadowed; and i've not figured out how to add a shadow to outside of left & bottom.

If I remove

CornerRadius="8"

from the BorderThickness then I get a rectangle with the shadow on the inside.

I'm open to any pointers in how to solve this.

Answer 1

Put a Background other than null or transparent in the Border that has the DropShadowEffect, otherwise any elements contained by it will also get the dropshadow. Also, play around with the Direction property of the DropShadowEffect to get the shadow in different angles