Introductory presentation on "hello world" for mobile, using Xamarin and VS 2013.

1. “HELLO WORLD”
WITH
XAMARIN
AND
VISUAL STUDIO 2013
Presented at the
Indy .NET Mobile Developers Group, May 2014
Brad Pillow, PillowSoft LLC

2. GETTING STARTED:
XAMARIN MAC
• Using Android? Install the Android SDK from here:
http://developer.android.com/sdk/index.html#download
• Using iOS? Sign up to be an iOS developer here and
then download tools: https://developer.apple.com/
programs/ios/
• Developing for iOS or Android? Download Xamarin tools for
the PC: http://xamarin.com/download#
• Get your free C#T-Shirt like mine here: https://xamarin.com/
sharp-shirt

3. GETTING STARTED:
VS2013
• DownloadVS2013: http://www.visualstudio.com/en-us/
downloads (Note: Xamarin will not work with Express
versions!)
• Developing for iOS (see previous slide)
• Developing for Android (see previous slide)
• Developing for Windows Phone 8? Download: https://
dev.windowsphone.com/en-us/downloadsdk
• Developing for iOS or Android? Download Xamarin tools for
the PC: http://xamarin.com/download#

4. PREPARING FORTHISTALK
• I updated to the alpha release of Xamarin…i.e. my IDE has
the new look and feel
• I decided to update my Android SDK…bad idea. I got an
error when opening the UI layout file,“layout renders
disconnected”…see this link for a temporary fix: http://
forums.xamarin.com/discussion/14344/disconnected-from-
layout-renderer-error-after-updating-android-sdk-tools-to-
version-22-6
• Ugh!

5. PROJECT LAYOUT

6. IOS

7. CHOOSING AN IOS PROJECT

8. IOS STARTUP

9. IOS DEFAULT STORYBOARD
• Storyboards are view
editing with transition
information
• Single view project
instantiated a view on
startup

10. XAMARIN IOS UI EDITOR

11. IOS RESULT

12. ADD A BUTTON AND
CLICK HANDLER

13. ANDROID

14. ANDROID SDK INSTALL

15. CHOOSING AN
ANDROID PROJECT

16. STARTINGTHE EMULATOR

17. STARTINGTHE EMULATOR

18. ANDROID CODE

19. ANDROID WITHVIEW EDIT

20. ANDROID DEFAULTVIEW
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/myButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Button
android:id="@+id/myButton2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello2"
/>
</LinearLayout>

21. WINDOWS PHONE

22. WINDOWS PHONE 8.1
• If running in aVM like Parallels, you will need to
turn on nested virtualization: http://
kb.parallels.com/en/115211

23. WP8 NEW PROJECT

24. EMPTYVIEW

25. ADD A BUTTON

26. AND RUN…

27. ADD INTERACTION

28. TOOLSTO STAY CROSS
PLATFORM
• Universal Projects (VS2013, coming to Xamarin): here
and here
• Shared Project Reference Manager
• PCL - Portable Class Libraries
• Project Linker - aliases to files in a project
• Blog on shared projects forVS2013

29. BUT I JUST WANTTO DRAW A
PICTURE
• For now…platform specific
• System.Drawing cross-platform coming from
Xamarin

30. F# DSL FOR UI
this.mainModel <- new MainViewModel()
!
let payButton = Button (text = "Click Me!")
let subtotalLabel = Label (text = "Subtotal:")
let subtotalTextField = TextField ()
let tipPercentLabel = Label (text = "Tip Percent:")
let tipPercentTextField = TextField ()
let tipPercentSlider = Slider(min = 0., max = 100.)
let totalLabel = Label (text = "Total:")
let totalValueTextField = TextField ()
!
let tipView = View(content = [
subtotalLabel; subtotalTextField;
tipPercentSlider; tipPercentLabel; tipPercentTextField;
totalLabel; totalValueTextField;
payButton;
loadTemplateButton;
loadMarkdownButton;
webView;
])
!
let _ = this.mainModel.TipPercent.Subscribe(fun f -> printfn "slider moved to %f" f)
let _ = this.mainModel.Subtotal.Subscribe(fun f -> printfn “sub-total is %f" f)
!
let altUIBindings = [
Command(payButton, this.mainModel.PayCommand );
Command(loadTemplateButton, loadTemplateCommand );
Command(loadMarkdownButton, loadMarkdownCommand );
ValueToFromFloat(tipPercentSlider, this.mainModel.TipPercent);
ValueToFromString(tipPercentTextField, this.mainModel.TipPercent |> floatToStringProperty);
ValueToString(subtotalTextField, this.mainModel.Subtotal |> floatToStringProperty)
ValueFromString(totalValueTextField, this.mainModel.CalculatedTotal |> floatToStringProperty)
]

31. GOOD OPEN SOURCE APPS
TO LOOK AT
• My-StepCounter1: builds with
the starter version of Xamarin
and works on iOS and Android
• Tasky Portable2 : a cross
platform task manager.Works
on iOS, Android and Windows
Phone.
1. https://github.com/MichaelJames6/My-StepCounter
2. http://docs.xamarin.com/content/TaskyPortable/

32. TIPS
• On iOS, use the simulator as much as you can.Turn
around is fastest with it.
• On Android, use the device.Turn around is fastest on
it. Also the simulator has a nasty restriction on GREF’s
(handles to native Java objects form C#, i.e. UI
controls).
• On WP8…I don’t know since I don’t have a device.

33. THANKS!