Layouts

Aplicaciones Móviles Multiplataforma

“GESTURE”

Pág. 1
 Layouts

Laboratorio: GESTURE

COMPETENCIAS

1. Comprender paradigmas de la programación orientada a objetos

2. Escribir funciones y procedimientos en lenguaje de programación C#
3. Declarar clases e instanciar objetos en Visual Studio con C#

INTRODUCCIÓN

Existen diferentes lenguajes de programación orientado a objetos para escribir funciones y

procedimientos, pero el C# se acomoda a la necesidad del curso, porque nos va permitir
realizar aplicaciones multiplataforma en móviles con XAMARIN y VISUAL STUDIO 2017

PREPARACIÓN

El Alumno debe revisar previamente el material del curso.

REVISION DEL CASO PRÁCTICO

Pág. 2
 Layouts

TAP
Agregar página de contenido de nombre TapDemo.xaml

Agregar 2 imágenes en la carpeta drawable de Android

tapped.jpg
tapped_bw.jpg

Agregar código XAML

<?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="Ejercicio06.TapDemo">
<ContentPage.Content>
<StackLayout>

</StackLayout>
</ContentPage.Content>
</ContentPage>

Agregar código C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

Pág. 3
 Layouts

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ejercicio06
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TapDemo : ContentPage
{
public TapDemo ()
{
InitializeComponent ();
var image = new Image
{
Source = "tapped.jpg",

HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
};

var tapGestureRecognizer = new TapGestureRecognizer();

// tapGestureRecognizer.NumberOfTapsRequired = 2; // double-
tap
tapGestureRecognizer.Tapped += OnTapGestureRecognizerTapped;
image.GestureRecognizers.Add(tapGestureRecognizer);

label = new Label

{
Text = "tap the photo!",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};

Content = new StackLayout

{
Padding = new Thickness(20, 100),

Children =
{
image,
label
}
};
}
int tapCount;
readonly Label label;
void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
tapCount++;
label.Text = String.Format("{0} tap{1} so far!",
tapCount,
tapCount == 1 ? "" : "s");

var imageSender = (Image)sender;

Pág. 4
 Layouts

// watch the monkey go from color to black&white!

if (tapCount % 2 == 0)
{
imageSender.Source = "tapped.jpg";
}
else
{
imageSender.Source = "tapped_bw.jpg";
}
}
}
}

Pág. 5
 Layouts

PINCH
Agregar página de contenido de nombre PinchDemo.xaml

Agregar clase PinchToZoomContainer

Agregar Código C# a la clase

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Internals;

Pág. 6
 Layouts

namespace Ejercicio06
{
public class PinchToZoomContainer : ContentView
{
double currentScale = 1;
double startScale = 1;
double xOffset = 0;
double yOffset = 0;

public PinchToZoomContainer()
{
var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += OnPinchUpdated;
GestureRecognizers.Add(pinchGesture);
}

void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)

{
if (e.Status == GestureStatus.Started)
{
// Store the current scale factor applied to the wrapped user interface element,
// and zero the components for the center point of the translate transform.
startScale = Content.Scale;
Content.AnchorX = 0;
Content.AnchorY = 0;
}
if (e.Status == GestureStatus.Running)
{
// Calculate the scale factor to be applied.
currentScale += (e.Scale - 1) * startScale;
currentScale = Math.Max(1, currentScale);

// The ScaleOrigin is in relative coordinates to the wrapped user interface element,

// so get the X pixel coordinate.
double renderedX = Content.X + xOffset;
double deltaX = renderedX / Width;
double deltaWidth = Width / (Content.Width * startScale);
double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

// The ScaleOrigin is in relative coordinates to the wrapped user interface element,

// so get the Y pixel coordinate.
double renderedY = Content.Y + yOffset;
double deltaY = renderedY / Height;
double deltaHeight = Height / (Content.Height * startScale);
double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

// Calculate the transformed element pixel coordinates.

double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

// Apply translation based on the change in origin.

Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);

// Apply scale factor

Content.Scale = currentScale;

Pág. 7
 Layouts

}
if (e.Status == GestureStatus.Completed)
{
// Store the translation delta's of the wrapped user interface element.
xOffset = Content.TranslationX;
yOffset = Content.TranslationY;
}
}
}
}

Agregar código XAML

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Ejercicio06"
x:Class="Ejercicio06.PinchDemo">
<ContentPage.Content>
<Grid Padding="20">
<local:PinchToZoomContainer>
<local:PinchToZoomContainer.Content>
<Image Source="tapped.jpg" />
</local:PinchToZoomContainer.Content>
</local:PinchToZoomContainer>
</Grid>
</ContentPage.Content>
</ContentPage>

