CODEWITHSUNDEEP
wpfborder
Eddie Deyo
Eddie Deyo

Reputation: 5420

How do I apply an effect to a Border but not to its contents in WPF?

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>

Upvotes: 12

Views: 29063

Answers (3)

Zolador
Zolador

Reputation: 1

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

<TextBlock>
    <TextBlock.Effect>
        <DropShadowEffect BlurRadius="30" ShadowDepth="5" Color="White"/>
    </TextBlock.Effect>
</TextBlock>

Upvotes: -2

Eddie Deyo
Eddie Deyo

Reputation: 5420

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>

Upvotes: 20

gcores
gcores

Reputation: 12656

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

Upvotes: 5

Related Questions