How to avoid a blurry screen when using DropShadowEffects

Today, I created a DropShadowEffect on a Border. Any child of that border ended up being slightly blurry as well.

Well, it turns out that this is just the way it is. Child data of a Border will get blurry if a blur affects is applied to a Border.

The fix was somewhat easy. Make the border a sibling, not a parent.  What does this mean?  Look at the difference in the below XAML.

Border as Parent (Bad and Blurry)

<Window x:Class="RoundedCornerApp.RoundedCornerWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        Title="Rounded Corner Window"            
        Height="690" Width="890" 
        Style="{DynamicResource RoundedCornerWindowStyle}">
    <Border x:Name="MainBorder" Style="{DynamicResource RoundedCornerMainBorderStyle}" >
        <Grid Name="MainGrid" Style="{DynamicResource RoundedCornerMainGridStyle}" >
        </Grid>
    </Border>
</Window>

Border as Sibling (Good and Clear)

<Window x:Class="RoundedCornerApp.RoundedCornerWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        Title="Rounded Corner Window"            
        Height="690" Width="890" 
        Style="{DynamicResource RoundedCornerWindowStyle}">
    <Grid Style="{DynamicResource RoundedSiblingGridStyle}" MouseLeftButtonDown="DragWindow" >
        <Border x:Name="MainBorder" Style="{DynamicResource RoundedCornerMainBorderStyle}" />
        <Grid Name="MainGrid" Style="{DynamicResource RoundedCornerMainGridStyle}" >


        </Grid>
    </Grid>
</Window>

Notice that we first add a parent Grid, then we remove the child MainGrid from the MainBorder and put both the MainBorder and the MainGrid under the new parent Grid. This did take a little different styling, but it resolved the issue. I no longer have blurriness when using a DropShadowEffect on my border.

Here is my Style ResourceDictionary.

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Start - Rounded Corner Window Style -->
    <Style x:Key="RoundedCornerWindowStyle" TargetType="{x:Type Window}">
        <Setter Property="WindowStyle" Value="None" />
        <Setter Property="AllowsTransparency" Value="True" />
        <Setter Property="Background" Value="Transparent" />
    </Style>
    <!-- End - Rounded Corner Window Style -->

    <!-- Start - Sibling Grid Holder Style -->
    <Style x:Key="RoundedSiblingGridStyle" TargetType="{x:Type Grid}" BasedOn="{x:Null}" />
    <!-- Start - Sibling Grid Holder Style -->

    <!-- Start - Main Border Style -->
    <Style x:Key="RoundedCornerMainBorderStyle" TargetType="{x:Type Border}">
        <Setter Property="CornerRadius" Value="10" />
        <Setter Property="Margin" Value="0,0,10,10" />
        <Setter Property="Background" Value="#FF112DB7" />
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="OpacityMask" Value="#FF223EC7"  />
        <!--Some apps looks fuzzy-->
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Color="Gray" Opacity=".50" ShadowDepth="10" />
            </Setter.Value>
        </Setter>
    </Style>
    <!-- End - Main Border Style -->

    <!-- Start - Main Grid Style -->
    <Style x:Key="RoundedCornerMainGridStyle" TargetType="{x:Type Grid}">
        <Setter Property="Margin" Value="10,10,20,20" />
    </Style>
    <!-- End - Main Grid Style -->
</ResourceDictionary>

Leave a Reply