CODEWITHSUNDEEP
c#visual-studio-2012buttonwindows-phone-8border
user2975038
user2975038

Reputation: 537

Windows Phone 8 button too big

When I add a button control to blend I end up with the picture below. The layout of the button it's much bigger than it's border, but I can actually click the button if it's in the layout, even if the border is smaller.

That can really mess up the UX, because user can press button even if he shouldn't. How can I fix this and make layout = border ?

I use Visual Studio 2012 and building windows phone 8 store C# project.

Button

Upvotes: 0

Views: 111

Answers (1)

Peter Torr
Peter Torr

Reputation: 12019

This is because of the additional touch-target overhang added to the control. It appears that you have placed a RenderTransform on the button which makes the overhang unnecessary. The easiest thing to do is:

  1. Right-click the Button
  2. Choose Edit template -> Edit a copy
  3. Give the template a meaningful name
    • If you want to make the same changes in all buttons, choose Apply to all
  4. In the template, you will see an item named ButtonBackground with a Margin of 12 (it will be highlighted green in the properties window, since it is bound to a resource
  5. Click the little green button next to the Margin in the properties window and choose Reset
  6. Enter whatever value you like

Upvotes: 2

Related Questions