Working with watchOS Layout in Xamarin

Designing layouts for the Apple Watch screen sizes presents unique challenges.

Design Tips

The key point is: make your user interface readable and useable on a small watch screen, with a large finger. Don't fall into the trap of designing for the iOS Simulator (which appears very large) and a mouse pointer (which works with tiny touch targets)!

  • Use a black background - it creates the illusion of a larger screen with the watch's black bezel.

  • Do not pad around your screen layout - the bezel forms a natural visual padding.

  • Focus on readability. Use font sizes and colors judiciously to ensure text is readable. Use the built-in text styles to get automatic Dynamic Type support.

Example of Dynamic Type support

  • Focus on touch target sizes. Buttons/tappable table rows with text labels should span the whole screen. Apple says "never place more than three items side-by-side", and if you do use icons and not text labels.

  • Use the Menu control to expose less-frequently used functionality to keep your app design clear and concise.

Implementation

Watch Kit includes the following controls to help you build attractive watch app layouts:

Interface Controller

The WKInterfaceController is the base class all of your scenes.

The design surface for the interface controller behaves like a vertical Group: you can drag other controls onto the interface controller and they will be automatically laid-out one above the other:

Controls are automatically laid-out one above the other

You can set the Position and Size properties on each control to control their appearance:

Set the Position and Size properties on each control

When the size is set to Relative to Container you can provide a proportional value and an offset adjustment. This screenshot shows a button that has been set to use 80% of the watch screen's width (0.8):

Provide a proportional value and an offset adjustment

Group

WKInterfaceGroup is a simple layout container that can be configured to stack controls vertically or horizontally. It includes spacing between each control by default, but you can modify the spacing (and insets) in the Attributes inspector.

Modify the spacing and insets in the Attributes inspector

Groups can themselves be sized and positioned relative to the controls around them, and groups can be nested to create complex layouts.

Groups can be nested to create complex layouts

Separator

The separator control is intended to help provide visual guidance in your layout. Use separators (or background colors or images) to help the user understand which content is related on your screen.

Example of Separator usage

Note the blue and green separators that don't use the full width of the screen have been configured with either Fixed or Relative to Container sizes.

Content Controls

No layout would be complete without the Label, Image, Button, Switch, Slider, Map, and other controls. These can be positioned in your layouts using Groups or the position and size settings on each control.