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:

<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.

Related Content

Subscribe to the post comments feeds or Leave a trackback