workshop-part2 introduction to xamarinsddconf.com/brands/sdd/library/xamarin_part_2.pdfxamarin +...

4/25/15

1©   2014  Xamarin.  All   rights  reserved.

§§§§§

4/25/15

2©   2014  Xamarin.  All   rights  reserved.

Xamarin + Xamarin.FormsWith Xamarin.Forms:

more code-sharing, native controlsTraditional Xamarin approach

Shared UI Code

4/25/15

3©   2014  Xamarin.  All   rights  reserved.

Metroon for iOS

4/25/15

4©   2014  Xamarin.  All   rights  reserved.

What’s Included

Shared UI Code

Flexible Layout

Standard Controls

Multi-Page

Navigation

Custom Controls

Data Binding Engine

XAML

4/25/15

5©   2014  Xamarin.  All   rights  reserved.

Platform-specific projects act as "host" to create native application

Portable Class Library or Shared Project used to hold shared code that defines UI and logic

Pages

Content MasterDetail Navigation Tabbed Carousel

4/25/15

6©   2014  Xamarin.  All   rights  reserved.

Layouts

Stack Absolute Relative Grid ContentView ScrollView Frame

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

4/25/15

7©   2014  Xamarin.  All   rights  reserved.

§§§

ContentPage

Control

Content property

4/25/15

8©   2014  Xamarin.  All   rights  reserved.

ContentPage

Layout

Content property

Control

Control

Control

Control

Children

Control

Demonstration

4/25/15

9©   2014  Xamarin.  All   rights  reserved.

var entry = new Entry{

Placeholder = "Enter text",Keyboard = Keyboard.Email

};

entry.TextChanged += (sender, e) => {// Input changed

};

Controls expose properties to alter visualization

Controls expose events to provide interactive behavior

Demonstration

4/25/15

10©   2014  Xamarin.  All   rights  reserved.

> toolable> human readable> extensible

4/25/15

11©   2014  Xamarin.  All   rights  reserved.

shared UI and code

•

XAML file (UI)

C# file (behavior)

Disclosure arrow collapses the C# file and indicates these files go together

4/25/15

12©   2014  Xamarin.  All   rights  reserved.

§§§§

<?xml version="1.0" encoding="UTF-­‐8" ?><ContentPage ...>

<StackLayout Padding="20" Spacing="10"><Label Text="Enter a Phoneword:" /><Entry Placeholder="Number" /><Button Text="Translate" /><Button Text="Call" IsEnabled="False" />

</StackLayout></ContentPage>

XML based: case sensitive, open tags must be closed, etc.

Element tags create objects

Attributes set properties

Child nodes are used to establish relationships

4/25/15

13©   2014  Xamarin.  All   rights  reserved.

public partial class MyPage : ContentPage{

public MyPage (){

InitializeComponent ();}

}

Constructor loads XML and creates UI from XAML

x:Name

<Entry x:Name="PhoneNumber" Placeholder="Number" /> .xaml

public partial class MainPage : ContentPage{

...}

.cs

field is created for you and is hidden away in another file

private Entry PhoneNumber;

4/25/15

14©   2014  Xamarin.  All   rights  reserved.

UI events handler

<Button Content="Translate"   ...Clicked="OnTranslateClicked" />

.xaml

void OnTranslateClicked(object sender, EventArgs e){

Button button = (Button)sender;...

}

.cs

handler is not created for you .. must add this yourself!

Demonstration

4/25/15

15©   2014  Xamarin.  All   rights  reserved.

4/25/15

16©   2014  Xamarin.  All   rights  reserved.

§§§§

OR

OR

4/25/15

17©   2014  Xamarin.  All   rights  reserved.

4/25/15

18©   2014  Xamarin.  All   rights  reserved.

4/25/15

19©   2014  Xamarin.  All   rights  reserved.

Demonstration

4/25/15

20©   2014  Xamarin.  All   rights  reserved.

Basic Navigation

§ Root Page:§ NavigationPage – Gives each page an INavigation

§ Standard Navigation§ Navigation.PushAsync(page: nextPage);§ Navigation.PopAsync();

§ Modal Navigation§ Navigation.PushModalAsync(page: modalPage);§ Navigation.PopModalAsync();

4/25/15

21©   2014  Xamarin.  All   rights  reserved.

Advanced Navigation

§ Editing of stack beyond push/pop§ Remove Page§ InsertPageBefore§ NavigationStack[]

§ Disable animations

InsertPageBefore

RemovePagePush/Pop

4/25/15

22©   2014  Xamarin.  All   rights  reserved.

Demonstration

Summary

4/25/15

23©   2014  Xamarin.  All   rights  reserved.

Get the book

Charles PetzoldXamarin

Resources

§ Documentation§ http://developer.xamarin.com/guides/cross-platform/xamarin-forms/

§ XAML Documentation§ http://developer.xamarin.com/guides/cross-platform/xamarin-

forms/xaml-for-xamarin-forms/

§ Samples§ https://github.com/xamarin/xamarin-forms-samples