Aplicaciones Móviles Multiplataforma Layouts

Laboratorio: Funciones y Procedimientos en C#

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

REVISION DEL CASO PRÁCTICO

Pág. 1
Aplicaciones Móviles Multiplataforma Layouts

Creación del Proyecto

Pág. 2
Aplicaciones Móviles Multiplataforma Layouts

Crear un Menú para las opciones.

Modificar la página MainPage.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:Ejercicio03"
x:Class="Ejercicio03.MainPage">
<StackLayout>

<StackLayout>
<Button x:Name="Item3" Text="Datepicker"/>
<Button x:Name="Item14" Text="ListviewSource"/>
</StackLayout>
<StackLayout Orientation="Horizontal">

<StackLayout>
<Button x:Name="Item1" Text="ButtonDemo"/>
<Button x:Name="Item2" Text="ButtonCode"/>
<Button x:Name="Item4" Text="EditorDemo"/>
<Button x:Name="Item5" Text="EditorCode"/>
<Button x:Name="Item6" Text="EntryDemo"/>
<Button x:Name="Item7" Text="EntryCode"/>
</StackLayout>
<StackLayout>
<Button x:Name="Item8" Text="LabelDemo"/>
<Button x:Name="Item9" Text="LabelCode"/>
<Button x:Name="Item10" Text="LocalImage"/>
<Button x:Name="Item11" Text="EmbeddedImage"/>
<Button x:Name="Item12" Text="ListViewDemo"/>
<Button x:Name="Item13" Text="ListviewCode"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>

Modificar la página MainPage.cs

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

namespace Ejercicio03
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Item1.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new ButtonDemo());

};

Pág. 3
Aplicaciones Móviles Multiplataforma Layouts

Item2.Clicked += async (sender, e) =>

{
await Navigation.PushAsync(new ButtonCode());
};
Item3.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new DatepickerDemo());

};
Item4.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new EditorDemo());

};
Item5.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new EditorCode());

};
Item6.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new EntryDemo());

};
Item7.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new EntryCode());

};
Item8.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new LabelDemo());

};
Item9.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new LabelCode());

};
Item10.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new LocalImage());

};
Item11.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new EmbeddedImage());

};
Item12.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new ListViewDemo());

};
Item13.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new ListViewCode());

};
Item14.Clicked += async (sender, e) =>
{
await Navigation.PushAsync(new ListViewSource());

Pág. 4
Aplicaciones Móviles Multiplataforma Layouts

};
}
}
}

Modificar el archivo App.xml.cs

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

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Ejercicio03
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new NavigationPage( new MainPage());

protected override void OnStart()

{
// Handle when your app starts
}

protected override void OnSleep()

{
// Handle when your app sleeps
}

protected override void OnResume()

{
// Handle when your app resumes
}
}
}

Pág. 5
Aplicaciones Móviles Multiplataforma Layouts

Button
Agregar una página de contenido de nombre button.xaml

Modificar el contenido del archivo 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="PageDesign.Button">
<ContentPage.Content>
<StackLayout>

<Label x:Name="label"
Text="Click the Button below"
FontSize="Large"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center" />

<Button Text="Click to Rotate Text!"

VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />

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

Pág. 6
Aplicaciones Móviles Multiplataforma Layouts

Agregar el código C#
namespace PageDesign
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Button : ContentPage
{
public Button ()
{
InitializeComponent ();
}
async void OnButtonClicked(object sender, EventArgs args)
{

await label.RelRotateTo(360, 1000);

}
}
}

Pág. 7
Aplicaciones Móviles Multiplataforma Layouts

Button Code
Agregar una página de contenido de nombre ButtonCode.xaml

Agregar el 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 Ejercicio03
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ButtonCode : ContentPage
{
public ButtonCode ()
{
InitializeComponent ();
Title = "Code Button Click";

Label label = new Label

{
Text = "Click the Button below",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.Center
};

Button button = new Button

{
Text = "Click to Rotate Text!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.Center

Pág. 8
Aplicaciones Móviles Multiplataforma Layouts

};
button.Clicked += async (sender, args) => await
label.RelRotateTo(360, 1000);

Content = new StackLayout

{
Children =
{
label,
button
}
};
}
}
}

Pág. 9
Aplicaciones Móviles Multiplataforma Layouts

Datepicker
Agregar una página de contenido de nombre DatepickerDemo.xaml

Modificar el contenido del archivo 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="PageDesign.DatePicker">
<ContentPage.Content>
<StackLayout>
<DatePicker MinimumDate="01/01/2018"
MaximumDate="12/31/2018"
Date="06/21/2018" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Pág. 10
Aplicaciones Móviles Multiplataforma Layouts

Label
Agregar página de contenido de nombre LabelDemo.xaml

Modificar el contenido del archivo 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="Ejercicio03.LabelDemo">
<ContentPage.Content>
<StackLayout>
<Label Text="This is underlined text." TextDecorations="Underline"
/>
<Label Text="This is text with strikethrough."
TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough."
TextDecorations="Underline, Strikethrough" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Pág. 11
Aplicaciones Móviles Multiplataforma Layouts

