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>

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: