Xaml su Xamarin

XAML Xamarin
XAML (eXtensible Application Markup Language)

XAML intro (1)
 XAML (eXtensible Application Markup Language) consente
agli sviluppatori di definire le interfacce utente nelle applicazioni
Xamarin.Forms tramite markup anziché codice.
 XAML è particolarmente adatto per l'uso con l'architettura
delle applicazioni MVVM (Model-View-ViewModel) più diffusi:
XAML definisce la vista collegata al ViewModel codice tramite
le associazioni di dati basati su XAML.

XAML intro (2)
 XAML è un linguaggio basato su XML creato da
Microsoft come alternativa al codice di programmazione
per la creazione di istanze e inizializzazione di oggetti e
per organizzare gli oggetti nelle gerarchie padre-figlio.
 XAML fa parte di xamarin.Forms, al suo interno, lo
sviluppatore può definire le interfacce utente: viste,
layout e pagine

C# e XAML (2)
Code
+ Markup
----------------------
Awesome Apps

C# e XAML (3)
 XAML è un file xml
 Ogni elemento è organizzato secondo una gerarchia padre
figlio
 Ogni elemento può avere degli attributi

C# e XAML (1)
 C# è un linguaggio Procedurale
 XAML è un linguaggio dichiarativo
 C# definisce l’interazione tra Oggetti UI
 XAML definisce gli oggetti che compongono UI

Esempio di XAML
1) <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
2) xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
3) x:Class="App1.MainPage">
4) <StackLayout>
5) 
6) <Label Text="Welcome to Xamarin.Forms!"
7) HorizontalOptions="Center"
8) VerticalOptions="CenterAndExpand" />
9) <Button Text="Click ME!" HorizontalOptions="Center" />
10) <Slider VerticalOptions="CenterAndExpand" />
11) </StackLayout>
12) </ContentPage>

XAML Namespaces (1)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.MainPage">
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Button Text="Click ME!" HorizontalOptions="Center" />
<Slider VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>

XAML Namespaces (2)
 xmlns="http://xamarin.com/schemas/2014/forms" include
le definizioni di xamarin.forms e definisce tutti gli elementi
senza prefisso (x) (es. ContentPage)
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
include tutti i prefissi prefissi usati dichiarare spazi dei
nomi non predefiniti . Come x:Class che specifica il
nome della classe associata allo XAML nel code-
behind. Nel nostro caso App1.MainPage.

Classi ed elementi (1)
<StackLayout>
</StackLayout>
</ContentPage>

Classi ed elementi (2)
 ContentPage, StackLayout, Label, Button e Slider sono
elementi xml che diventano classi C# nel code-behind e
vengono chiamati Object Elements

Attributi (1)
<StackLayout>
</StackLayout>
</ContentPage>

Attributi (2)
 Text, FontSize, VerticalOptions e HorizontalOptions questi
attriubuti attributi diventano property delle rispettive classi
e vengono detti Porperty Attributes
 Tutti questi hanno corrispondente tipo C# visto che
XAML è fortemente tipizzato

Corrispondenza Code-Behind
 Ogni elemento e attributo nel file xml XAML ha sempre
una corrispondenza nel code-behind che possa essere
una classe C# o property.
 Durante la build viene creata la corrispondente classe
partial esegue il parsing del file XAML e crea gli oggetti in
esso contenuti

Corrispondenza Code-Behind (2)
namespace App1
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
}

Come facciamo...
 Come è possibile armonizzare codice e markup?
 Come evitare markup ripetitivo?
 Creare XAML riutilizzabile?

Es. Rotation (1)
x:Class="App2RotText.MainPage">
<Grid>
<Label Text=" ROTATION"
FontSize="32"
Grid.Column="1"
VerticalOptions="Center"
HorizontalOptions="Start"
AnchorX="0"
Rotation="0"/>
….
<Label Text=" ROTATION"
FontSize="32"
Grid.Column="1"
VerticalOptions="Center"
HorizontalOptions="Start"
AnchorX="0"
Rotation="67.5"/>
</Grid>
</ContentPage>

Es. Rotation (3)
<Grid>
<Grid.Resources>
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="Text" Value=" ROTATION" />
<Setter Property="FontSize" Value="32" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="Start" />
<Setter Property="AnchorX" Value="0" />
</Style>
</Grid.Resources>
<Label Style="{StaticResource labelStyle}" Rotation="0" />
<Label Style="{StaticResource labelStyle}" Rotation="22.5" />
</Grid>
</ContentPage>

