1. Introduction to Xamarin Forms
Microsoft Virtual Academy
Header
Introduction to Xamarin Forms
Jeff Prosise
Produced by

2. What is Xamarin Forms? Xamarin Xamarin Forms Shared UI (XAML)
iOS UI
Android UI
Windows UI
Shared UI (XAML)
Shared Logic (C#)
Shared Logic (C#)

3. Using XAML to Build Cross-Platform UIs
Windows Phone
<ContentPage> <StackLayout Spacing="20" Padding="50" VerticalOptions="Center"> <Entry Placeholder="User name" /> <Entry Placeholder="Password" IsPassword="True" /> <Button Text="Login" TextColor="White" BackgroundColor="##FF77D065" /> </StackLayout> </ContentPage>
Android
iOS

4. Xamarin XAML vs. Microsoft XAML
<ContentPage> <StackLayout Spacing="20" Padding="50" VerticalOptions="Center"> <Entry Placeholder="User name" /> <Entry Placeholder="Password" IsPassword="True" /> <Button Text="Login" TextColor="White" BackgroundColor="##FF77D065" /> </StackLayout> </ContentPage>
<Page>
<StackPanel Margin="50"
VerticalAlign="Center">
<TextBox PlaceholderText="User name" />
<PasswordBox PlaceholderText="Password" />
<Button Content="Login" Foreground="White"
Background="##FF77D065" />
</StackPanel>
</Page>

5. Your First Xamarin Forms App
Do a live build of a simple app. Show how to add a XAML page to the project and modify App.cs to use that page. Highlight some of the differences between Microsoft XAML and Xamarin XAML. For example, declare a Button. Then 1) Use its Rotation property to rotate it. 2) Declare a default button style and change the button's background color. 3) Write a Clicked handler and call DisplayAlert from the handler to pop up a message box verifying that the button was clicked,. 4) Write a simple view model and bind the button's Text property to a property of the view model. Something like this:
<ContentPage xmlns="
xmlns:x="
xmlns:local="clr-namespace:SliderDemo;assembly=SliderDemo"
x:Class="SliderDemo.MainPage"
BindingContext="{StaticResource VM}">
<ContentPage.Resources>
<ResourceDictionary>
<local:MainViewModel x:Key="VM" />
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Green" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Button Text="{Binding ButtonLabel}"
VerticalOptions="Center" HorizontalOptions="Center"
WidthRequest="300" HeightRequest="200" Rotation="30"
Clicked="OnClicked" />
</ContentPage>

6. Views and Cells (Controls)
Buttons, Labels, WebViews, and other control elements
ActivityIndicator
BoxView
Button
DatePicker
Editor
Entry
Image
Label
ListView
Map
OpenGLView
Picker
ProgressBar
SearchBar
Slider
Stepper
Switch
TableView
TimePicker
WebView
EntryCell
ImageCell
SwitchCell
TextCell
ViewCell

7. WebView
<WebView Source=" />

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

9. ListView and ViewCell
<ListView RowHeight="80" ItemsSource="{Binding Recipes}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid Padding="8"> ... <Image Source="{Binding Image}" /> <Grid Grid.Column="1" Padding="8"> <Label Text="{Binding Title}" FontSize="Large" LineBreakMode="WordWrap" /> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

10. TableView and SwitchCell
<TableView> <TableView.Root> <TableSection Title="Privacy"> <SwitchCell Text="Allow Spamming" /> <SwitchCell Text="Track Location" On="True" /> </TableSection> <TableSection Title="Performance"> <SwitchCell Text="Run Super-Fast" <SwitchCell Text="Cache Data Locally" /> <SwitchCell Text="Steal Clock Cycles" /> </TableView.Root> </TableView>

11. Layouts
Controls that contain other controls and provide layout and positioning

12. Using StackLayout
<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>
Point out StackLayout's handy Spacing property, which doesn't exist in Microsoft XAML.

13. Using Grid
<Grid Padding="32" RowSpacing="32" ColumnSpacing="32"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <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>
Point out here that you don't have to declare RowDefinitions and ColumnDefinitions if every row has the same height and every column the same width. Also point out Grid's handy RowSpacing and ColumnSpacing properties, which don't exist in Microsoft XAML.

