WPF usercontrol appears blurry when appended to border

Question

I encountered a very strange problem. This is my view:

    <Grid>
        <Border x:Name="C01" VerticalAlignment="Center" Panel.ZIndex="2" HorizontalAlignment="Center" />
    </Grid>

This is the usercontrol I want to display in the view:

    <UserControl x:Class="Nwp.UserComponents.ULogin"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             Width="350" Height="220">
        <Grid>
            <Border Margin="10" BorderBrush="DimGray" BorderThickness="1" Background="White">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
                </Border.Effect>
                <Grid>
                    <!-- ... here's content -->
                </Grid>
            </Border>
        </Grid>
    </UserControl>

To display the usercontrol, I add it as a child of the Border 'C01', like this:

C01.Child = new ULogin();

So far everything is ok, looks like this:

Notice the usercontrol's width and height are 2 even numbers: 350 & 220. If one of them is changed to a odd number, the UserControl is displayed a little blurry:

When I use even numbers again: 330x200, no blur:

Using the odd numbers 330x201, blur again:

Does anyone know how to solve this?

Answer 1

You just need to set the UIElement.SnapsToDevicePixels property on the Border to True:

    <Border Margin="10" BorderBrush="DimGray" BorderThickness="1" Background="White" 
        SnapsToDevicePixels="True">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
        </Border.Effect>
        <Grid>
            ... here's content
        </Grid>
    </Border>

From the linked page on MSDN:

Gets or sets a value that determines whether rendering for this element should use device-specific pixel settings during rendering.

...

For devices operating at greater than 96 dots per inch (dpi), pixel snap rendering can minimize anti-aliasing visual artifacts in the vicinity of single-unit solid lines.

Answer 2

This behavior occurs because you are applying a drop shadow effect to your border. In WPF, this effect will affect all controls inside of this border. Therefore the controls appear blurry.

To fix this, apply the shadow effect to a border with no content. This way, the shadow effect will only be applied to the border itself:

<Grid>
    <Border Margin="10" BorderBrush="DimGray" BorderThickness="1" Background="White">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
        </Border.Effect>
    </Border>

    <Grid Margin="10">
        ... here's content
    </Grid>
</Grid>