“HELLO WORLD”
WITH 	

XAMARIN 	

AND 	

VISUAL STUDIO 2013
Presented at the	

Indy .NET Mobile Developers Group, May 2014	...
GETTING STARTED: 	

XAMARIN MAC
• Using Android? Install the Android SDK from here:
http://developer.android.com/sdk/index...
GETTING STARTED:	

VS2013
• DownloadVS2013: http://www.visualstudio.com/en-us/
downloads (Note: Xamarin will not work with...
PREPARING FORTHISTALK	

• I updated to the alpha release of Xamarin…i.e. my IDE has
the new look and feel	

• I decided to...
PROJECT LAYOUT
IOS
CHOOSING AN IOS PROJECT
IOS STARTUP
IOS DEFAULT STORYBOARD
• Storyboards are view
editing with transition
information	

• Single view project
instantiated a v...
XAMARIN IOS UI EDITOR
IOS RESULT
ADD A BUTTON AND	

CLICK HANDLER
ANDROID
ANDROID SDK INSTALL
CHOOSING AN	

ANDROID PROJECT
STARTINGTHE EMULATOR
STARTINGTHE EMULATOR
ANDROID CODE
ANDROID WITHVIEW EDIT
ANDROID DEFAULTVIEW
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/re...
WINDOWS PHONE
WINDOWS PHONE 8.1
• If running in aVM like Parallels, you will need to
turn on nested virtualization: http://
kb.parallels...
WP8 NEW PROJECT
EMPTYVIEW
ADD A BUTTON
AND RUN…
ADD INTERACTION
TOOLSTO STAY CROSS
PLATFORM
• Universal Projects (VS2013, coming to Xamarin): here
and here	

• Shared Project Reference M...
BUT I JUST WANTTO DRAW A
PICTURE
• For now…platform specific	

• System.Drawing cross-platform coming from
Xamarin
F# DSL FOR UI
this.mainModel <- new MainViewModel()
!
let payButton = Button (text = "Click Me!")
let subtotalLabel = Labe...
GOOD OPEN SOURCE APPS
TO LOOK AT
• My-StepCounter1: builds with
the starter version of Xamarin
and works on iOS and Androi...
TIPS
• On iOS, use the simulator as much as you can.Turn
around is fastest with it.	

• On Android, use the device.Turn ar...
THANKS!
Upcoming SlideShare
Loading in...5
×

How To: Mobile "Hello World" With Xamarin and VS-2013

386

Published on

Introductory talk at the Indianapolis .NET Mobile Developers Meetup in May 2014.

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
386
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How To: Mobile "Hello World" With Xamarin and VS-2013

  1. 1. “HELLO WORLD” WITH XAMARIN AND VISUAL STUDIO 2013 Presented at the Indy .NET Mobile Developers Group, May 2014 Brad Pillow, PillowSoft LLC
  2. 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. 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. 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. 5. PROJECT LAYOUT
  6. 6. IOS
  7. 7. CHOOSING AN IOS PROJECT
  8. 8. IOS STARTUP
  9. 9. IOS DEFAULT STORYBOARD • Storyboards are view editing with transition information • Single view project instantiated a view on startup
  10. 10. XAMARIN IOS UI EDITOR
  11. 11. IOS RESULT
  12. 12. ADD A BUTTON AND CLICK HANDLER
  13. 13. ANDROID
  14. 14. ANDROID SDK INSTALL
  15. 15. CHOOSING AN ANDROID PROJECT
  16. 16. STARTINGTHE EMULATOR
  17. 17. STARTINGTHE EMULATOR
  18. 18. ANDROID CODE
  19. 19. ANDROID WITHVIEW EDIT
  20. 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. 21. WINDOWS PHONE
  22. 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. 23. WP8 NEW PROJECT
  24. 24. EMPTYVIEW
  25. 25. ADD A BUTTON
  26. 26. AND RUN…
  27. 27. ADD INTERACTION
  28. 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. 29. BUT I JUST WANTTO DRAW A PICTURE • For now…platform specific • System.Drawing cross-platform coming from Xamarin
  30. 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. 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. 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. 33. THANKS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×