xamarin.md

Xamarin

Develop Native Mobile Apps with Portable C# Code

Xamarin

• Open Source platform for mobile development
  • GitHub
• Uses C# and .NET Core
• Write logic once, compile it to native apps for different platforms
  • Platform-specific code pieces are possible (and often necessary)
• Resources:
  • Landing page
  • Xamarin tutorial
  • Xamarin docs

Xamarin Forms

• Built on top of Xamarin
• Reuse not only logic, but also view
• Uses XAML
  • eXtensible Application Markup Language
• Xamarin Forms' XAML is very similar to WPF's XAML
  • Reuse existing knowledge
• Resources:
  • Xamarin Forms docs
  • GitHub
  • Exercise: Installing Prerequisites

Structure of Xamarin Forms Project

• Multiple projects
  • One project for each platform (Xamarin, iOS)
  • One project with portable code (Xamarin Forms)
  • In this course, we will focus on portable code because of time constraints
• App class
  • Sets initial main page of app (MainPage property)
  • Persistent Properties dictionary (docs)
  • Handler functions for lifecycle events
  • Read more about Android Activity Lifecycle
  • Docs

Example for Properties Dictionary

public MainPage()
{
    InitializeComponent();
    if (Application.Current.Properties.TryGetValue("LastChoice", out var propValue))
    {
        LastChoice = propValue.ToString();
    }

    BindingContext = this;
}

private async void OnFormPage(object sender, EventArgs e)
{
    Application.Current.Properties["LastChoice"] = LastChoice = "Form Page";
    await Application.Current.SavePropertiesAsync();
    await Navigation.PushModalAsync(new NavigationPage(new FormPage()));
}

Xamarin Forms User Interface

• Many built-in controls available (docs)
• Controls Reference
  • Make yourself familiar with Pages, Layouts, Views, and Cells
• Tip: Use Visual Studio to create samples apps and explore the code

Data Binding Basics

• Bind UI on properties/functions in C#
  • Similar to Angular Data Binding (e.g. {{ boundProperty }} or [(ngModel)]="boundProperty")
• Xamarin Forms Data Binding docs
• Set the BindingContext to the source object to which you would like to bind
  • Note: In WPF, this property is called DataContext
• Use {Binding Path=MyProperty} for binding

Data Binding Basics

public FormPage()
{
    InitializeComponent();
    BindingContext = new Customer() { FirstName = "Foo", ... };
}

<ContentPage.Content>
    <StackLayout Spacing="20" Padding="15">
        <Label Text="First Name" />
        <Entry Text="{Binding Path=FirstName}" />
        ...
    </StackLayout>
</ContentPage.Content>

Data Binding Basics

• In order to update the UI automatically, binding source object must implement INotifyPropertyChanged

public class Customer : INotifyPropertyChanged
{
    private string FirstNameValue = "Foo";
    public string FirstName
    {
        get => FirstNameValue;
        set
        {
            FirstNameValue = value;
            OnPropertyChanged(nameof(FirstName));
        }
    }

    private void OnPropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    public event PropertyChangedEventHandler PropertyChanged;
}

Data Binding Basics

Tip: Use Visual Studio snippet to make implementing INotifyPropertyChanged easier.

Data Binding Basics

• Always use ObservableCollection<T> with data binding
  • Avoid using other collection types like List<T>
  • Reason: Implements INotifyCollectionChanged for data binding

public ObservableCollection<Customer> Customers { get; } = new ObservableCollection<Customer>
  {  new Customer { FirstName = "John", LastName = "Doe" }, ... };

<ListView ItemsSource="{Binding Path=Customers}" HasUnevenRows="True">
    <ListView.ItemTemplate>...</ListView.ItemTemplate>
</ListView>

Practice

• Hello Xamarin sample app
• Exercises
  • Resistor Colors exercise
  • Pokemon Browser exercise