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.