Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

border

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>
like image 299
Eddie Deyo Avatar asked Apr 30 '09 15:04

Eddie Deyo


People also ask

What is Padding in WPF?

Padding represents the distance between the side of the control (which can be the margin) and its content. The content depends on the type of the control. Margin is outside the UI element, while Padding is inside it.

How do you make a grid border in WPF?

<Grid> <Border BorderBrush="Black" BorderThickness="2"> <Grid Height="166" HorizontalAlignment="Left" Margin="12,12,0,0" Name="grid1" VerticalAlignment="Top" Width="479" Background="#FFF2F2F2" /> </Border> ... and so on ...

What is Margin in WPF?

The margin property in WPF allows you set spacing between elements in a window. You can assign the margins for the Top, Right, Bottom and Left. Every control that derives from FrameworkElement has this property.


2 Answers

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>
like image 87
Eddie Deyo Avatar answered Oct 04 '22 11:10

Eddie Deyo


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

like image 23
gcores Avatar answered Oct 04 '22 13:10

gcores