Transcription

1

2

3

4

5

6 The finished application DEMO

7

8 ios-specific C# Android-specific C# Windows-specific C# Objective-C in XCode Java in Android Studio C# Shared Logic C# in Visual Studio ios codebase Android codebase Windows codebase Shared C# codebase 100% native API access High performance

9 ios-specific C# Androidspecific C# Windowsspecific C# Objective-C Java in XCode in Android Studio C# Shared Logic C# in Visual Studio ios codebase Android codebase Windows codebase

10

11 ios-specific C# Objective-C in XCode Android-specific C# Java in Android Studio C# Shared Logic Windowsspecific C# C# in Visual Studio Xamarin.Forms Objective-C Java in in XCode Android Studio C# Shared Logic C# in Visual Studio ios codebase Android codebase Traditional Xamarin Approach Windows codebase Android codebase With Xamarin.Forms: More code-sharing, all native ios codebase Windows codebase

12 Can be shared

13 Xamarin.Forms Objective-C Java in in XCode Android Studio C# Shared Logic C# in Visual Studio ios codebase Android codebase Windows codebase 40+ Pages, layouts, and controls (Build from code behind or XAML) Two-way data binding Navigation Animation API Dependency Service Messaging Center Easy for applying MVVM (yay)

14

15

16 public partial class App : Application { public App() { InitializeComponent(); } } MainPage = new App5.MainPage();

17 <ContentPage> <Label Text="Welcome to Joe's Burger Store" FontSize="25"></Label> <Entry StyleId="UserId" Text="{Binding Path=Username}" Placeholder="Username" /> <Entry StyleId="PasswordId" Text="{Binding Path=Password}" Placeholder="Password" IsPassword="true" /> <Grid HorizontalOptions="Center"> <Button x:name="loginbutton" Command="{Binding LoginCommand}" Text="Login" Grid.Row="0" Grid.Column="0"/> <Button x:name="helpbutton" Command="{Binding HelpCommand}" Text="Help" Grid.Row="0" Grid.Column="1" /> </Grid> </StackLayout> </ContentPage>

18 Pages Content MasterDetail Navigation Tabbed Carousel Layouts Stack Absolute Relative Grid ContentView ScrollView Frame

19 <StackLayout Padding="32" Spacing="32"> <BoxView Color="#FFF25022" HeightRequest="128" /> <BoxView Color="#FF7FBA00" HeightRequest="128" /> <BoxView Color="#FF01A4EF" HeightRequest="128" /> <BoxView Color="#FFFFB901" HeightRequest="128" /> </StackLayout>

20 <Grid Padding="32" RowSpacing="32" ColumnSpacing="32"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <BoxView Grid.Row="0" Grid.Column="0" Color="#FFF25022" /> <BoxView Grid.Row="0" Grid.Column="1" Color="#FF7FBA00" /> <BoxView Grid.Row="1" Grid.Column="0" Color="#FF01A4EF" /> <BoxView Grid.Row="1" Grid.Column="1" Color="#FFFFB901" /> </Grid>

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

22 <DatePicker />

23 File New Project DEMO

24

25

26

27

28

29 var httpclient = new HttpClient(); var response = await httpclient.getasync(new Uri(" if (!response.issuccessstatuscode) throw new HttpRequestException(response.ReasonPhrase); string jsonresponse = await response.content.readasstringasync();

30

31

32

33

34 Architecture of the Shared Project DEMO

35

36

37

38 View XAML Code-Behind Event Handlers Data Model

39 View XAML Code-Behind Data-binding and commands Change notification View Model State + Operations Data Model

40

41

42 View Model View Model View Model View Model View Model View Model View Model View Model

43 View View XAML Code- Behind XAML Code- Behind View Model State + Operations Message Data Model View Model State + Operations Data Model Publish messages View XAML Subscribe to messages Code- Behind Messaging Message Center (XF) View Model State + Operations

44 Looking at the view models DEMO

45

46

47 <Label Text="{Binding SelectedBurger.Name}" /> <Label Text="{Binding SelectedBurger.ShortDescription}" /> <Label Text="{Binding SelectedBurger.Price}" />

48 public partial class BurgerDetailView : BaseContentPage { //private BurgerDetailViewModel viewmodel; public BurgerDetailView() { InitializeComponent(); } } public BurgerDetailView(object objecttopass) { InitializeComponent(); ViewModel = new BurgerDetailViewModel(); this.bindingcontext = ViewModel; }

49 public interface ICommand { event EventHandler CanExecuteChanged; bool CanExecute(object parameter); void Execute(object parameter); }

50 <Button Text="Add to cart" Command="{Binding AddToCartCommand}"></Button> <Button Text="Read description" Command="{Binding ReadDescriptionCommand}"></Button>

51 <ContentPage xmlns:local="clr-namespace:joesburgerstore;assembly=joesburgerstore">... <ListView x:name="listview" IsGroupingEnabled="true" ItemsSource="{Binding BurgerGroups}"> <ListView.Behaviors> <utility:eventtocommandbehavior EventName="ItemSelected" Command="{Binding BurgerSelectedCommand}" Converter="{StaticResource localselecteditemeventargstoselecteditemconverter}" /> </ListView.Behaviors>... </ListView>

52 Data binding the Views DEMO

53 this.mainpage = new NavigationPage(new MasterPage());

54 Navigation DEMO

55

56

57 <ListView RowHeight="80" ItemsSource="{Binding Recipes}"> <ListView.ItemTemplate> <DataTemplate> <ImageCell ImageSource="{Binding Image}" Text="{Binding Title}" /> </DataTemplate> </ListView.ItemTemplate> </ListView>

58 Building the UI DEMO

59

60 LabelRenderer TextBlock Label LabelRenderer TextView LabelRenderer UILabel

61 public class RoundButton: Button { } <customrenderers:roundbutton Text="Order burgers" Command="{Binding OrderBurgersCommand}"></customRenderers:RoundButton>

62 [assembly: ExportRenderer(typeof(RoundButton), typeof(roundbuttonrenderer))] namespace JoesBurgerStore.iOS.CustomRenderers { public class RoundButtonRenderer : ButtonRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Button> e) { base.onelementchanged(e); if (Control!= null) { var button = (RoundButton)e.NewElement; } } } button.sizechanged += (s, args) => { var radius = Math.Min(button.Width, button.height) / 2.0; button.borderradius = (int)(radius); };

63 Custom renderers DEMO

64

65 <BoxView HorizontalOptions="Center"> <BoxView.Color> <OnPlatform x:typearguments="color" ios="green" Android="#738182" WinPhone="Accent" /> </BoxView.Color> <BoxView.WidthRequest> <OnPlatform x:typearguments="x:double" ios="30" Android="40" WinPhone="50" /> </BoxView.WidthRequest> </BoxView>

66

67 Handling platform-specifics DEMO

68

69

70

71