Blur background with Viewbox

i'm building a similar effect which AERO glass gives you, a blurred window. I quickly realized that is not easy in WPF, but i managed to get it to work almost completely. I'm just stuck when a Viewbox is involved.

So what i did was: I created a rectangle, made a visual brush to take a portion of a given background element, convert the viewbox to take exactly the space of the image that the rectangle overlaps and use that as the fill for the rectangle.

<Grid x:Name="grid">
    <Image x:Name="image" Source="someImage.png"/>
    <Rectangle x:Name="blurBackgroundRect" Width="100" Height="100">
            <BlurEffect Radius="10"/>
                Visual="{Binding ElementName=image}"
                    <MultiBinding Converter="{StaticResource visualBrushTargetConverter}">
                        <Binding ElementName="grid"/>
                        <Binding ElementName="blurBackgroundRect"/>
                        <Binding ElementName="grid" Path="ActualWidth"/>
                        <Binding ElementName="grid" Path="ActualHeight"/>

The ElementName grid, referes to the common parent of my rectangle and my image. I cant make them ancestors, otherwise it would interfere with the blur effect. So i place them next to each other in a grid.

The final part is the Multivalue converter, which does the actual calculation for the VisualBrush Viewbox.

public class VisualBrushTargetConverter : IMultiValueConverter
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        var parentControl = values[0] as FrameworkElement;
        var targetControl = values[1] as FrameworkElement;

        var transformedPos = targetControl.TransformToVisual(parentControl).Transform(new Point());
        var transformedSize = targetControl.TransformToVisual(parentControl).Transform(new Point(targetControl.RenderSize.Width, targetControl.RenderSize.Height));

        transformedSize = new Point(transformedSize.X - transformedPos.X, transformedSize.Y - transformedPos.Y);
        return new Rect(transformedPos.X,

So this is all necessary to reproduce my following problem. If you want to test the code, you can easily place that into a simple wpf application.

If you test this, you see that it works fine. The problem occurs now if we place the rectangle inside a Viewbox and a grid with a fixed size (which mimics my actual problem).

<Image x:Name="image" .../>
    <Grid Width="800" Height="600">
        <Rectangle x:Name="blurBackgroundRect" ...>

So im guessing that the scaling from the viewbox is applied after the layouting, thus won't get recognized in my TransformTo calls. But i already tried to use the actual scaling of the Viewbox in my convert, but to no luck. As long as the Viewbox is there, i can't get it to work, so i hope anybody has an idea what could be wrong, or maybe even point me to a much simpler solution. I want that code to later convert to a custom control, to easily reuse that, so i prefere ways that don't rely to much on any special conditions.


I was able to fix the weird behaviour by changing the Stretch on the VisualBrush to Fill instead of None.

Need Your Help

linq to sql flaws


has linq to sql has any major and known flaw?

Django South migration is throwing an error 'module' object has no attribute 'SET_NULL'

python django django-models django-south

I just generated the migration scripts through ./ schemamigration --auto and ran it. I get the following error. I am stumped as to what it could mean. I have been using SET_NULL for a w...