Resource Dictionary
 Per risolvere la mancanza loop Xamarin possiede una feature chiamata Resource Dictionary
 Questo contiene elementi Style deve avere una chiave del del dizionario che contiene un
set di oggetti setter
 Ogni oggetto Setter assegna un valore a una Property
 Questi oggetti setter impostano caratteristica grafica, creando un stile riutilizzabile su più
elementi xml
 E’ possibile semplificare eliminando la dichiarazione della chiave, lo style verrà applicato se c’è
un matching con il target type. Questo viene detto Implicit Style

Implicit Style
<Grid>
<Grid.Resources>
<Style TargetType="Label">
</Style>
</Grid.Resources>
<Label Rotation="0" />
<Label Rotation="22.5" />
</Grid>
</ContentPage>

Armonia tra c# e xaml
 Qualcosa simile a un loop è possibile eseguirlo tramite resource
dictionary
 Se volessimo eseguire una funzione particolare per ogni elemento
xaml, dovremmo usare il meccanismo della Markup Extension
 Per esempio se volessimo cambiare il colore della scritta secondo i
colori dell’arcobaleno ci verrebbe utile scrivere una Markup
Exstension che imposti il colore tramite codifica HLS

Markup Extension (1)
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App2RotText
{
public class HlsColorExtension : IMarkupExtension
{
public double H { get; set; }
public double L { get; set; }
public double S { get; set; }
public double A { get; set; }
public HlsColorExtension()
{
A = 1;
}
public object ProvideValue(IServiceProvider serviceProvider)
{
return Color.FromHsla(H, S, L, A);
}
}
}

Markup Extension (2)
xmlns:local="clr-namespace:App2RotText"
<Grid>
<Grid.Resources>
<Style TargetType="Label">
</Style>
</Grid.Resources>
<Label Rotation="0" TextColor="{local:HlsColor H=0.0000, S=1, L=0.5}"/>
<Label Rotation="22.5" TextColor="{local:HlsColor H=0.0635, S=1, L=0.5}" />
<Label Rotation="45" TextColor="{local:HlsColor H=0.1250, S=1, L=0.5}" />
</Grid>
</ContentPage>

Binding
 Binding anche noto come DataBinding connette due
property di due oggetti
 I cambiamenti di una property su un’oggetto si riflettono
sull’altro oggetto, vicendevolmente
 Un oggetto risiede nei dati, mentre, l’altro risiede nella UI

Es. No Data Binding (1)
x:Class="App3RotEvent.MainPage">
<StackLayout>
<Label
x:Name="rotationLabel"
Text="ROTATION"
FontSize="Large"
FontAttributes="Bold"
<Slider
Minimum="0"
Maximum="360"
ValueChanged="OnSliderValueChanged"/>
<Label
x:Name="displayLabel"
Text="0"
FontSize="Medium"
</StackLayout>
</ContentPage>

 Questo esempio mostra un testo ruotato tramite slider e il
corrispondente grado di rotazione nel label sottostante
 OnSliderValueChanged indica un event handler che deve
essere implementato nel code behind
 Il parser di XAML crea due campi privati con nome
rotationLabel e displayLabel ed in ogni parte del codice
potrò accedervi

using System;
namespace App3RotEvent
{
{
public MainPage()
{
}
private void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
rotationLabel.Rotation = (double)args.NewValue;
displayLabel.Text = String.Format("Rotation = {0:F2} degrtees", args.NewValue);
}
}
}

Es. Data Binding (1)
x:Class="App4RotEventBind.MainPage">
<StackLayout>
<Label
Text="ROTATION"
Rotation="{Binding Source={x:Reference slider},
Path=Value,
Mode=TwoWay}"
FontSize="Large"
<Slider x:Name="slider"
Minimum="-360"
Maximum="360"
/>
<Label Text="{Binding Source={x:Reference slider},
Path=Value,
StringFormat='Rotation = {0:F2} degrees'}"
FontSize="Medium"
FontAttributes="Bold"/>
</StackLayout>
</ContentPage>

 <Label Rotation="{Binding Source={x:Reference slider},
 Path=Value,
 Mode=TwoWay}” ...
 Questa Innested markup extension imposta il data
