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>
