Apply DropShadowEffect to WPF Textbox text

Question

How can I apply the DropShadowEffect on the content of a TextBox, as opposed to around the TextBox itself? I'd like the text to have the same effect as if I applied DropShadowEffect to a TextBlock.

<TextBox>
    <TextBox.Effect>
    <DropShadowEffect ShadowDepth="4"
                      Direction="330"
                      Color="Black"
                      Opacity="0.5"
                      BlurRadius="4"/>
    </TextBox.Effect>
</TextBox>

^This creates shadow around the entire box.

<TextBlock>
    <TextBlock.Effect>
    <DropShadowEffect ShadowDepth="4"
                      Direction="330"
                      Color="Black"
                      Opacity="0.5"
                      BlurRadius="4"/>
    </TextBlock.Effect>
</TextBlock>

^This is the desired look. (But for the TextBox text)

EDIT: Take home message is that shaders are applied to every rendered pixel of a control. If you want to apply it to only parts of it, either apply it on that level on that template, or don't render everything else.

score 2 · Accepted Answer · answered Aug 25 '18 at 18:21

Instead you might want to remove the Border, Background and Focus rectangle from the textbox so you still have the TextBox functionality:

<TextBox Background="Transparent"
         BorderBrush="Transparent"
         BorderThickness="0"
         TextWrapping="Wrap">
    <TextBox.Effect>
        <DropShadowEffect ShadowDepth="4"
                          Direction="330"
                          Color="Black"
                          Opacity="0.5"
                          BlurRadius="4"
                           />
    </TextBox.Effect>
    <TextBox.FocusVisualStyle>
        <Style>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate/>
                </Setter.Value>
            </Setter>
        </Style>
    </TextBox.FocusVisualStyle>
</TextBox>

score 1 · Answer 2 · answered Aug 25 '18 at 12:44

1

By customizing the ControlTemplate of your TextBox, you can achive the desired effect:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="TextBox">
            <Grid x:Name="RootElement">
                <!-- Use your effects on the ContentPresenter here. -->
                <ContentPresenter Content="{TemplateBinding Padding}"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

answered Aug 25 '18 at 12:44

AgentFire

8,944
8
43
90

Hello, I'm having trouble adding normal TextBox properties to this ControlTemplate. Namely, Autoscrolling down to the bottom. (I managed to get the TextWrapping going). How would you do this? – B-H Aug 25 '18 at 17:38
1

You are right, worked like a charm. Just needed to add the Effect to the ScrollViewer. Using ContentHost also means that all the TextWrapping and other properties are properly applied! Thanks. – B-H Aug 25 '18 at 18:26

Apply DropShadowEffect to WPF Textbox text

2 Answers2