1. Uvod u Xamarin.Forms Almir Vuk App Impact 4/20/2018 3:04 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. 4/20/2018 3:04 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Uvod u Xamarin.Forms Almir Vuk 4/20/2018 3:04 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. O meni Almir Vuk App developer IT/DEV Blogger
Microsoft Student Partner
Student FIT-a
In programming more than 6 years
almirvuk.blogspot.com

5. Agenda Cross-platform development Hybrid vs Native Xamarin
Xamarin.Forms
Dependency Services (advanced)
Custom Renderers (advanced)

6. Presentation Goals
Is that every attendee at the end of the presentation has basic understanding what is Xamarin and Xamarin.Forms.
... and to show how easy (when you are familiar with C# and xaml) is to get started with mobile development using Xamarin.Forms.

7. What makes a native app?

8. Traditional development – SILO Approach
Build Apps Multiple Times
Multiple Teams
Multiple Code Bases
Different toolsets

9. Hybrid development Lowest common denominator Browser fragmentation
Developing & designing for 1 platform, happen to get other platforms
Limited access to the native APIs – Poor performances – One UI design

10. What is Xamarin?
Is platform for native developpment on iOS, Android, Mac and Windows (UWP, WP & Windows Store) Apps using
Visual Studio and C#

11. Why C#?
LINQ
XML support
Delegates

12. Why C#?

13. Why C#?

14. Xamarin Platform Two approaches: Xamarin.Forms
Xamarin.Android/Xamarin.iOS (Traditional)

15. What is Xamarin.Forms?
Xamarin.Forms is cross platform UI Framework based on Xamarin platform for creating mobile apps for:
Android 4.0+
iOS 6.1+
Windows Phone 8.x (SL)
Windows Phone 8.1 (RT)
Windows 10 (UWP)

16. Xamarin + Xamarin.Forms
Shared C# Backend
Shared UI Code
iOS C# UI
Windows C# UI
Android C# UI
Shared C# Backend
Traditional Xamarin Approach
With Xamarin.Forms: More code-sharing, all native

17. Xamarin.Forms: What’s included
Shared C# Backend
Shared UI Code
✓ 40+ Pages, layouts, and controls
(Build from code behind or XAML)
✓ Two-way data binding
✓ Navigation
✓ Animation API
✓ Dependency Service
✓ Messaging Center

18. Visual Studio templates
Built in project templates in Visual Studio
Under Cross-Platform section.

19. Portable Class Library (PCL)
PCL vs Shared project
Two project styles available for sharing code using Xamarin.Forms.
Which one you select has an impact on how and what kind of code is shared
Shared project (SAP)
Portable Class Library (PCL)

20. PCL & Shared project
Shared project enable project-level sharing of source code + assets (images, sound...)
PCL enable binary-levele of sharing source code and as output we have .dll (client does not need source code)

21. Which one to use? SAP PCL Pros: Cons Pros Cons
All APIs directly available
Platform-specific logic can be added directly
All file types can be shared
Cons
Can lead to spaghetti code
Harder to unit test when conditional code is used
Must be shiped as source code
Pros
Enfroces arhitectural design
Can be unit tested separately as a binary
Can be shiped in binary form (Nuget)
Cons
Limited APIs directly available
„Difficult“ to share non-code files
Requre more work to integrate platform specific code

22. Project Structure

23. Project Structure - Dependencies
Platform specific projects depend on the shared code project (SAP or PCL), but not the other way around
Shared code project (SAP or PCL) define UI and business logic and than call it from each platform specific project

24. Xamarin.Forms App anatomy
Xamarin.Forms application have two required components which are provided by the template
Application
(Initialization for the app)
Page(s)
(Represents single screen to display)

25. Pages Page is abstract class used to define single screen of content
First you have a set of pages for each screen of your application
There are things like Content, and MasterDetail which gives you a nice flyout
With a tabbed view you get the correct look on each platform
iOS on bottom, Android on top, and on WP you have a Pivot control
Content
MasterDetail
Navigation
Tabbed
Carousel

26. Layouts containers Stack Absolute Relative Grid ContentView ScrollView
Inside of a page are layouts
A lot of options from something simple like a stack panel to complex and powerful grids
Stack
Absolute
Relative
Grid
ContentView
ScrollView
Frame

27. Controls (Views) ActivityIndicator BoxView Button DatePicker Editor
Entry
Image
Label
ListView
Map
OpenGLView
Picker
ProgressBar
SearchBar
Slider
You have more than 40 controls, layouts, and pages to mix and match from.
These are all of the controls you have out of the box, you can of course create your own.
What is unique is you get the native control and have access to it.
Consider an Entry Field
On iOS it is mapped to UITextField
Android it is EditText
Windows Phoen it is a TextBox
Stepper
TableView
TimePicker
WebView
EntryCell
ImageCell
SwitchCell
TextCell
ViewCell

28. Native UI from shared code
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="
xmlns:x="
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20"
VerticalOptions="Center">
<Entry Placeholder="Username"
Text="{Binding Username}"/>
<Entry Placeholder="Password"
Text="{Binding Password}"
IsPassword="true"/>
<Button Text="Login" TextColor="White"
BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
<!-- Settings -->
</TabbedPage.Children>
</TabbedPage>
At runtime, each control will be mapped to its native equivalent, which is what will be rendered.

29. UI via XAML <?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="
xmlns:x="
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20"
VerticalOptions="Center">
<Entry Placeholder="Username"
Text="{Binding Username}"/>
<Entry Placeholder="Password"
Text="{Binding Password}"
IsPassword="true"/>
<Button Text="Login" TextColor="White"
BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
<!-- Settings -->
</TabbedPage.Children>
</TabbedPage>
UI via XAML

30. UI via C# using Xamarin.Forms; var profilePage = new ContentPage {
var profilePage = new ContentPage {
Title = "Profile",
Icon = "Profile.png",
Content = new StackLayout {
Spacing = 20, Padding = 50,
VerticalOptions = LayoutOptions.Center,
Children = {
new Entry { Placeholder = "Username" },
new Entry { Placeholder = "Password", IsPassword = true },
new Button {
Text = "Login",
TextColor = Color.White,
BackgroundColor = Color.FromHex("77D065") }}} };
var settingsPage = new ContentPage {
Title = "Settings",
Icon = "Settings.png",
(...)
var mainPage = new TabbedPage { Children = { profilePage, settingsPage } };
UI via C#

32. Platform
Customization

33. Platform specific customization in PCL
Dependency service
Custom Renderers

34. Dependency service
Allows developers to define behavior in platform-specific projects. DependencyService then finds the right platform implementation, allowing shared code to access the native functionality
SQLite implementation
Implementing Text-to-Speech
Checking Device Orientation
Getting Battery Information
Picking a Photo from the Library
...

35. Custom renderer
XF UI is rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform. Custom Renderers let developers override this process to customize the appearance and behavior of Xamarin.Forms controls on each platform

36. Custom renderer
XF UI is rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform. Custom Renderers let developers override this process to customize the appearance and behavior of Xamarin.Forms controls on each platform

37. Working with images in PCL

38. Tools
Xamarin.Studio
Visual Studio
Visual Studio for Mac

39. Demo: // Xamarin.Forms Todo App
Almir Vuk
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

40. Xamarin.Forms is best for:
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
Developers comfortable with XAML

41. Homework 
Xamarin Docs
James Montemagno
Can Bilgin
Almir Vuk
Planet Xamarin

42. 4/20/2018 3:04 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

43. Pitanja? (podjeli poklone)
4/20/2018 3:04 AM
Pitanja? (podjeli poklone)
Twitter: almirvuk
GitHub: almirvuk
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

44. Hvala! (podjeli poklone)
4/20/2018 3:04 AM
Hvala! (podjeli poklone)
almirvuk.blogspot.ba
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.