Increasing the touch area of a Rectangle in XAML

I have been recently working on a Windows Phone project that required a small item to be dragged across the screen.

It was soon discovered that while it worked nicely on the emulator using the precise mouse it wasn’t so easy to use when using my chubby fingers on a REAL device.

The element i was working with was a Rectangle, so after some playing i discovered that creating a large “invisible” stroke around the rectangle would fit the task.

To achieve this i created the rectangle as shown:

 <Rectangle Fill="#FFF4F4F5" Height="270" Width="270"  Stroke="#00FF0000"   StrokeThickness="120" />

 

This XAML creates an invisible hit area of 120 each side of the rectangle using the stroke property therefore creating a rectangle of 30 x 30. The stroke is invisible by using a color with 0% alpha.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *