Scribd
Upload
1K views

XAML Essentials Cheat Sheet

The document discusses key concepts in using XAML for mobile app development including: - XAML is used to define visual appearance while code-behind is used for behavior implementation. - Events are handled through code-behind event handlers that are linked to elements via attributes in XAML. - The x:Name attribute assigns identifiers to elements to reference them in code. - Complex objects can be assigned to attributes using property element syntax. - Content properties allow elements to be defined directly within parent tags without specifying the content property explicitly. - Data binding links UI elements to property values on objects via binding expressions.

Uploaded by

voulgeor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

XAML Essentials Cheat Sheet

The document discusses key concepts in using XAML for mobile app development including: - XAML is used to define visual appearance while code-behind is used for behavior implementation. - Events are handled through code-behind event handlers that are linked to elements via attributes in XAML. - The x:Name attribute assigns identifiers to elements to reference them in code. - Complex objects can be assigned to attributes using property element syntax. - Content properties allow elements to be defined directly within parent tags without specifying the content property explicitly. - Data binding links UI elements to property values on objects via binding expressions.

Uploaded by

voulgeor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

XAML Essentials By: Mosh Hamedani

XAML vs Code-behind
Everything you do with XAML, can be done with code.

At run-time, XAML parser will process our XAML files and instantiate C# objects.

We should aim to use XAML for defining the visual appearance of our apps, and
use C# for implementing behaviour.

Handling Events
In XAML:

<Button Clicked=Handle_Clicked />

In code-behind:

private void Handle_Clicked (object source, EventArgs e)


{
}

Names
We use x:Name attribute to assign an identifier to an element. This will generate a
private field that we can access in code-behind or XAML:

<Slider x:Name=slider />

1
XAML Essentials By: Mosh Hamedani

Property Element Syntax


We use property element syntax to assign complex objects to attributes.

<ContentPage.Padding>
<OnPlatform x:TypeArguments=Thickness
iOS=0, 20, 0, 0
Android=0, 40, 0, 0 />
</ContentPage.Padding>

Content Property
Some XAML elements (eg ContentPage and StackLayout) have a content property.
That means, what we put between their start and end tags will be assigned to their
content property. And with this, we dont need to explicitly specify the content property.
So, instead of

<ContentPage>
<ContentPage.Content>
<Label />
</ContentPage.Content>
</ContentPage>

We can simply use:

<ContentPage>
<Label />
</ContentPage>

2
XAML Essentials By: Mosh Hamedani

Data Binding

<Label Text={Binding
Source={x:Reference slider},
Path=Value,
StringFormat=Value is {0:F2}
} />

If we we have multiple bindings to an object, we can simplify our binding expressions by


setting BindingContext:

<Label BindingContext={x:Reference slider}


Text={Binding Value}
Opacity={Binding Value} />

When BindingContext applied to a container element, itll be inherited by all its children.
This is useful if we have multiple elements in a StackLayout (or a ContentPage) that
reference the same object as their binding source.

XAML Compilation
To compile our XAML files, we add this in Properties/AssemblyInfo.cs:

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

3
XAML Essentials By: Mosh Hamedani

Dealing with Device Differences


To differentiate between various devices in code-behind, we can use
Device.OnPlatform() method:

Padding = Device.OnPlatform<Thickness>(
iOS: new Thickness(0, 20, 0, 0)
Android: new Thickness(0),
WinPhone: new Thickness(0));

Device.OnPlatform(
iOS: () => {
// code to run in iOS only
});

You might also like