How to draw a circle hole inside a rectangle in xaml

Question

I need to put a image as background of whole page, and put over it a rectangle with a transparent circle hole. The example result is bellow.

Update

I found some solutions using Geometry.Combine, but this does not exists in WP8. With this aproach I could draw a rectangle and a circle and combine both using GeometryCombineMode.Exclude. But this method seems to not exist in WP8. How create something that can I achieve a similar result to Geometry.Combine to create a hole inside a element?

enter image description here

Right now you're just asking for code which isn't allowed on stackoverflow, try editing your question to add more information like what you've tried so far so we know that you put some effort into solving this your self already. — CJK, May 26 '15 at 19:06
Oh, I understood. Actually I'm asking ideas to start research, because I'm pretty lost. P.S.: I love coding, I'd never ask done code :-) — Marcelo Dias, May 26 '15 at 19:21
You should try something and come back when you have a problem. — , May 26 '15 at 19:23
To avoid downvotes it's usually best to do research before you ask a question just so you know. You might want to look into polygons for this as well. — CJK, May 26 '15 at 19:24
Quick hint for your googling.... If your bottom bar is say a `Rectangle` and you utilize `Rectangle.Clip` with an `Ellipse.Geometry` you're on your way. :) — Chris W., May 26 '15 at 19:27
It's ok man, we've all been there. It's just folks around here don't like to be treated like a free code factory...but, we're all about helping each other improve. Cheers — Chris W., May 26 '15 at 19:40
Chris, I'm almost there. It'd be easelly if I can use the aproach in the following link, but I could not get the "inverse clip" explaned there, and I dont know why: http://stackoverflow.com/questions/7705612/how-to-invert-clipping-geometry-in-silverlight-wpf — Marcelo Dias, May 26 '15 at 22:04

score 2 · Accepted Answer · answered May 28 '15 at 05:49

You should look into the Path element and learn the mini-language for the path data. This is a rough example:

<Path x:Name="path" Data="M0,100 v-50 h100 a10,10,0,1,0,50,0 h100 v50 z" Fill="Gray" />

Basically:

Move down 100 px
vertical line up 50 px
horizontal line 100 px
arc of radius 10 px (with some magic; read the docs ;-) )
horizontal line of 100 px
vertical line of 50 px
**z* (automatically complete the path)

How to draw a circle hole inside a rectangle in xaml

1 Answers1