14. Using AbsoluteLayout with Device-Independent Units
<AbsoluteLayout> <BoxView Color="#FFF25022" AbsoluteLayout.LayoutBounds="32, 32, 150, 300" /> <BoxView Color="#FF7FBA00" AbsoluteLayout.LayoutBounds="214, 32, 150, 300" /> <BoxView Color="#FF01A4EF" AbsoluteLayout.LayoutBounds="32, 364, 150, 300" /> <BoxView Color="#FFFFB901" AbsoluteLayout.LayoutBounds="214, 364, 150, 300" /> </AbsoluteLayout>

15. Using AbsoluteLayout with Proportional Units
<AbsoluteLayout> <BoxView Color="#FFF25022" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.15, 0.15, 0.35, 0.35" /> <BoxView Color="#FF7FBA00" AbsoluteLayout.LayoutBounds="0.85, 0.15, 0.35, 0.35" /> <BoxView Color="#FF01A4EF" AbsoluteLayout.LayoutBounds="0.15, 0.85, 0.35, 0.35" /> <BoxView Color="#FFFFB901" AbsoluteLayout.LayoutBounds="0.85, 0.85, 0.35, 0.35" /> </AbsoluteLayout>

16. Grids, Buttons, and Labels…Oh My!
Show the RPN calculator app. Walk through the XAML file and show how the UI looks on various platforms. Show the Grid that positions the controls and show the Button controls and Label control that make up the UI.

17. OnPlatform
Easy-to-use mechanism for specifying property values and executing code on a per-platform basis in shared code
Generic class usable in XAML (<OnPlatform>)
Static method accessible from code (Device.OnPlatform)
Essential for tweaking UIs to get just the right look on every platform

18. Using OnPlatform in XAML
<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>

19. Using OnPlatform in Code
// Assign platform-specific values to cx and cy double cx = Device.OnPlatform(iOS: 24, Android: 30, WinPhone: 36); double cy = Device.OnPlatform(iOS: 32, Android: 40, WinPhone: 48); // Execute platform-specific code on iOS and Android Device.OnPlatform(iOS: () => { this.BackgroundColor = Color.Red; // Set page background to red }, Android: () => this.BackgroundColor = Color.Blue; // Set page background to blue });

20. Tweaking the UI for Each Platform
Show how OnPlatform is used to optimize the UI for each platform in the RPN calculator app.

21. Orientation Changes
Xamarin Forms don't fire events reporting device-orientation changes
Use Page.SizeChanged events or override Page.OnSizeAllocated instead
Latter can be called multiple times each time device is rotated

22. Using OnSizeAllocated
public partial class MainPage : ContentPage { private double _width = 0.0; private double _height = 0.0; protected override void OnSizeAllocated(double width, double height) base.OnSizeAllocated(width, height); // Important! if (width != _width || height != _height) _width = width; _height = height; // TODO: Respond to orientation change }

23. Using SizeChanged
public partial class MainPage : ContentPage { public MainPage() InitializeComponent(); this.SizeChanged += (s, e) => if (Width != Height) // On Windows Phone, first call has both set to 0.0 // TODO: Respond to orientation change } };

24. Responding to Orientation Changes
Show the RPN calculator again. Demonstrate how new buttons appear when the device rotates from portrait to landscape. Then show what makes them appear.

25. Pages
Controls that represent pages

26. Creating a Tabbed Page
<TabbedPage ... Title="Tabbed Page"> <TabbedPage.Children> <ContentPage Title="Red"> <BoxView Color="Red" WidthRequest="280" HeightRequest="400" HorizontalOptions="Center" VerticalOptions="Center" /> </ContentPage> <ContentPage Title="Green"> <BoxView Color="Green" WidthRequest="280" <ContentPage Title="Blue"> <BoxView Color="Blue" WidthRequest="280" </TabbedPage.Children> </TabbedPage>
Point out that TabbedPage supports data binding, too. Its children don't have to be declared statically as they are here.

27. Creating a Navigation Page
// In App.cs this.MainPage = new NavigationPage(new MasterPage());

28. Navigating to Another Page
// In the code-behind for the current page this.Navigation.PushAsync(new DetailPage());

29. Multipage Apps
Show the Contoso Cookbook sample and highlight its use of TabbedPage, NavigationPage, and ListView. Also show the version that retrieves data from Azure and show how it uses Page.IsBusy to display an activity indicator.

30. Introduction to Xamarin Forms
Jeff Prosise