{"id":16617,"date":"2015-02-12T10:45:33","date_gmt":"2015-02-12T18:45:33","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=16617"},"modified":"2019-04-02T16:05:05","modified_gmt":"2019-04-02T23:05:05","slug":"your-first-watch-kit-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/your-first-watch-kit-app\/","title":{"rendered":"Creating Your First WatchKit App"},"content":{"rendered":"

\t\t\t\t\"\"<\/a>A new release of Xamarin’s Apple WatchKit support is now available for download<\/a>, including initial support for the Xamarin iOS Designer. This post walks you through steps to create your first Watch Kit app (described in more detail in our WatchKit getting started guide<\/a>).<\/p>\n

File > New Watch App<\/h2>\n

Start with a new or existing iOS app, then add a Watch App<\/b>. Xamarin Studio automatically creates both required projects: a Watch App and a Watch Extension.<\/p>\n

\"\"<\/a><\/p>\n

Reference the Watch Extension<\/h2>\n

Before you can use the iOS Designer, or deploy and test in the iOS Simulator, reference the Watch Extension from your iOS app; and reference the Watch App from the Watch Extension.<\/p>\n

\"\"<\/a><\/p>\n

Don’t forget to set the Bundle Identifiers correctly<\/a> in each Info.plist<\/code>.<\/p>\n

Design the Watch UI<\/h2>\n

Double-click to open the Interface.storyboard<\/b> in the iOS Designer.<\/p>\n

Drag a Label<\/code> and a Button<\/code> onto the default InterfaceController<\/code>. Don’t forget to give them a Name<\/b> in the Properties pane (eg. myLabel<\/code> and myButton<\/code>).<\/p>\n

\"\"<\/a><\/p>\n

Double-click on the button in the Designer to create a handler for when it’s pressed. Press enter<\/em> to place the method in the code.\n\"\"<\/a><\/p>\n

Just Add Code<\/h2>\n

Add the following code to the InterfaceController.cs<\/b> file, which updates the label each time the button is pressed:<\/p>\n

int clickCount = 0;\u2028\r\npartial void myButton_Activated (WatchKit.WKInterfaceButton sender)\r\n{\r\n    var msg = String.Format(\"Clicked {0} times\", ++clickCount);\r\n    myLabel.SetText(msg);\r\n}<\/code><\/pre>\n
Test in the Simulator<\/h2>\n
Ensure the Watch Extension project<\/b> is set to be the start-up project, then select an iPhone 6 simulator and start debugging. Tip:<\/i> use Bezel<\/a> to see the simulator rendered inside an Apple Watch frame.<\/p>\n
\"Simulator\"<\/a><\/p>\n
If you don’t see the simulated watch screen, select Hardware > External Displays<\/b> in the iOS Simulator<\/b>.<\/p>\n
Video Walkthrough<\/h2>\n
You can also see the above steps on getting started with WatchKit in action in this short video:<\/p>\n