Este documento presenta una introducción a Xamarin.Forms, incluyendo cómo construir interfaces nativas para iOS, Android y Windows Phone desde una única base de código C# compartida. También describe elementos como páginas, layouts, controles, convertidores, animaciones, triggers y comportamientos que permiten crear aplicaciones multiplataforma.

1. Yeray Julian - @josueyeray
Rafa Serna - @rafasermed
XAMARIN FORMS
Y
A
X B

2. Antes… larga vida y prosperidad!

3. Xamarin.Forms – Y esto que leches es?
iOS
Android
Windows Phone
Construir interfaces nativas para iOS, Android y Windows Phone desde una única
base de código C# compartida.

4. Xamarin.Forms – Y esto que leches es?
Construir interfaces nativas para iOS, Android y Windows Phone desde una única
base de código C# compartida.
4
XAMARIN
XAMARIN.FORMS
Android 4.0+ Windows Phone 8.0iOS 6.1+ Windows Phone 8.0 (Silverlight)

5. Xamarin.Forms – Páginas
Elemento Visual (contenedor), primario.
5
Content MasterDetail Navigation Tabbed Carousel
• Android: Activity
• iOS: View Controller
• Windows Phone: Page

6. Xamarin.Forms – Páginas
Elemento Visual (contenedor), primario.
6
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleApp.Page1">
......
......
......
</ContentPage> XAML

7. Xamarin.Forms – Páginas
Elemento Visual (contenedor), primario.
7
MainPage = new ContentPage
{
Content = ……
………
………
};
C#

8. Xamarin.Forms – Layouts 8
Stack Absolute Relative Grid ContentView ScrollView Frame
Elemento contenedor de controles de interfaz de usuario en estructuras lógicas.

9. Xamarin.Forms – Layouts 9
Elemento contenedor de controles de interfaz de usuario en estructuras lógicas.
<ContentPage.Content>
<StackLayout HorizontalOptions="StartAndExpand"
Orientation=“Vertical">
.....
.....
.....
</StackLayout>
</ContentPage.Content>
XAML

10. Xamarin.Forms – Layouts
1
0
Elemento contenedor de controles de interfaz de usuario en estructuras lógicas.
MainPage = new ContentPage
{
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
……
……
}
}
};
C#

11. Xamarin.Forms – Controles
Colección de objetos visuales que son representados por sus homónimos en cada
una de las plataformas.
1
1

12. Xamarin.Forms – Controles
Colección de objetos visuales que son representados por sus homónimos en cada
una de las plataformas.
1
2
<Label Text="{Binding MainText}" Font="Large"
VerticalOptions="Center" HorizontalOptions="Center" />
<Button Text="Click Me!“ HorizontalOptions="Center"
VerticalOptions="CenterAndExpand“
Clicked="OnButtonClicked" />
XAML

13. Xamarin.Forms – Controles
Colección de objetos visuales que son representados por sus homónimos en cada
una de las plataformas.
1
3
new Label {
XAlign = TextAlignment.Center,
Text = "Welcome to Xamarin Forms!"
}
new Button {
Text = "Click Me!",
Font = Font.SystemFontOfSize(NamedSize.Large),
BorderWidth = 1,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
C#

14. Xamarin.Forms – Demo Time
1
4

15. Xamarin.Forms – Converters
Implemetar el Interfaz IValueConverter
1
5
class DoubleToIntConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
double multiplier;
if (!Double.TryParse(parameter as string, out multiplier))
multiplier = 1;
return (int)Math.Round(multiplier * (double)value);
}
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
}
}

16. Xamarin.Forms – Converters
Implemetar el Interfaz IValueConverter
1
6
<ContentPage.Resources>
<ResourceDictionary>
<local:DoubleToIntConverter x:Key="intConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<Label Text="{Binding Color.R,
Converter={StaticResource intConverter},
ConverterParameter=255,
StringFormat='R={0:X2}'}" />

17. CONVERTERS – Demo Time 1
7

18. Xamarin.Forms – Animaciones 1
8
FadeTo
LayoutTo
ScaleTo
TranslateTo
RotateTo
RotateXTo
RotateYTo
RelRotateTo
RelScaleTo

19. Xamarin.Forms – Animaciones 1
9
Element.FadeTo(opacity, duration, easing):
Element.LayoutTo(rectangle, duration, easing);
Element.RotateTo(rotation, duration, easing);
Element.ScaleTo(scale, duration, easing);
Element.TranslateTo(X, Y, duration, easing);
Easing:
.BounceIn
.BounceOut
.CubicIn
.CubicInOut
.CubicOut
.Linear
.SinIn
.SinInOut
.SinOut
.SpringIn
.SpringOut

20. Xamarin.Forms –Triggers
Implementar TriggerAction<Entry>
2
0
<Style.Triggers>
<Trigger Property="Entry.IsFocused" Value="True" TargetType="Entry">
<Setter Property="Entry.TextColor" Value="Red" />
</Trigger>
</Style.Triggers>
<StackLayout Orientation="Horizontal">
<Label Text="Your age: " />
<Entry TextColor="Black“ Placeholder="Age" />
</StackLayout>

21. Xamarin.Forms – Event Triggers
Cuando esta propiedad tiene ese valor, a continuación, establece esta otra
propiedad con este nuevo valor.
2
1
public class EntryValidation : TriggerAction<Entry>
{
protected override void Invoke(Entry sender)
{
int parsed;
bool valid = int.TryParse(sender.Text, out parsed);
if (!valid) {
sender.TextColor = Color.Red;
}
else {
sender.TextColor = Color.Blue;
}
}
} <Entry TextColor="Black“ Placeholder="Age">
<Entry.Triggers>
<EventTrigger Event="TextChanged">
<local:EntryValidation />
</EventTrigger>
</Entry.Triggers>
</Entry>

22. Xamarin.Forms – Behaviors
Implementar Behavior<T>
2
2
public class ChangeColorButtonBehavior : Behavior<Button>
{
protected override void OnAttachedTo(Button bindable)
{
bindable.Clicked += ButtonClicked;
base.OnAttachedTo(bindable);
}
protected override void OnDetachingFrom(Button bindable)
{
bindable.Clicked -= ButtonClicked;
base.OnDetachingFrom(bindable);
}
private void ButtonClicked(object sender, EventArgs e)
{
var button = sender as Button;
button.BackgroundColor = button.BackgroundColor != Color.Blue ?
Color.Blue : Color.Red;
}
}

23. Xamarin.Forms – Behaviors
Implementar Behavior<T>
2
3
<Button Text="Click to chance color!">
<Button.Behaviors>
<behaviors:ChangeColorButtonBehavior />
</Button.Behaviors>
</Button>
<Button Text="Click to do nothing!" />

24. BEHAVIORS y TRIGGERS – Demo Time 2
4

25. PREGUNTAS?
Habla ahora o no tendrás
monito!!!
?

27. Yeray Julian - @josueyeray
Rafa Serna - @rafasermed
¡¡¡Si te ha gustado no olvides
rellenar la encuesta!!!
Thanks
Y
A
X B