Question

I have a WPF application that has a 3rd party data grid with a border around it. I've used the DropShadowEffect to put a shadow behind the border, but this seems to affect performance somewhat (not nearly as much as a BitmapEffect, but still noticeable) and makes the font rendering fuzzy. Is there a way to somehow apply the effect to the border, but not its contents?

I tried setting the Effect on the contents to {x:Null}, but that didn't help.

Here is a sample app I came up with. It puts a shadow behind the border, but it also puts a shadow behind each line of text. I want the shadow behind the border, but not the text.

<Window x:Class="WpfEffectTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Border BorderBrush="Black" BorderThickness="10" CornerRadius="5" Margin="25">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="5" />
            </Border.Effect>
            <StackPanel>
                <TextBlock>This is some text</TextBlock>
                <TextBlock>This is some text</TextBlock>
                <TextBlock>This is some text</TextBlock>
                <TextBlock>This is some text</TextBlock>
                <TextBlock>This is some text</TextBlock>
                <TextBlock>This is some text</TextBlock>
            </StackPanel>
        </Border>

    </Grid>
</Window>
Was it helpful?

Solution

The link from gcores had the answer, which is to put the border and its content together in the same grid so the content overlays the border.

<Window x:Class="WpfEffectTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Border BorderBrush="Black" BorderThickness="10" CornerRadius="5" Margin="25">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="5" />
            </Border.Effect>
        </Border>
        <StackPanel Margin="35">
            <TextBlock>This is some text</TextBlock>
            <TextBlock>This is some text</TextBlock>
            <TextBlock>This is some text</TextBlock>
            <TextBlock>This is some text</TextBlock>
            <TextBlock>This is some text</TextBlock>
            <TextBlock>This is some text</TextBlock>
        </StackPanel>
    </Grid>
</Window>

OTHER TIPS

One simple (hack?) solution is to do

<StackPanel Background="White">

This should solve the text with drop-shadow problem (Not sure about the performance problem though). The problem is that WPF applies effects to the set element and all it's children in the visual tree. This link explains it better: DropShadowEffect performance issue

Try the following block (or similar) for all TextBlocks:

<TextBlock>
    <TextBlock.Effect>
        <DropShadowEffect BlurRadius="30" ShadowDepth="5" Color="White"/>
    </TextBlock.Effect>
</TextBlock>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top