Xamarin WatchOS, create a game for Apple Watch
Tags: xamarin, csharp, watchos
Published: 2019-02-08 22:48:30

---
title: Xamarin WatchOS, create a game for Apple Watch
published: true
description: 
tags: #xamarin,#csharp,#watchos
cover_image: https://cdn-images-1.medium.com/max/2600/1*SWlq2a61pqVWXD08q5DtsQ.png
---

Xamarin is a development platform that goes beyond making cross-platform applications for iOS and Android.

In this tutorial we will see how to create an application for WatchOS in Xamarin.

# Requirements

* Visual Studio for Mac
* Xcode 10
* Mac OS Mojave
* iPhone Simulator
* Apple Watch Simulator


# Creation of the solution

In this tutorial, you will create a small game for the Apple Watch based on the game of rock, paper and scissors and show a little of the great possibilities that Xamarin provides when creating a solution.

To start, we created a new solution in Visual Studio for Mac.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*6RIgTTsHJMJRxB-NXa025w.png)


Once the solution is created we will add the WatchOS project.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*DXRMGbaim4bGoQ22en9ahw.png)


We select Watchkit application.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*9LjzFN6D34FqwFT3xZOcFg.png)


Uncheck the Include Notification option.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*wxXJUOI5afoJFFsbqpR4lQ.png)


# Design

The graphical interface should be as follows:

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*g_9qo7DuaCisuvRDumHK8g.png)


The construction of the interface is the same as in iOS dragging controls and should be as follows:

* **Label** to see who chose the watch (rock, paper or scissors)
* **Label** to see the result (win, lose, draw)
* **White** thin line separator
* **GroupView** with three buttons
* **GroupView** with a label on the left and a timer on the right

The Label to see the result must have a height proportional to the size of the clock, to assign these values in the Size section.

* Width, is assigned **Relative to Container** with a value of 1, which will take 100% of the width.
* Height, **Relative to Container** is assigned with a value of 0.4, which will take 40% of the clock's height.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*4u5-Ly26ik5vf7d5e9gBVw.png)


A **GroupView** is a view that accommodates each control side by side horizontally.

![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*WhirGmrNzVAjoTdq3SkMjQ.png)

To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.

The timer is a control that shows a type of clock in the form of Label.


![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*2jW3PWRDk32PTK4SHZPqqg.png)

# Code


* Declares an arrangement with the 3 options and a counter to bring the number of games won.

* When initializing we place the images to the buttons and the timer starts to show the elapsed time.

* A function is created with the logic of how to determine the winner.
The complete code of the controller is as follows.

```csharp

using System;

using WatchKit;
using UIKit;
using Foundation;

namespace RockPaperScissorsXamarin.RockPaperScissorsWatchExtension
{

    public partial class InterfaceController : WKInterfaceController
    {

        private int Counter = 0;

        private enum Results { TIE, WIN, LOSE };
        private enum Moves { Rock, Paper, Scissors }

        private Moves[] Options = { Moves.Rock, Moves.Paper, Moves.Scissors };

        protected InterfaceController(IntPtr handle) : base(handle)
        {

        }

        public override void Awake(NSObject context)
        {
            base.Awake(context);

            RockButton.SetBackgroundImage(new UIImage("rock"));
            PaperButton.SetBackgroundImage(new UIImage("paper"));
            ScissorsButton.SetBackgroundImage(new UIImage("scissors"));

            Timer.Start();
        }

        public override void WillActivate()
        {
            Console.WriteLine("{0} will activate", this);
        }

        public override void DidDeactivate()
        {
            Console.WriteLine("{0} did deactivate", this);
        }

        partial void RockButton_Activated()
        {
            Check(Moves.Rock);
        }

        partial void PaperButton_Activated()
        {
            Check(Moves.Paper);
        }

        partial void ScissorsButton_Activated()
        {
            Check(Moves.Scissors);
        }

        private void Check(Moves selection) 
        {
            var random = new Random();

            var position = random.Next(0, Options.Length);
            var machineChoose = Options[position];


            if (selection == machineChoose)
            {
                ResultLabel.SetText(Results.TIE.ToString());
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }

            WinnerLabel.SetText($"Wins: {Counter}");
            OponentLabel.SetText($"Oponent: { machineChoose }");

        }
    }

}

```

The project is executed and the application is executed as follows:


![alt xamarin](https://cdn-images-1.medium.com/max/1600/1*X4O6h4kfT_Z5dpmcKklLmA.png)

# Conclusion

In this example we saw the wide possibilities offered by Xamarin when creating applications, adding support for WatchOS, TVOS, Android Wear and even Android TV applications. 😄

You can check the application code on [Github](https://github.com/andreslopezrm/XamarinWatchOSRockPaperScissors)