binding e associa la Property Rotation del label corrente
con la Property value dell’oggetto con Name slider
 TwoWay dice che il data binding in entrambe le direzioni

 <Label Text="{Binding Source={x:Reference slider},
 Path=Value,
 StringFormat='Rotation = {0:F2} degrees'}" ….
 Imposta il data binding e associa la Property Text del label corrente con la
Property value dell’oggetto con Name slider
 StringFormat ci permette di formattare il testo assegnato alla property text

 Grazie al data binding abbiamo eliminato la parte di code
behind
 La parte di codice eliminata non sarebbe stata riutilizzabile

Esercizi - Data Binding
 Esercizio 1.A Aggiungere all’esempio precedente un Entry
che chiamiamo “entryDegree”, che imposta il grado di
rotazione sia su slider che su label. Eseguire lo stesso in
modalità Binding e No Binding;
 Esercizio 1.B Partendo dal Esercizio 1.A aggiungere un
tasto “resetButton” che porta 0 i gradi gli altri Object
Elements

Es. Switch Color No Binding (1)
x:Class="App4SwitchColor.MainPage">
<StackLayout>
<Label x:Name="sampleLabel"
Text="Switch Color"
FontSize="Large"
<Switch x:Name="switch"
Toggled="OnSwitchedToggled"
/>
<Label
x:Name="displayLabel"
FontSize="Large"
VerticalOptions="CenterAndExpand"
/>
</StackLayout>
</ContentPage>

namespace App4SwitchColor
{
{
public MainPage()
{
}
private void OnSwitchedToggled(object sender, ToggledEventArgs args)
{
sampleLabel.TextColor = args.Value ? Color.Red : Color.Blue;
displayLabel.Text = "The color is " + (args.Value ? "Red" : "Blue");
}
}
}

Es. Switch Color Binding (1)
 Ora sto sostituiremo questo event handler con il data
binding
 Ci troviamo di fronte un problema che la toggle property
dello switch è di tipo bool, ma il databing richiede un tipo
Color
 Quello di cui abbiamo bisogno è di un convertitore di tipo
chiamato Value Converter o Binding Converter

using System;
using System.Globalization;
namespace App5SwitchColorBinding
{
public class BoolToColorConverter : IValueConverter
{
public Color TrueColor { get; set; }
public Color FalseColor { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? TrueColor : FalseColor;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return false;
}
}
}

using System;
using System.Globalization;
namespace App5SwitchColorBinding
{
public class BoolToStringConverter : IValueConverter
{
public string TrueText { get; set; }
public string FalseText { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? TrueText : FalseText;
}
//not uesed
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return false;
}
}
}

xmlns:local="clr-namespace:App5SwitchColorBinding"
x:Class="App5SwitchColorBinding.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<local:BoolToColorConverter x:Key="boolToColor" TrueColor="Blue" FalseColor="Red" />
<local:BoolToStringConverter x:Key="boolToString" TrueText="The color is Blue" FalseText="The color is Red" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="Converter"
TextColor="{Binding Source={x:Reference switch},
Path=IsToggled,
Converter={StaticResource boolToColor}}"
FontSize="Large"
<Switch x:Name="switch"
HorizontalOptions="Center" />
<Label Text="{Binding Source={x:Reference switch},
Path=IsToggled,
Converter={StaticResource boolToString}}"
FontSize="Large"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</ContentPage>

 Abbiamo sostituito del codice con dell’altro codice,
ma il codice prodotto con il Data Binding è
riutilizzabile
 Il codice prodotti negli Event Handler non è
riutilizzabile

Trigger
 Tramite Trigger è possibile realizzare esempi di
applicazioni simili, senza Binding Converter, quindi,
senza scrivere codice C#.
 Trigger sono un modo generalizzato per rispondere a
un evento, al cambiamento di una property in un file
XAML o eseguendo un determinato codice

Es. Switch Color Trigger (1)
x:Class="App6SwitchColorTrigger.MainPage">
<StackLayout>
<Label Text="Trigger" TextColor="Red" FontSize="Large" FontAttributes="Bold" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference switch}, Path=IsToggled}"
Value="True">
<Setter Property="TextColor" Value="Blue"/>
</DataTrigger>
</Label.Triggers>
</Label>
<Switch x:Name="switch" HorizontalOptions="Center" />
<Label Text="The color is Red" FontSize="Large" FontAttributes="Bold" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference switch}, Path=IsToggled}"
Value="True">
<Setter Property="Text" Value="The color is Blue" />
</DataTrigger>
</Label.Triggers>
</Label>
</StackLayout>
</ContentPage>

