Jaa


watchOS User Interface Controls in Xamarin

The WatchKitCatalog sample demonstrates various watchOS controls. The app's storyboard is shown here (click to zoom):

Sample watchOS layout

The programmatic names of all the controls is prefixed with WKInterface (eg. WKInterfaceLabel, WKInterfaceButton).

Control Description Screenshot
Label Use SetText and other properties to control the appearance of text in a label control. NSAttributedString is also supported.
Catalog code
Label screenshot
Button Create and set properties in the storyboard. Ctrl+drag to add an Action to implement a handler for when it's clicked.
Catalog code
Button screenshot
Switch Use SetOn to control the switch state.
Catalog code
Switch screenshot
Slider Many different styles are possible.
Catalog code
Slider screenshot
Image Use myImage.SetImage("MyWatchImage") to load images on the watch, or WKInterfaceDevice.CurrentDevice.AddCachedImage to cache them for repeated use on the watch.
Image Control documentation
Catalog code
Image screenshot
Separator Use separators to help create attractive watch UIs.
Catalog code
Separator screenshot
Map The map image is statically displayed on the watch but you can control many aspects of its appearance, including adding pins.
Catalog code
Map screenshot
Movie & InlineMove Movies can either open on their own, or inline
Catalog code
Movie screenshot
Group Use groups to help create attractive watch UIs.
Catalog code
Group screenshot
Table A simplified version of tables on iOS. Implement DidSelectRow to respond to user selection (or use a segue).
Table Control documentation
Catalog code
Table screenshot
Device WKInterfaceDevice.CurrentDevice includes properties such as ScreenBounds, ScreenScale, and PreferredContentSizeCategory.
Catalog code
Device screenshot
Menu Define the force-press menu in the storyboard and implement the actions for each button in the code.
Menu Control (Force Touch) documentation
Catalog code
Menu screenshot
Text Input Use PresentTextInputController and the WKTextInputMode enumeration.
Text Input documentation
Catalog code
Text input screenshot
Digital Crown The Digital Crown can be used to drive a picker, or it's rotation can be tracked in code.
Catalog code
Digital crown screenshot
Gestures There are four types of gesture recognition that can be added to a scene: Tap, Swipe, Pan, and LongPress.
Catalog code
Gestures screenshot