Datsik Datsik - 1 month ago 24
C# Question

How can I get an inset drop shadow using WPF XAML

I've tried following a few different answers here on SO on achieving a drop shadow effect on my

Textbox
, here is the code I have so far:

<Style x:Key="TextBoxRoundedInset" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" ClipToBounds="True">
<Border Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="-2">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
</Border.Effect>
</Border>
</Border>

<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>


Then to display with the styling I have

<TextBox x:Name="textBox" Background="#263238" Height="40" Margin="0,0,0,50" TextWrapping="Wrap" Width="221" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="0" Style="{DynamicResource TextBoxRoundedInset}" FontSize="25"/>


But I end up with a result that looks like this:

Pic

I don't want the text to have a glow to it, instead I basically want the text field to look like its dropped into the background any information on how to correct this would be great thanks

Answer

I usually use the BorderThickness Property in combination with the BorderBrush Property to give that 3D effect to make it look as if the field is pressed inside, or even outside by swapping the values of the BorderThickness of both Borders.

This is what I used with your snipped:

<Border x:Name="border" CornerRadius="3" BorderBrush="White" BorderThickness="0,0,2,2" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" ClipToBounds="True">
    <Border Background="Transparent" BorderBrush="Black" BorderThickness="2,2,0,0" CornerRadius="2">
        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
    </Border>
</Border>

The disadvantage is not being able to change the BorderBrush and BorderThickness Property anymore since they have no Binding.

Just change the colors in those two Borders to fit your need, I usually just use Black and White since that combination usually gives the strongest effect.