Creating Cross-Platform Apps with Xamarin: A Complete Guide for Modern Mobile Development

📘 Chapter 3: Building Shared UI with Xamarin.Forms

🧭 What You’ll Learn

In this chapter, you’ll explore:

• The structure of Xamarin.Forms UI
• How to build interfaces using XAML and C#
• Layout options like StackLayout, Grid, and FlexLayout
• Controls and inputs (Button, Entry, ListView, etc.)
• Navigation techniques (NavigationPage, TabbedPage, Shell)
• Styling and theming UI components
• Creating reusable components
• Handling platform-specific design needs in shared UI

Let’s build beautiful, cross-platform UIs with Xamarin.Forms.

🌐 What is Xamarin.Forms?

Xamarin.Forms is a cross-platform UI toolkit that allows you to build a shared user interface in XAML (Extensible Application Markup Language) and/or C#, which renders natively on Android, iOS, and UWP (Windows).

With Xamarin.Forms, you write your UI once and have it render using native controls under the hood.

⚙️ Project Structure

When you create a Xamarin.Forms project, you’ll typically see:

css

MyApp/

├── MyApp/            ← Shared project (XAML + logic)

├── MyApp.Android/    ← Android-specific code

├── MyApp.iOS/        ← iOS-specific code

All the UI lives in the shared project, inside .xaml and .xaml.cs files.

✍️ Defining UI in XAML

Sample: Basic XAML Page

xml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             x:Class="MyApp.MainPage">

  <StackLayout Padding="30">

    <Label Text="Welcome to Xamarin.Forms" FontSize="24" />

    <Entry Placeholder="Enter name" />

    <Button Text="Say Hello" Clicked="OnHelloClicked" />

  </StackLayout>

</ContentPage>

Corresponding C# Code (MainPage.xaml.cs)

csharp

public partial class MainPage : ContentPage

{

    public MainPage()

    {

        InitializeComponent();

    }

    private void OnHelloClicked(object sender, EventArgs e)

    {

        DisplayAlert("Hello", "Welcome to Xamarin!", "OK");

    }

}

📐 Layout Containers in Xamarin.Forms

✅ StackLayout Example

xml

<StackLayout Orientation="Vertical">

  <Label Text="Username" />

  <Entry Placeholder="Type here" />

  <Button Text="Login" />

</StackLayout>

✅ Grid Example

xml

<Grid Padding="10">

  <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="*"/>

  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>

    <ColumnDefinition Width="Auto"/>

    <ColumnDefinition Width="*"/>

  </Grid.ColumnDefinitions>

  <Label Grid.Row="0" Grid.Column="0" Text="Username" />

  <Entry Grid.Row="0" Grid.Column="1" />

  <Label Grid.Row="1" Grid.Column="0" Text="Password" />

  <Entry Grid.Row="1" Grid.Column="1" IsPassword="True" />

</Grid>

🧱 UI Controls in Xamarin.Forms

Sample: ListView with Custom Template

xml

<ListView x:Name="PeopleList">

  <ListView.ItemTemplate>

    <DataTemplate>

      <TextCell Text="{Binding Name}" Detail="{Binding Email}" />

    </DataTemplate>

  </ListView.ItemTemplate>

</ListView>

csharp

PeopleList.ItemsSource = new List<Person> {

  new Person { Name = "Jane Doe", Email = "jane@example.com" },

  new Person { Name = "John Smith", Email = "john@example.com" }

};

🔁 Navigation in Xamarin.Forms

✅ NavigationPage (Stack-based)

csharp

await Navigation.PushAsync(new DetailsPage());

✅ TabbedPage

xml

<TabbedPage>

  <ContentPage Title="Home" />

  <ContentPage Title="Profile" />

</TabbedPage>

✅ Shell (Modern app structure)

xml

<Shell>

  <TabBar>

    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}" />

    <ShellContent Title="Settings" ContentTemplate="{DataTemplate local:SettingsPage}" />

  </TabBar>

</Shell>

🎨 Styling and Theming

✅ Inline Styling

xml

<Label Text="Welcome" FontSize="24" TextColor="Blue" />

✅ Global Resource Dictionary (App.xaml)

xml

<Application.Resources>

  <Color x:Key="PrimaryColor">#3498db</Color>

  <Style TargetType="Label">

    <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />

  </Style>

</Application.Resources>

♻️ Creating Reusable Components

✅ Custom UserControl

MyCardView.xaml:

xml

<Frame Padding="10" CornerRadius="8">

  <Label Text="{Binding Title}" FontSize="20" />

</Frame>

Use in a page:

xml

<local:MyCardView Title="Hello Xamarin!" />

💻 Handling Platform-Specific UI in Shared Code

Use Device.RuntimePlatform or OnPlatform:

xml

<Label Text="Hello!" FontSize="{OnPlatform Android=20, iOS=18}" />

Or in C#:

csharp

if (Device.RuntimePlatform == Device.Android)

{

    Padding = new Thickness(10, 20, 10, 10);

}

📋 UI Development Best Practices

• ✅ Use XAML for layout, C# for logic
• ✅ Keep UI components modular and reusable
• ✅ Avoid putting heavy logic in code-behind
• ✅ Use MVVM pattern for larger apps
• ✅ Use Shell for scalable navigation
• ✅ Test UI across both Android and iOS

🧠 When to Use Xamarin.Forms vs Xamarin.Native

✅ Summary

In this chapter, you’ve learned:

• How to build shared UI with Xamarin.Forms
• Use of XAML and code-behind logic
• Common layouts and controls
• Styling and reusable components
• Cross-platform navigation and best practices

This makes Xamarin.Forms a powerful and productive choice for building mobile apps across platforms using a single UI codebase.