We re here to help. Erik Polzin. Colby Williams. Engineer Partner Team. Director Partners and Channels. +1 (415)

Size: px

Start display at page:

Download "We re here to help. Erik Polzin. Colby Williams. Engineer Partner Team. Director Partners and Channels. +1 (415)"

Lorin Greene
6 years ago
Views:

2 We re here to help Erik Polzin Colby Williams Director Partners and Channels Engineer Partner Team +1 (415) +1 (918)

3 Xamarin A Complete Mobile Solution Xamarin Platform Design Develop Integrate Test Monitor

4 What we ll cover - Overview of Xamarin.Forms - When to use Xamarin.Forms - Considerations and Expectations - Keys to Success - Q & A

5 Xamarin s Unique Approach ios C# UI Android C# UI Windows C# UI Shared C# codebase Shared App Logic 100% native API access High performance

6 Xamarin App Architectures ios C# UI Android C# UI Windows C# UI Xamarin.Forms Shared App Logic Shared App Logic Traditional Xamarin Approach Xamarin.Android / Xamarin.iOS With Xamarin.Forms More code-sharing, all native

7 Xamarin.Forms Xamarin.Forms 40+ Pages, layouts, and Controls (Build from code behind or XAML) Two-way data binding Navigation Shared App Logic Animation API Dependency Service Messaging Center

8 Pages ContentPage MasterDetailPage NavigationPage TabbedPage CarouselPage Layouts StackLayout AbsoluteLayout RelativeLayout GridLayout ContentView ScrollView Frame

9 Controls ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell

10 Xamarin.Forms <?xml&version="1.0"&encoding="utf98"?>& <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">& &&&&<!99&Settings&99>& </ContentPage>& </TabbedPage.Children>&

11 Xamarin.Forms using&xamarin.forms;& & 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",& &//[ ]& };& & MainPage&=&new&TabbedPage&{&Children&=&{profilePage,&settingsPage&}&};&

12 So how do I know when I should use Xamarin.Forms?

Which Xamarin approach is best for your app?

Android is best for: Data entry apps Prototypes and

platform-specific functionality Apps where code

Apps with highly polished design Apps that use many

13 Which Xamarin approach is best for your app? Xamarin.Forms is best for: Xamarin.iOS / Xamarin.Android is best for: Data entry apps Prototypes and proofs-of-concept Apps that require little platform-specific functionality Apps where code sharing is more important than custom UI Learn more: xamarin.com/forms Apps that require specialized interaction Apps with highly polished design Apps that use many platform-specific APIs Apps where custom UI is more important than code sharing Learn more: xamarin.com/platform

14 Xamarin.Forms <?xml&version="1.0"&encoding="utf98"?>& <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">& &&&&<!99&Settings&99>& </ContentPage>& </TabbedPage.Children>&

15 Xamarin.Forms <?xml&version="1.0"&encoding="utf98"?>& <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">& &&&&<!99&Settings&99>& </ContentPage>& </TabbedPage.Children>&

16 Elements & Renderers UIKit.UIButton Xamarin.Forms.Button Android.Widget.Button System.Windows.Controls.Button

17 Elements & Renderers Element UIKit.UIButton Xamarin.Forms.Button Android.Widget.Button System.Windows.Controls.Button

18 Elements & Renderers Renderers ButtonRenderer UIKit.UIButton Xamarin.Forms.Button ButtonRenderer Android.Widget.Button ButtonRenderer System.Windows.Controls.Button

19 Elements & Renderers Native Element ButtonRenderer UIKit.UIButton Xamarin.Forms.Button ButtonRenderer Android.Widget.Button ButtonRenderer System.Windows.Controls.Button

20 Elements & Renderers ButtonRenderer UIKit.UIButton Xamarin.Forms.Button ButtonRenderer Android.Widget.Button ButtonRenderer System.Windows.Controls.Button

21 Custom Renderers

22 Custom Elements & Renderers MyApp.iOS.FancyButtonRenderer MyApp.FancyButton MyApp.Droid.FancyButtonRenderer MyApp.Windows.FancyButtonRenderer

23 When to Create a Custom Renderer Custom Rendering Custom Controls

24 Considerations and Expectations - Recently released and rapidly evolving - Use Custom Renderers (don t fight the framework) - Xamarin.Forms is an abstraction - People are creating amazing apps with Xamarin.Forms

25 Keys to Success - Custom Renderers - Rapid Prototyping - UX / UI

26 Keys to Success - UI

27 Resources Documentation Creating Mobile Apps with Xamarin.Forms Custom Renderers in Xamarin Forms - Plugins for Xamarin -

Chris Key. Senior Consultant. Open Circle Solutions

Chris Key. Senior Consultant. Open Circle Solutions Chris Key Senior Consultant Open Circle Solutions www.opencirclesolutions.com Series Part 1: Introduction to Xamarin mobile development September 14 Part 2: Building Cross Platform Mobile Applications