XAML Cheatsheet

by Giang, last updated 19 Jan 2018

Page Types

Basic Elements

<Button />
<Label />
<BoxView />
<ActivityIndicator
    IsRunning="{Binding Source={x:Reference image}, Path=IsLoading />

For images, see: XAML Image Cheatsheet

Forms & Settings

Slider, Switch and Stepper

<Slider Maximum="100" Minimum="0" />
<Switch IsToggled="true" Toggled="Handle_Toggled" />
<Stepper Increment="10" />

Entry and Editor

<Entry Keyboard="email" Placeholder="Email" />
<Editor VerticalOptions="FillAndExpand" />

Picker

<Picker Title="Contact Method"
    SelectedIndexChanged="Handle_SelectedIndexChanged">
    <Picker.Items>
        <x:String>SMS<x:String>
        <x:String>Email<x:String>
    </Pciker.Items>
</Picker>

Date and Time pickers

<ContentPage xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <DatePicker Date="{x:Static sys:DateTime.Today}"
        Format="d MMM yyyy"
        MinimumDate="1 Jan 2017"
        MaximumDate="31 Dec 2017" />
    <TimePicker Time="10:00" />
</ContentPage>

TableView

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Basic Info">
            <TextCell Title="Name" Detail="John Doe" />
            <EntryCell Label="Email" Keyboard="Email" />
            <SwitchCell Text="Notifications" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

ListView

Basic

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" />
            <ImageCell />
            <ViewCell></ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Items group

<ListView IsGroupingEnabled="true"
    GroupDisplayBinding="{Binding Title}"
    GroupShortNameBinding="{Binding ShortTitle}">
</ListView>

Event handler

<ListView
    ItemTapped="Handle_ItemTapped"
    ItemSelected="Handle_ItemSelected"
    Refresing="Handle_Refreshing" >
</Listview>

Context actions

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}">
                <TextCell.ContextActions>
                    <MenuItem Text="Call" Clicked="Call_Clicked
                        CommandParameter="{Binding .}" />
                    <MenuItem Text="Delete" Clicked="Delete_Clicked"
                        IsDestructive="true"
                        CommandParameter="{Binding .}" />
                </TextCell.ContextActions>
            </TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Search bar

<SearchBar Placeholder="Search…" TextChanged="…" />

Layouts

StackLayout: stack elements in single row/col

<StackLayout>
    <Label Text="Label 1" />
    <Label Text="Label 2" />
    <Label Text="Label 3" />
</StackLayout>

Grid: position elements in rows and cols

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Text="Label 1" />
    <Label Grid.Row="0" Grid.Column="1" Text="Label 2" />
    <Label Grid.Row="1" Grid.Column="0" Text="Label 3" />
    <Label Grid.Row="1" Grid.Column="1" Text="Label 4" />
    <Label Grid.Row="2" Grid.ColumnSpan="2" Text="Label 5" />
</Grid>

AbsoluteLayout

<AbsoluteLayout>
    <AbsoluteLayout>
        <BoxView BackgroundColor="Blue"
            AbsoluteLayout.LayoutBounds="0, 0, 1, 0.3"
            AbsoluteLayout.LayoutFlags="All"></BoxView>
        <BoxView BackgroundColor="Red"
            AbsoluteLayout.LayoutBounds="75, 100, 30, 30"></BoxView>
        <Label Text="Some Text"
            AbsoluteLayout.LayoutBounds="150, 150, Autosize, Autosize"></Label>
    </AbsoluteLayout>
</AbsoluteLayout>

RelativeLayout

<RelativeLayout>
    <BoxView Color="Aqua" x:Name="banner"
        RelativeLayout.WidthConstraints="{
            Type=RelativeToParent,
            Property=Width,
            Factor=1}"
        RelativeLayout.HeightConstraints="{
            Type=RelativeToParent,
            Property=Height,
            Factor=0.3}" />

        <BoxView Color="Silver"
            RelativeLayout.YConstraints="{
                Type=RelativeToView,
                ElementName=banner,
                Property=Height,
                Factor=1,
                Constant=20}" />
</RelativeLayout>

Data Binding

// Simple
<StackLayout>
    <Label Text="{ Binding
                   Source={x:Reference slider},
                   Path=Value,
                   StringFormat='Value is {0:F2}' }" />
    <Slider x:Name="slider" />
</StackLayout>

// Binding Context
<StackLayout>
    <Label BindingContext="{x:Reference slider}"
           Text="{ Binding Value,
                   StringFormat='Value is {0:F2}' }" />
    <Slider x:Name="slider" />
</StackLayout>

// BindingContext is inheritable

<StackLayout BindingContext="{x:Reference slider}">
    <Label Text="{ Binding Value,
                   StringFormat='Value is {0:F2}' }" />
    <Slider x:Name="slider" />
</StackLayout>

Property Element Syntax

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="SampleProject.SampleClass">
    <Content.Padding>0, 20, 0, 0</Content.Padding>
</ContentPage>

// The code above equal to
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="SampleProject.SampleClass"
    Padding="0, 20, 0, 0">
</ContentPage>

Different properties on different platforms

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="SampleProject.SampleClass">
    <Content.Padding>
        <OnPlatform x:TypeArguments="Thickness"
            iOS="0, 20, 0, 0"
            Android="0"></OnPlatform>
    </Content.Padding>
</ContentPage>

ResourceDictionary

  • Resources in a ResourceDictionary defined at the control level can only be applied to the control and to its children.
  • Resources in a ResourceDictionary defined at the page level can only be applied to the page and to its children.
  • Resources in a ResourceDictionary defined at the application level can be applied throughout the application.

Independent Attributes

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="PageBackgroundColor">Yellow</Color>
            <Color x:Key="HeadingTextColor">Black</Color>
            <Color x:Key="NormalTextColor">Blue</Color>
            <Thickness x:Key="Thickness1">12,0,0,0</Thickness>
            <x:String x:Key="greeting">Hello world</x:String>
            <x:Int32 x:Key="ButtonHeight">40</x:Int32>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Styles

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <Thickness x:Key="Thickness1">12,0,0,0</Thickness>

            <Style x:Key="LabelPageHeadingStyle" TargetType="Label">
                <Setter Property="FontAttributes" Value="Bold" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="Margin" Value="{StaticResource Thickness1}" />
            </Style>

           <Style x:Key="LabelPageHeadingStyle2" TargetType="Label"
                BasedOn="{StaticResource LabelPageHeadingStyle}">
                <Setter Property="FontAttributes" Value="Italic" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Note: If x:Key is not defined for a style, the style will be applied to all style's TargetType elements.

StaticResource vs DynamicResource

<Label "My BackgroundColor will not be changed if Resources[PageBackgroundColor] changes"
  BackgroundColor="{StaticResource PageBackgroundColor}" />
<label "My BackgroundColor will be changed if Resources[PageBackgroundColor] changes"
  BackgroundColor="{DynamicResource PageBackgroundColor}" />

More details at https://developer.xamarin.com/guides/xamarin-forms/xaml/resource-dictionaries/

Resources

Jason Smith's Xamarin Forms Performance Tips