Using AirPlay Mirroring to project your iOS UI to an external screen

Not only does MonoTouch allow you to write iOS apps using the ubiquitous and beautiful C# language, but did you know that it also let you control external peripherals?

Whenever a screen gets connected to your device – whether it’s connected through a cable (like TV-out) or through the wireless network (i.e. through AirPlay), an event is published onto the Notification Center. By listening to that event, you can hook that screen up to your app and start putting interesting things there – anything you’d put on your primary UI!

Before we move on, though, it’s important to understand that we as developers actually have no control over the activation of AirPlay Mirroring. Activation is completely up to the user:

Double-tap the home-button, swipe twice to the left and tap the AirPlay button: Image

in the list of available devices, pick your output device and turn the mirroring switch to on:


As the user flicks the Mirroring switch to on, a notification is placed onto the Notification Centre which we can respond to:

CreateWindow then, you ask? It is responsible for hooking up an UIWindow to the external screen and resize it properly to fit its host. Once you have the window in your possession  you can use it like you’d use the default application window:

If your device is already connected to an external screen prior to executing your application, you can easily hook it up in your AppDelegate’s overload of FinishedLoading:

To incrementally test your multi-screen application, you can use the iOS Simulator’s TV-out feature, which is located at Hardware/TV Out:

Please note, however, that turning on the feature tends to shut your app down, why it’s paramount that you have that hook-up in FinishedLoading.

Have fun!

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>