Pág. 8
 Layouts

PAN
Agregar página de contenido de nombre PanDemo.xaml

Agregar 2 imagenes en la carpeta drawable de Android

MonoMonkey.jpg

Agregar clase PanContainer.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace Ejercicio06
{
public class PanContainer : ContentView
{
double x, y;

public PanContainer()
{
// Set PanGestureRecognizer.TouchPoints to control the
// number of touch points needed to pan
var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += OnPanUpdated;
GestureRecognizers.Add(panGesture);
}

void OnPanUpdated(object sender, PanUpdatedEventArgs e)

{
switch (e.StatusType)

Pág. 9
 Layouts

case GestureStatus.Running:
// Translate and ensure we don't pan beyond the wrapped user interface element
bounds.
Content.TranslationX = Math.Max(Math.Min(0, x + e.TotalX),
-Math.Abs(Content.Width - App.ScreenWidth));
Content.TranslationY = Math.Max(Math.Min(0, y + e.TotalY),
-Math.Abs(Content.Height - App.ScreenHeight));
break;

case GestureStatus.Completed:
// Store the translation applied during the pan
x = Content.TranslationX;
y = Content.TranslationY;
break;
}
}
}
}

Agregar código XAML

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Ejercicio06"
x:Class="Ejercicio06.PanDemo">
<ContentPage.Content>
<AbsoluteLayout>
<local:PanContainer>
<Image Source="MonoMonkey.jpg" WidthRequest="1024" HeightRequest="768" />
</local:PanContainer>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

Pág. 10
 Layouts

SWIPE
Agregar página de contenido de nombre SwipeDemo.xaml

Agregar código XAML

<?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="Ejercicio06.SwipeDemo">
<ContentPage.Content>
<StackLayout Margin="20">
<Label Text="Swipe inside the box with a single finger." x:Name="_labels"/>
<BoxView Color="Teal" WidthRequest="300" HeightRequest="300"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<BoxView.GestureRecognizers>
<!-- Can also set a swipe threshold on each gesture recognizer -->
<SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
<SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped"/>
<SwipeGestureRecognizer Direction="Up" Swiped="OnSwiped"/>
<SwipeGestureRecognizer Direction="Down" Swiped="OnSwiped"/>
</BoxView.GestureRecognizers>
</BoxView>
<Label x:Name="_label" Text="You swiped: "/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Agregar código C#

Pág. 11
 Layouts

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ejercicio06
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SwipeDemo : ContentPage
{
public SwipeDemo ()
{
InitializeComponent ();
}
void OnSwiped(object sender, SwipedEventArgs e)
{
_label.Text = $"You swiped: {e.Direction.ToString()}";
}
}
}

SWIPE BINDING
Agregar página de contenido de nombre SwipeBinding.xaml

Agregar clase C# SwipeCommandPageViewModel

using System;
using System.Collections.Generic;

Pág. 12
 Layouts

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace Ejercicio06
{
public class SwipeCommandPageViewModel : INotifyPropertyChanged
{
public ICommand SwipeCommand => new Command<string>(Swipe);

public string SwipeDirection { get; private set; }

public SwipeCommandPageViewModel()
{
SwipeDirection = "You swiped: ";
}

void Swipe(string value)

{
SwipeDirection = $"You swiped: {value}";
OnPropertyChanged("SwipeDirection");
}

#region INotifyPropertyChanged

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged([CallerMemberName] string propertyName = null)

{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

#endregion
}
}

Agregar código XAML

<?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="Ejercicio06.SwipeBinding">
<ContentPage.Content>
<StackLayout Margin="20">
<Label Text="Swipe inside the box with a single finger." />
<BoxView Color="Teal" WidthRequest="300" HeightRequest="300"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<BoxView.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Command="{Binding
SwipeCommand}" CommandParameter="Left" />
<SwipeGestureRecognizer Direction="Right" Command="{Binding
SwipeCommand}" CommandParameter="Right" />

Pág. 13
 Layouts

<SwipeGestureRecognizer Direction="Up" Command="{Binding

SwipeCommand}" CommandParameter="Up" />
<SwipeGestureRecognizer Direction="Down" Command="{Binding
SwipeCommand}" CommandParameter="Down" />
</BoxView.GestureRecognizers>
</BoxView>
<Label Text="{Binding SwipeDirection}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Agregar código C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ejercicio06
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SwipeBinding : ContentPage
{
public SwipeBinding ()
{
InitializeComponent ();
BindingContext = new SwipeCommandPageViewModel();
}
}
}

Pág. 14