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.

Windows 7 Mobile to support Silverlight 3.0

Cool news for Windows Mobile 7 – it will support Silverlight 3.0 out of the box (although I hope it’s updated to reflect whatever version is current at the time WinMo7 finally ships).

That still gives phone vendors an opportunity to support Flash before these phones ship though.I’m open to anything decent that brings some consistency to the programming model across phones. Maybe HTML 5 will eventually do that – when all of the mobile browsers support it (not to mention their desktop counterparts).