WPF .net - Buttons look different when zoomed

Question

I am developing a WPF .net app in visual studio and having an issue where the buttons and their shaders look different depending on how zoomed in I am. This applies to changing the resolution of the displays as well. I have attached a few screenshots illustrating the issue. Anybody know what's going on here?

• I am using the WPF-Neumorphism-Plus kit for visual studio

• My XAML (I've only included the style stuff but can add more if needed)

        <Style x:Key="Button_Background" TargetType="Border">
            <Setter Property="Background"       Value="#ffffff"/>
            <Setter Property="CornerRadius"     Value="50"/>
            <Setter Property="Opacity"          Value="0.2"/>
        </Style>
  
        <Style x:Key="Text_Format" TargetType="Label">
            <Setter Property="FontFamily"       Value="Dubai Medium"/>
            <Setter Property="FontSize"         Value="40"/>
            <Setter Property="Foreground"       Value="#ffffff"/>
        </Style>
  
        <Style x:Key="NeumorphismStyle_light" TargetType="Button">
            <Setter Property="FontFamily"       Value="Dubai Medium"/>
            <Setter Property="Foreground"       Value="#ffffff"/>
            <Setter Property="FontSize"         Value="40"/>
            <Setter Property="Background"       Value="#abccde"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Effect>
                                <WPF_Neumorphism_Plus:Neumorphism_Plus_Shader BorderRadius="25" BlurRadius="10" OffsetX="4" OffsetY="5" SpreadRadius="2"
                                        PrimaryColor="#6d828f" SecondaryColor="#d5ebf7" />
                            </Grid.Effect>
                            <Rectangle Fill="{TemplateBinding Background}" RadiusX="25" RadiusY="25"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
  
            <Style.Triggers>
                <Trigger Property="Tag" Value="on">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Grid.Effect>
                                        <WPF_Neumorphism_Plus:Neumorphism_Plus_Shader BorderRadius="25" BlurRadius="6" OffsetX="5" OffsetY="3" SpreadRadius="0"
                                        PrimaryColor="#81b376" SecondaryColor="#cff0c7" Inset="1"/>
                                    </Grid.Effect>
                                    <Rectangle Fill="{TemplateBinding Background}" RadiusX="25" RadiusY="25"/>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Background" Value="#b7deab"/>
                </Trigger>
                <Trigger Property="Tag" Value="off">
                    <Setter Property="Background" Value="#abccde"/>
                </Trigger>
            </Style.Triggers>
        </Style>
  

Answer 1

I've got this issue many times, I learnt a simple fix to this one day. All you have to do is add your Grid in your a ViewBox, then you have to set the ViewBox to have StretchDirection="Both" and Stretch="Uniform"

XAML

<Viewbox StretchDirection="Both" Stretch="Uniform">
    <Grid Height="720" Width="1280" >
     <!-- Your XAML Code Here. -->
    </Grid>
</ViewBox>

I know that you probably already know this, but just keep in mind that you need to add all this code in between <Window/>. Also my grid here is 720p, you can change that to the width and height you want.

What this does is adds the grid into a ViewBox. When you zoom in, it will zoom in evenly.

Answer 2

It appears to me that this is based on a perspective issue (zoomed vs regular). Looking at the two images you provided, the button with 'D' text does not alter its perspective. Maybe this is due to the ambient area between the edge of the text area and edge the button. Have you tried changing the background of the button and text items separately?