[SOLVED] Why does the text inside an element budge when I get the dropshadow effect by hovering the mouse over it?

Why does the text inside an element budge when I get the dropshadow effect by hovering the mouse over it?

I have a custom UserControl, a grid containing a single large button with a few elements inside of it. I added a dropshadow effect when the mouse is over it, it all works but the text inside the button either slightly stretch vertically or get a vertical movement, it's hard to tell, some may say it gets blurry. It's very noticeable and distracting, specially when quickly getting the mouse over it on an and off in succession.

I wonder what is causing it and how to fix it.

I am going to attach a couple of pictures, they might not do the issue justice. without dropshadow with dropshadow

I tried changing a few of the main grid attributes based on some posts here with blurry text and dropshadow, but to no effect - UseLayoutRounding and SnapsToDevicePixels. I thought the issue could be with the Width and Height somehow forcing the rendering into a restricted fixed size, but nothing worked.

I also tried TextOptions.TextFormattingMode="Display" that helped a bit but did not completely fix the issue, the texts still move.

I put the content of the button in a border as some solutions suggested but then I couldn't click the button, and it didn't even help with the moving texts.

What else can be done?

Edit: Adding reproducing code for a button with a triggered dropshadow on mouse over.

<Button Background="White" Margin="20,20,0,0" Width="300" Height="200" >
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}">
                <TextBlock FontSize="12" FontWeight="Light" HorizontalAlignment="Center" VerticalAlignment="Center">
                    Text
                </TextBlock>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect Direction="270" ShadowDepth="3" BlurRadius="14" Opacity="0.2"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Solution

The solution that I found worked best visually was to create a Border underneath the bottom, as a sibling to the main button. Then I added MouseEnter and MouseLeave event handlers where I respectively add and remove the DropShadow effect from this extra Border. It works really well and causes no noticeable distortion to text or image on the original button.