How to apply Drop Shadow, Inner Shadow, Gradient Overlay Effect to TextBlock in wpf

I have the following effect for my PSD: -

=============== Drop Shadow ==============

-Blend Mode: - Multiply

-Black color

- Strength: - 50%

Angel: - 90

========== Inner shadow =================

-Blend Mode: - Normal

-White colour

- Strength: - 62%

Angel: - 120

======= Gradient Overlay ================

-Blend Mode: - Normal

-Opacity: - 100%

Angel: - 90

-Start Color: - # 8a8a8a

-End Color: - #ffffff

Below is the image from psd enter image description here

How to apply to Textblack, I applied the following code: -

<TextBlock x:Name="lblTitle" Margin="5" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="20" FontFamily="Arial Bold"
                            TextOptions.TextFormattingMode="Display"  TextAlignment="Left" TextWrapping="Wrap" Text="Tournament: $3 + $0.30 KO Sit and Go">
                                    <TextBlock.Effect>
                                        <DropShadowEffect Color="Black" Opacity="50" Direction="-90" RenderingBias="Quality" ShadowDepth="2" >

 </DropShadowEffect>
    </TextBlock.Effect>
     </TextBlock>
+4
source share
2 answers
Hi we can add the  Inner Shadow as follows

<Grid Height="100" Width="600" Margin="100,100,100,100">
        <Border Background="LightGray" BorderBrush="DarkGray" 
           BorderThickness="1" ClipToBounds="True">
            <Border Background="Transparent" BorderBrush="Black" 
              BorderThickness="1" Margin="-2">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10">
                    </DropShadowEffect>
                </Border.Effect>

            <TextBlock x:Name="lblTitle" Margin="5" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="20" FontFamily="Arial Bold"
        TextOptions.TextFormattingMode="Display"  TextAlignment="Left" TextWrapping="Wrap" Text="Tournament: $3 + $0.30 KO Sit and Go">
            <TextBlock.Effect>
                <DropShadowEffect Color="Black" Opacity="50" Direction="-90" RenderingBias="Quality" ShadowDepth="2" >

                </DropShadowEffect>

            </TextBlock.Effect>

        </TextBlock>
            </Border>
        </Border> 

    </Grid>
+3
source
    Hi  this may help you in adding inner shadow and gradient overlay effect to TextBlock                                                                                          


  <Grid Height="100" Width="600" Margin="100,100,100,100">
        <Border Background="LightGray" BorderBrush="DarkGray" 
           BorderThickness="1" ClipToBounds="True">
            <Border Background="Transparent" BorderBrush="Black" 
              BorderThickness="1" Margin="-2">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10">
                    </DropShadowEffect>
                </Border.Effect>

            <TextBlock x:Name="lblTitle" Margin="5"  FontWeight="Bold" FontSize="20" FontFamily="Arial Bold"
        TextOptions.TextFormattingMode="Display"  TextAlignment="Left" TextWrapping="Wrap" Text="Tournament: $3 + $0.30 KO Sit and Go">
                    <TextBlock.Foreground>
                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop x:Name="WhiteOffset" Color="White" Offset="1"/>
                            <GradientStop x:Name="GrayOffset" Color="Gray" Offset="1"/>
                        </LinearGradientBrush>
                    </TextBlock.Foreground>
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard Storyboard.TargetProperty="Offset" Duration="0:0:1" RepeatBehavior="Forever">
                                    <DoubleAnimation Storyboard.TargetName="WhiteOffset" From="0" To="1" />
                                    <DoubleAnimation Storyboard.TargetName="GrayOffset" From="0" To="1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </TextBlock.Triggers>
                    <TextBlock.Effect>
                <DropShadowEffect Color="Black" Opacity="50" Direction="-90" RenderingBias="Quality" ShadowDepth="2" >

                </DropShadowEffect>

            </TextBlock.Effect>

        </TextBlock>
            </Border>
        </Border> 

    </Grid>
+1
source

All Articles