XAML Cheatsheet
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/