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>