Geeks With Blogs
Prabhu Kumar a tech twaddler..

I was working on an application at work when I needed to figure out a really trivial case, well, trivial in theory at least. All I wanted to know was if a button was completely inside a rectangle. Could anything else be simpler you think. Just check the button bounds against the rectangle bounds,

if (Button.Top > Rectangle.Top &&
      Button.Left > Rectangle.Left &&
      Button.Right < Rectangle.Right &&
      Button.Bottom < Rectangle.Bottom)
    //Button is inside rectangle

the Right and Bottom of the Button and Rectangle can be calculated using the Width and the Height properties of each. You’d expect this to work correctly, but as far as Windows Phone 7 is concerned there is only one caveat.

I wrote up a simple application to illustrate this. Create a Windows Phone 7 Silverlight application and add the following to the ContentPanel grid in Mainpage.xaml,

  1. <Grid x:Name="ContentPanel" Grid.Row="1">
  2.     <Canvas x:Name="MainCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  3.         <TextBlock x:Name="RectangleTop" Canvas.Top="0" />
  4.         <TextBlock x:Name="ButtonTop" Canvas.Top="30" />
  5.         <Rectangle x:Name="ColoredRectangle" Width="480" Height="150" Fill="Coral" Opacity="0.4" Canvas.Top="150" Canvas.Left="0"/>
  6.         <Button x:Name="MyButton" Content="Move Me" Canvas.Top="400" Canvas.Left="160" Background="Purple"/>
  7.     </Canvas>           
  8. </Grid>

the constructor of Mainpage looks like this,

  1. public MainPage()
  2. {
  3.     InitializeComponent();
  5.     MyButton.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(OnMyButtonManipulationDelta);
  7.     RectangleTop.Text = String.Format("Rectangle Top: {0}", Canvas.GetTop(ColoredRectangle));
  8.     ButtonTop.Text = String.Format("Button Top: {0}", Canvas.GetTop(MyButton));
  9. }

We register for the ManipulationDelta event on the button and update the Text on the two Textblocks to show the Top properties of the rectangle and the button, if you run the program this is how the application will look,


The OnMyButtonManipulationDelta() function will be called whenever a ManipulationDelta event occurs on the MyButton control, which happens when the user clicks and drags the button around. Here we want to move the button along with the users drag,

  1. void OnMyButtonManipulationDelta(object sender, ManipulationDeltaEventArgs e)
  2. {
  3.     double deltaX = e.DeltaManipulation.Translation.X;
  4.     double deltaY = e.DeltaManipulation.Translation.Y;
  6.     double btnX = Canvas.GetLeft(MyButton);
  7.     double btnY = Canvas.GetTop(MyButton);
  9.     btnX += deltaX;
  10.     btnY += deltaY;
  12.     Canvas.SetLeft(MyButton, btnX);
  13.     Canvas.SetTop(MyButton, btnY);
  15.     ButtonTop.Text = String.Format("Button Top: {0}", Canvas.GetTop(MyButton));
  16. }

In this function we get the delta manipulation values along the X and Y axis and add it to the Buttons Left and Top property, this makes sure that the button control moves along with the users finger when he/she clicks and drags the button.

Now when we move the button and place it inside the rectangle the values on the textblocks update,


Things are fine till here, but they start getting interesting when you move the button to the top of the rectangle,


the Button control appears to be well inside the Rectangle but the Top property of the button is 144 where as that of the Rectangle is 150. The values suggest that the button is outside the rectangle!

This happens because there is more to a button control than what meets the eyes. The button is not confined within the white rectangular boundary but is much bigger than that. When you drag and drop a button control using the visual editor in Visual Studio, the area of the button that is selected is bigger than the button itself, (see image below)


This is intentional and done to make sure that the target area for the user is a bit larger than the control itself so that the control can be selected easily without requiring too much precision. This, of course, is a nice feature (ask anyone who has tried using a Windows Mobile touch screen device with a finger ;)

Placing the Button control precisely on top of the rectangle like below,


reveals that there are 12 extra pixels on all sides of the button control. (rectangle top = 150,  button top = 138)

So that is all in this post. In the next post we’ll see how easy it is to pick a button control and flick it, the button will bounce around the screen and come to a halt gradually. Refreshing old memories of marbles ;)


Post attachments
Source Code:

I forgot to add that the same case is also true for textbox and password box control

Update 2
I just recorded a short video of the application in action,


Posted on Monday, November 22, 2010 11:37 PM Applications , Windows Phone 7 , Development | Back to top

Comments on this post: Windows Phone 7 : UI Control Boundaries

# re: Windows Phone 7 : UI Control Boundaries
Requesting Gravatar...
I have found this post very informative and logical. Thank you for sharing your logical thought with us.
Left by website development on Jan 20, 2011 5:49 PM

# re: Windows Phone 7 : UI Control Boundaries
Requesting Gravatar...
Great post man, trivial stuff like that grinds a developer when something like this turns up admidst building an application and takes hours to figure out what is throwing calculations off.
Left by Dre on Jan 18, 2012 1:28 PM

# re: Windows Phone 7 : UI Control Boundaries
Requesting Gravatar...
Hey you done a great job, i forward to my friends also.
Left by limousines for hire in sydney on Mar 22, 2012 4:15 PM

# re: Windows Phone 7 : UI Control Boundaries
Requesting Gravatar...

I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of Button control in Windows Phone 7 Development and it will help me a lot.

Thank you very much!
Left by Bipin Sinha on Apr 21, 2012 2:41 PM

# re: Windows Phone 7 : UI Control Boundaries
Requesting Gravatar...
link is broken
Left by s on Jun 30, 2014 10:53 PM

Your comment:
 (will show your gravatar)

Copyright © TechTwaddle | Powered by: