Transparent Window Sample in WPF

For some reason, I wanted to experiment with a transparent window in WPF earlier, along with a custom opacitymask. (I think someone on twitter said something that made me want to throw together something, but by the time I was done, I had forgotten what!).

So, here’s what I created:

image

<Window x:Class="TransparentExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStyle="None"
    Title="Window1" Height="450" Width="450" AllowsTransparency="True" Background="Transparent" >
    <Grid Background="Transparent"  >
        <Ellipse Fill="Black" x:Name="ellipse" MouseDown="Ellipse_MouseDown" Stroke="Black" StrokeThickness="8" >
            <Ellipse.OpacityMask>
                <RadialGradientBrush x:Name="opacBrush">
                        <GradientStop Offset=".2" Color="#01000000"></GradientStop>
                        <GradientStop Offset="1" Color="#ff000000"></GradientStop>
                </RadialGradientBrush>
            </Ellipse.OpacityMask>    
            <Ellipse.BitmapEffect>
                <BlurBitmapEffect ></BlurBitmapEffect>
            </Ellipse.BitmapEffect>
        </Ellipse>        
    </Grid>
</Window>

Nothing too shocking there. The ellipse has an opacity mask set to a radial gradient brush. Then, in the mouse down event, I’ve adjusted the origin of the gradient to the the point where the mouse was pressed (and then allow the window to be dragged).

private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        Point pnt = e.GetPosition(null);
        pnt.X = pnt.X / ellipse.ActualWidth ;
        pnt.Y = pnt.Y / ellipse.ActualHeight;
        opacBrush.GradientOrigin = pnt;

        this.DragMove();
    }
}

One thing that stumped me was DragMove. I had put it at the top of the function initially, and couldn’t understand why calls to GetPosition were always returning a 0,0. Finally, it dawned on me that DragMove must be causing it. As soon as it was moved to the last function, everything worked.

The sample code closes the window when the escape key is pressed.

 

Download it.

6 Comments

  1. Is it possible to get the download?

    The page doesn’t seem to be here.

    I couldn’t make the code work but I am just starting to use WPF.

    Thanks,

    Tom

  2. I finally got it to work.

    But when I did, I found that the gradient changed. The white part of the circle (that starts out in the middle) moves to where ever the mouse is during the left mouse down.

    Why does it do that?

    Thanks,

    Tom

    1. That’s what the code does — it moves the gradient to where ever the mouse is during the mouse down, exactly as it says in the blog post. Is that what you mean?

  3. You’re right.

    I had missed that part. When you say the origin of the gradient changed you meant the white part (circle) inside of the black circle would change position – which it does and the whole circle moves as well.

    Thanks,

    Tom

  4. Also, I found I couldn’t make this work until I put:
    AllowsTransparency=”True”

    I changed the window area to:

    WindowStyle=”None” AllowsTransparency=”True”

    It turns out you don’t need the Background=”Transparent”. The AllowsTransparency handles that (I think).

    But I was curious, if I put the background to green in the Grid. You can’t see through it and you can grab the corners of the window outside of the ellipse (which you can’t do if it is transparent). Why can I grab and move the window inside the elipse (which is also transparent) and not the outside corners?

    Thanks,

    Tom

  5. You can only grab the ellipse because that’s what’s handling the mouse down currently. If you change what’s handling the message, you’ll get different results. Since I wanted a transparent ellipse — that’s the way I coded it. You could handle the mouse_down in the grid for example and it would change what caused the window to move.

Comments are closed.