0 Comments

For the previous (and latest) release of Indian Cinema UK app for Windows Phone 8.1, I wanted to display the Film Info in a Hub, but the screen estate to look like the Bing Apps on Windows Phone. I got this inspiration from Amar’s blog post.

But, having done it, there was a problem. There was a margin on the left and because I was displaying the film poster, it looked odd. I wanted the film poster to look flushed left.

Being new to Hub control, I thought it was the 1st Hub Section adding some kind of margin, so I tried a negative margin with a guessed value. This did not work. So, I wanted to inspect the Xaml Visual Tree to find out

  1. which control was contributing the left margin
  2. how much margin was being set

And to do this, XAML Spy came to help. This incredible piece of software shows the visual tree, rather than having to guess the complex XAML rendering behaviour.

Turns out that a default margin is added by the Hub control for all the Hub Sections and the value is 19 as shown below.

xamlspy-flush-left

 

Having discovered that, I then set the margin for the Hub control and here is how it appears now.

wp_ss_20140709_0001