Es. Switch Color Trigger (2)
 Ogni elemento visuale ha un valore di default
 es. <Label Text="The color is Red"..
 Ogni elemento visuale possiede una collection property di tipo Triggers e ad essa possiamo aggiungere un’azione DataTrigger associata
alla property du un’altro elemento
 es. <Label.Triggers>
 <DataTrigger TargetType="Label"
 Binding="{Binding Source={x:Reference switch}, Path=IsToggled}"
 Value="True">
 <Setter Property="Text" Value="The color is Blue" />
 </DataTrigger>

Utilità Trigger (1)
 I Trigger vengono utili inibire azioni quando non sono
permesse su determinati elementi della UI
 Ad es per disabilitare un pulsante “salva file” quando non è
presente il testo associato nella corrispondente “text box”

Utilità Trigger (3)
xmlns:local="clr-namespace:App7BtnDis"
x:Class="App7BtnDis.MainPage"
Padding="20, 50">
<StackLayout Spacing="20">
<Entry x:Name="entry"
Text=""
Keyboard="Url"
Placeholder="enter filename"/>
<Button Text="Save"
FontSize="Medium"
HorizontalOptions="Center">
<Button.Triggers>
<DataTrigger TargetType="Button"
Binding="{Binding Source={x:Reference entry},
Path=Text.Length}"
Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage>

Multi Trigger Crendenziali
<Entry x:Name="user"
Text=""
Placeholder="user name" />
<Entry x:Name="password"
Text=""
Placeholder="user name"
IsPassword="true" />
<Button Text="Enter"
BackgroundColor="LightSeaGreen"
TextColor="White"
IsEnabled="false">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference user},
Path=Text}"
Value="Pippo" />
<BindingCondition Binding="{Binding Source={x:Reference password},
Path=Text}"
Value="1234" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="true" />
</MultiTrigger>
</Button.Triggers>
</Button>

Anatomia di un File XAML
 Ogni applicazione ha un file App.Xaml e un file App.Xaml.cs
detto C# code-behind
 App, il file XAML;
 App.Xaml.cs, un C# code-behind file associato al file XAML
 App.xaml è il punto di partenza dichiarativo della tua
applicazione
 Entrambe App.xaml e App.xaml.cs contribuiscono a una classe
denominata App che deriva da Application

Classe App di Xamarin.Forms
 La classe App che deriva da Application offre le seguenti
funzionalità
 Una proprietà MainPage, dove deve essere impostata la
pagina iniziale per l'app
 Un dizionario Properties persistente per archiviare valori
sullo stato del ciclo di vita
 Una proprietà Current statica che contiene un riferimento
all'oggetto applicazione corrente.

Ciclo di vita (1)
 La classe Application contiene tre metodi virtuali che
possono essere sottoposti a override per gestire i metodi
del ciclo di vita
 OnStart Chiamato all'avvio dell'applicazione.
 OnSleep Chiamato ogni volta che l'applicazione passa in
background.
 OnResume Chiamato alla ripresa dell'applicazione, dopo il
passaggio in background.

Ciclo di vita (2)
 Non è disponibile alcun metodo per la terminazione
dell'applicazione. In circostanze normali, ovvero non in
caso di arresto anomalo, la terminazione
dell'applicazione verrà eseguita dallo stato OnSleep,
senza l'invio di notifiche aggiuntive al codice.

Ciclo di vita (3)
 Per rilevare quando questi metodi vengono chiamati, si va ad eseguire
un override di ciascun metodo partendo dalla classe Application
implementando una chiamata WriteLine in ognuno
protected override void OnStart()
{
Debug.WriteLine ("OnStart");
}
protected override void OnSleep()
{
Debug.WriteLine ("OnSleep");
}
protected override void OnResume()
{
Debug.WriteLine ("OnResume");
}

Xaml su Xamarin

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Xaml su Xamarin

Similar to Xaml su Xamarin (20)

More from Beniamino Ferrari

More from Beniamino Ferrari (8)

Recently uploaded

Recently uploaded (9)

Xaml su Xamarin