Embed Size (px)
Citation preview
Yeray Julian - @josueyerayRafa Serna - @rafasermed
XAMARIN FORMS
Y
AX B
Antes… larga vida y prosperidad!
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.
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)
Xamarin.Forms – Páginas
Elemento Visual (contenedor), primario.
5
Content MasterDetail Navigation Tabbed Carousel
• Android: Activity
• iOS: View Controller
• Windows Phone: Page
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
Xamarin.Forms – Páginas
Elemento Visual (contenedor), primario.
7
MainPage = new ContentPage{
Content = ……………………
};C#
Xamarin.Forms – Layouts 8
Stack Absolute Relative Grid ContentView ScrollView Frame
Elemento contenedor de controles de interfaz de usuario en estructuras lógicas.
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
Xamarin.Forms – Layouts1
0
Elemento contenedor de controles de interfaz de usuario en estructuras lógicas.
MainPage = new ContentPage{
Content = new StackLayout{
VerticalOptions = LayoutOptions.Center,Children = {
…………
}}
};
C#
Xamarin.Forms – ControlesColección de objetos visuales que son representados por sus homónimos en cada
una de las plataformas.
1
1
Xamarin.Forms – ControlesColecció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
Xamarin.Forms – ControlesColecció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#
Xamarin.Forms – Demo Time1
4
Xamarin.Forms – ConvertersImplemetar 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)
{}
}
Xamarin.Forms – ConvertersImplemetar 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}'}" />
CONVERTERS – Demo Time 1
7
Xamarin.Forms – Animaciones 1
8
FadeTo
LayoutTo
ScaleTo
TranslateTo
RotateTo
RotateXTo
RotateYTo
RelRotateTo
RelScaleTo
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
Xamarin.Forms –TriggersImplementar 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>
Xamarin.Forms – Event TriggersCuando 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>
Xamarin.Forms – BehaviorsImplementar 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;}
}
Xamarin.Forms – BehaviorsImplementar Behavior<T>
2
3
<Button Text="Click to chance color!"><Button.Behaviors>
<behaviors:ChangeColorButtonBehavior /></Button.Behaviors>
</Button><Button Text="Click to do nothing!" />
BEHAVIORS y TRIGGERS – Demo Time 2
4
PREGUNTAS?
Habla ahora o no tendrás
monito!!!
?
Yeray Julian - @josueyerayRafa Serna - @rafasermed
¡¡¡Si te ha gustado no olvidesrellenar la encuesta!!!Thanks
Y
AX B
