CODEWITHSUNDEEP
wpfxamlwindows-phone-8canvas
Marcelo Dias
Marcelo Dias

Reputation: 429

How to draw a circle hole inside a rectangle in xaml

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

Upvotes: 0

Views: 1483

Answers (1)

Peter Torr
Peter Torr

Reputation: 12019

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:

  1. Move down 100 px
  2. vertical line up 50 px
  3. horizontal line 100 px
  4. arc of radius 10 px (with some magic; read the docs ;-) )
  5. horizontal line of 100 px
  6. vertical line of 50 px
  7. **z* (automatically complete the path)

Upvotes: 2

Related Questions