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