tags:

views:

703

answers:

3
+1  Q: 

blurred opacity

I need to create a transparent blurred background. Lets suppose I have a border with a white blurry transparent background. Everything that is behind the border is blurred.

Thanks

edit: Im trying to avoid dependencies, Im currently using .net 3.0 nad want it to run with XP too.

Mockup image: http://cid-5118a172ef0f9c34.skydrive.live.com/self.aspx/Pública/partialblurred.png

+2  A: 

I would imagine you will need use an Effect for this, applied to a background rectangle or grid.

There's a decent library of effects here if that floats your boat.

Steven Robbins
A: 

Use Vista glass.

Eclipse
It needs Vista. Im trying top avoid dependencies.
Artur Carvalho
It's only an option if you're willing to degrade for older machines.
Eclipse
+4  A: 

A VisualBrush can be used to get close to what you want, but has some limitations.

As long as you only need the glass effect within the window (and not be an effect over other windows) and that the placement of the glass effect border is controlled tightly then you could you something like this:-

  <Grid>
    <Border x:Name="src" Background="Silver">
      <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50">Hello World</Label>
    </Border>
    <Border Background="White" Margin="40" >
      <Border Opacity="0.5" >
        <Border.BitmapEffect>
          <BlurBitmapEffect Radius="10"/>
        </Border.BitmapEffect>
        <Border.Background>
          <VisualBrush  Visual="{Binding ElementName=src}" Stretch="None" />
        </Border.Background>
      </Border>
    </Border>
  </Grid>

I don't think that a child element within the visual tree is able to get the VisualBrush of it's parent so this might be a limitation for you. (i.e. the glass panel cannot be contained by the background panel)

I've used VisualBrushes many times usually with TranslateTransforms to move them around a bit to get the right image in the right place.

Rhys
I can almost do it with Visual Brush. Do you think its possible to do something like the mockup image? Or is this what you were referring when you said "as long ... the placement of the glass effect border is controlled tightly"? Thanks!
Artur Carvalho
Found it! Needed AlignmentX="Left" AlignmentY="Top" Stretch="None".
Artur Carvalho
Nice example, but I wouldn't recommend using BitmapEffect for performance reasons. Even if it looks fine now, it might bite you further down the line. You can change that bit to <Border.Effect><BlurEffect Radius="10" /></Border.Effect>
Steven Robbins
Thanks for the info Steve.
Artur Carvalho