Cory Plotts’ Blog

About a month ago, I ran into a weird issue … that literally confounded me … and irked me to no end. The issue was that whenever I applied a drop shadow effect to a border that contained text … the text would blur a little bit.

So, if I did the following:

<Window
    x:Class="EffectsAndBlurryText.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Effects and Blurry Text (Good)"
    Height="300"
    Width="500"
>
    <Grid>
        <Border
            Margin="20"
            Background="White"
            BorderBrush="DarkBlue"
            BorderThickness="3"
            CornerRadius="25"
        >
            <TextBlock
                Text="This text is not blurry."
                FontSize="24"
                TextWrapping="Wrap"
                Foreground="DarkBlue"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
            />
        </Border>
    </Grid>
</Window>

I would get nice looking text:

But if I added the drop shadow effect:

<Window
    x:Class="EffectsAndBlurryText.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Effects and Blurry Text (Bad)"
    Height="300"
    Width="500"
>
    <Grid>
        <Border
            Margin="20"
            Background="White"
            BorderBrush="DarkBlue"
            BorderThickness="3"
            CornerRadius="25"
        >
            <Border.Effect>
                <DropShadowEffect Color="DarkGray"/>
            </Border.Effect>
            <TextBlock
                Text="Why, oh, why is this text blurry?"
                FontSize="24"
                TextWrapping="Wrap"
                Foreground="DarkBlue"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
            />
        </Border>
    </Grid>
</Window>

I would get blurry text (click on the image to better see the issue):

So, how can we get around this annoying issue? Here is what I came up with: wrap the Border in a Grid and put another Border underneath the one you had originally. Put the BorderBrush and Background on the new Border and apply the drop shadow effect there instead.

Here is the xaml:

<Window
    x:Class="EffectsAndBlurryText.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Effects and Blurry Text (Fixed)"
    Height="300"
    Width="500"
>
    <Grid>
        <Border
            Margin="20"
            BorderThickness="3"
            CornerRadius="25"
            Background="White"
            BorderBrush="DarkBlue"
        >
            <Border.Effect>
                <DropShadowEffect Color="DarkGray"/>
            </Border.Effect>
        </Border>
        <Border
            Margin="20"
            BorderThickness="3"
            CornerRadius="25"
        >
            <TextBlock
                Text="Ah, now, the text is not blurry."
                FontSize="24"
                TextWrapping="Wrap"
                Foreground="DarkBlue"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
            />
        </Border>
    </Grid>
</Window>

I would love to hear if anyone has any better ideas to solve this … or just if others have noticed it as well.

I hope this helps someone … I know at least one other person has run into this. See his January 28th blog entry.

Note: this issue seems intermittent at times. In particular, sometimes you can see it only in the designer (both Visual Studio and Blend). However, that being said, it is not just in the designer … I have seen it in running executables.

Update 1: Others seem to have run into this issue as well. There is a current forum post about this, in fact.

Update 2: Initially, I thought this was an NVIDIA driver issue, but others have seen it on ATI cards and Intel integrated solutions. Walt Ritscher says its a known issue. I wonder if it is related to another issue that I’ve had.

Pixel Shader Effects, WPF

Ok, I just have to give a shout out to one of the best tools out there for authoring loose xaml. And, if the logo didn’t give it away … it’s Robby Ingebretsen’s Kaxaml tool. It is available here for download … free of charge!

It’s been out for quite some time … so the purpose of this blog post is really to just publicly thank him for making such an awesome tool … one, in fact, that I don’t leave home without.

Recently, I have been composing Haikus … just because a tool like this … deserves poetry … and poetry better than mine!

But, in case you haven’t heard about it or haven’t played with it much … here is some quick info. I believe you pronounce it <ka-zam-al> … and I like to think like Shazam! Pow! (I have not confirmed this was the intent of its author … it might just be the meanderings of this crazy mind of mine.)

It has a pretty sweet list of features:

• A snippet library with the ability to insert snippets via shortcut
• IntelliSense
• A folding editor
• An integrated color picker
• A xaml scrubber (or pretty printer or formatter or whatever you want to call it)
• The ability to zoom in and out on your rendered xaml
• The ability to make your xaml larger (use ctrl-wheel)
• Handles both WPF and Silverlight
• And more!

Bonus: Robby recently recorded several videos that will bring you up to Kaxaml power user status in a matter of minutes. Check them out.

Silverlight, Utilities, WPF