Ravendra's Blog

March 20, 2012

Contents within a Broder with DropShadowEffect getts blured (WPF)

Filed under: Uncategorized — Ravendra Mishra @ 11:02 am

I have a user control which mimics behaviour of modal window on WPF application. This user control is wrapped in a border with drop shadow effect. Problem is contents within this user control are not clear, fonts are specially blurred, problem getts worse on resizing etc.


				<Style TargetType="{x:Type UserControl}" x:Key="ctModalWindow">


				<Setter Property="Template">


				<Setter.Value>


				<ControlTemplate TargetType="{x:Type UserControl}">


				<Grid>


				<Border Style="{StaticResource DarkShadowBorderStyle}">


				<Grid>

............

.................

                </grid>


				</Border>


				</Grid>


				</ControlTemplate>


				</Setter.Value>


				</Setter>


				</Style>

 

I found that creating a new border without dropshadow effect and wrapping everything else init solves the problem. While original order is just on top of everything else. It gives same visual appearance and behaviour but solves the problem of blurness. So now template looks like as below


				<Style TargetType="{x:Type UserControl}" x:Key="ctModalWindow">


				<Setter Property="Template">


				<Setter.Value>


				<ControlTemplate TargetType="{x:Type UserControl}">


				<Grid>


				<Border Style="{StaticResource DarkShadowBorderStyle}"/>


				<Border Style="{StaticResource BorderStyle}">


				<Grid>

............

.................

                </grid>


				</Border>


				</Grid>


				</ControlTemplate>


				</Setter.Value>


				</Setter>


				</Style>

 


				<Style TargetType="{x:Type Border}" x:Key="BorderStyle">


				<Setter Property="Background" Value="#FF0090BC"/>


				<Setter Property="BorderBrush" Value="#FF0090BC"/>


				<Setter Property="CornerRadius" Value="5"/>


				<Setter Property="Width" Value="Auto"/>


				<Setter Property="Height" Value="Auto"/>


				</Style>

 


				<Style TargetType="{x:Type Border}" x:Key="DarkShadowBorderStyle" BasedOn="{StaticResource BorderStyle}">


				<Setter Property="Effect">


				<Setter.Value>


				<DropShadowEffect Opacity="0.65" Direction="270" BlurRadius="10"/>


				</Setter.Value>


				</Setter>


				</Style>

Blog at WordPress.com.