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>
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.
<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 ...
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.
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With