LabelCode
Agregar página de contenido de nombre LabelCode.xaml

Agregar el 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 Ejercicio03
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LabelCode : ContentPage
{
public LabelCode ()
{
InitializeComponent ();
StackLayout stack = new StackLayout();
var underlineLabel = new Label { Text = "This is underlined text.",
TextDecorations = TextDecorations.Underline };
var strikethroughLabel = new Label { Text = "This is text with
strikethrough.", TextDecorations = TextDecorations.Strikethrough };
var bothLabel = new Label { Text = "This is underlined text with
strikethrough.", TextDecorations = TextDecorations.Underline |
TextDecorations.Strikethrough };

stack.Children.Add(underlineLabel);
stack.Children.Add(strikethroughLabel);
stack.Children.Add(strikethroughLabel);

Pág. 12
Aplicaciones Móviles Multiplataforma Layouts

Content = stack;

}
}
}

Pág. 13
Aplicaciones Móviles Multiplataforma Layouts

Entry
Agregar página de contenido de nombre EntryDemo.xaml

Modificar el contenido del archivo 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="Ejercicio03.EntryDemo">
<ContentPage.Content>
<StackLayout>
<Entry Text="This is a read-only Entry"></Entry>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Pág. 14
Aplicaciones Móviles Multiplataforma Layouts

EntryCode
Agregar página de contenido de nombre EntryCode.xaml

Agregar el 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 Ejercicio03
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EntryCode : ContentPage
{
public EntryCode ()
{
InitializeComponent ();
StackLayout stack = new StackLayout();
var entry = new Entry { Text = "This is a read-only Entry"};
stack.Children.Add(entry);
Content = stack;
}
}
}

Pág. 15
Aplicaciones Móviles Multiplataforma Layouts

Pág. 16
Aplicaciones Móviles Multiplataforma Layouts

Editor
Agregar página de contenido de nombre EditorDemo.xaml

Modificar el contenido del archivo 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="Ejercicio03.EditorDemo">
<ContentPage.Content>
<StackLayout>
<Editor Text="I am an Editor" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Pág. 17
Aplicaciones Móviles Multiplataforma Layouts

EditorCode
Agregar página de contenido de nombre EditorCode.xaml

Agregar el 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 Ejercicio03
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EditorCode : ContentPage
{
public EditorCode ()
{
InitializeComponent ();
StackLayout stack = new StackLayout();
var MyEditor = new Editor { Text = "I am an Editor" };
stack.Children.Add(MyEditor);
Content = stack;
}
}
}

Pág. 18
Aplicaciones Móviles Multiplataforma Layouts

LocaI mage
Agregar página de contenido LocalImage.xaml

Agregar en el proyecto Ejercicio03.Android dentro de la ruta Resources/drawable la imagen a

mostrar.

Pág. 19
Aplicaciones Móviles Multiplataforma Layouts

Modificar 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="Ejercicio03.LocalImage">
<ContentPage.Content>
<StackLayout>
<Image Source="logotest2.jpg" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Pág. 20
Aplicaciones Móviles Multiplataforma Layouts

Embedded mage
Agregar página de contenido EmbeddedImage.xaml

Agregar en el proyecto Ejercicio03 la imagen a mostrar.

Pág. 21
Aplicaciones Móviles Multiplataforma Layouts

Cambiar en propiedades de la imagen a recurso incrustado

Agregar la siguiente clase de nombre ImageResourceExtension.cs

Pág. 22
Aplicaciones Móviles Multiplataforma Layouts

Modificar código c#

using System;
using System.Reflection;
using Xamarin.Forms.Xaml;
using Xamarin.Forms;
using Xamarin.Forms.Internals;

namespace Ejercicio03
{
[Preserve(AllMembers = true)]
[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
public string Source { get; set; }

public object ProvideValue(IServiceProvider serviceProvider)

{
if (Source == null)
return null;

// Do your translation lookup here, using whatever method you require

var imageSource = ImageSource.FromResource(Source,
typeof(ImageResourceExtension).GetTypeInfo().Assembly);

return imageSource;
}
}
}

Pág. 23
Aplicaciones Móviles Multiplataforma Layouts

Modificar 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:local2="clr-namespace:Ejercicio03"
x:Class="Ejercicio03.EmbeddedImage">
<ContentPage.Content>
<ScrollView>
<StackLayout x:Name="stack">
<Label Text="Embedded Images!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<Image Source="{local2:ImageResource
Ejercicio03.logotest.jpg}" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

Pág. 24
Aplicaciones Móviles Multiplataforma Layouts

Pág. 25
Aplicaciones Móviles Multiplataforma Layouts

Pág. 26
Aplicaciones Móviles Multiplataforma Layouts

Pág. 27
Aplicaciones Móviles Multiplataforma Layouts

Pág. 28
Aplicaciones Móviles Multiplataforma Layouts

Pág. 29
Aplicaciones Móviles Multiplataforma Layouts

Pág. 30