textbox with rounded corners and drop shadow

Question

I'm trying to replicate a textbox like this:

Textbox with drop shadow

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:

CurrentCode

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.

I'll be honest and say that the text-box you've illustrated is ugly. It isn't pretty. I just felt it needed to be said. — Dai
Pretty sure you need to add a corner radius to your second border to get the drop shadow fixed on the top and right. — Lee O.
@Dai, may I ask why you don't like it ? the outside of the box is the background of parent container - you're seeing a snippet of what will be a linear gradient. — andrew
@Lee O, i've discovered that the corner radius makes it block out more - because its a concave curve on the inside and it blocks out to 2 sides of the square on the outside. — andrew

Federico Berasategui Federico Berasategui · Accepted Answer · 2012-11-06T03:09:31

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

textbox with rounded corners and drop shadow

1 Answers