Paginas Layouts Xamarin

Páginas de Xamarin.
Forms
Las páginas de Xamarin.Forms representan pantallas de aplicaciones móviles
multiplataforma.
Todos los tipos de página que se describen a continuación se derivan de la clase de
Xamarin.Forms. Estos elementos visuales ocupan toda o la mayor parte de la
pantalla. Un objeto Page representa un ViewController en iOS y una Page en la
plataforma universal de Windows. En Android, cada página ocupa la pantalla como
una Activity , pero las páginas de Xamarin.Forms no son objetos de Activity .
ContentPage
ContentPage es el tipo de página más simple y común. Establezca la propiedad de Content

en un solo objeto de View , que suele ser un Layout como StackLayout , Grid o ScrollView .
using System;
using Xamarin.Forms;
namespace FormsGallery.CodeExamples
{
class ContentPageDemoPage : ContentPage
{
public ContentPageDemoPage()
{
Label header = new Label
{
Text = "ContentPage",
FontSize = 40,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
Label label1 = new Label

{
Text = "ContentPage is the simplest type of page.",
FontSize = Device.GetNamedSize(NamedSize.Large,
typeof(Label)),
};

{
Text = "The content of a ContentPage is generally a " +
"layout of some sort that can then be a parent "
+
"to multiple children.",
typeof(Label)),
};

{
Text = "This ContentPage contains a StackLayout, which
" +
"in turn contains four Label views (including the
" +
"large one at the top)",
typeof(Label)),
};
// Build the page.

Title = "ContentPage Demo";
Padding = new Thickness(10, 0);
Content = new StackLayout
{
Children =
{
header,
label1,
label2,
label3
}
};
}
}
}
MasterDetailPage
Un MasterDetailPage gestiona dos paneles de información. Establezca la propiedad Master

en una página que generalmente muestra una lista o un menú. Establezca la propiedad
Detail en una página que muestre un elemento seleccionado de la página maestra. La
propiedad IsPresented gobierna si la página maestra o de detalle está visible.
using System;
{
class MasterDetailPageDemoPage : MasterDetailPage
{
public MasterDetailPageDemoPage ()
{
Title = "MasterDetailPage Demo";
Label header = new Label {

Text = "MasterDetailPage",
FontSize = 30,
};
// Assemble an array of NamedColor objects.

NamedColor[] namedColors = {
new NamedColor ("Aqua", Color.Aqua),
new NamedColor ("Black", Color.Black),
new NamedColor ("Blue", Color.Blue),
new NamedColor ("Fuchsia", Color.Fuchsia),
new NamedColor ("Gray", Color.Gray),
new NamedColor ("Green", Color.Green),
new NamedColor ("Lime", Color.Lime),
new NamedColor ("Maroon", Color.Maroon),
new NamedColor ("Navy", Color.Navy),
new NamedColor ("Olive", Color.Olive),
new NamedColor ("Purple", Color.Purple),
new NamedColor ("Red", Color.Red),
new NamedColor ("Silver", Color.Silver),
new NamedColor ("Teal", Color.Teal),
new NamedColor ("White", Color.White),
new NamedColor ("Yellow", Color.Yellow)
};
// Create ListView for the master page.

ListView listView = new ListView
{
ItemsSource = namedColors,
Margin = new Thickness(10, 0)
};
// Create the master page with the ListView.

Master = new ContentPage {
Title = "Color List", // Title required!
Content = new StackLayout {
Children = {
header,
listView
}
}
};
// Create the detail page using NamedColorPage

NamedColorPage detailPage = new NamedColorPage (true);
Detail = detailPage;
// For Android & Windows Phone, provide a way to get back to

the master page.
if (Device.RuntimePlatform != Device.iOS) {
TapGestureRecognizer tap = new TapGestureRecognizer ();
tap.Tapped += (sender, args) => {
IsPresented = true;
};
detailPage.Content.BackgroundColor = Color.Transparent;
detailPage.Content.GestureRecognizers.Add (tap);
}
// Define a selected handler for the ListView.

listView.ItemSelected += (sender, args) => {
// Set the BindingContext of the detail page.
Detail.BindingContext = args.SelectedItem;
// Show the detail page.

IsPresented = false;
};
// Initialize the ListView selection.

listView.SelectedItem = namedColors [0];
}
}
}
NavigationPage
NavigationPage gestiona la navegación entre otras páginas utilizando una arquitectura

basada en la pila. Cuando se utiliza la navegación de la página en su aplicación, se debe
pasar una instancia de la página de inicio al constructor de un objeto NavigationPage .
using System;
{
// Although this page is actually a ContentPage, it can
// function as a NavigationPage because the HomePage
// is launched as an ApplicationPage in App.
class NavigationPageDemoPage : ContentPage
{
public NavigationPageDemoPage()
{
{
Text = "NavigationPage",
FontSize = 40,
};
Button button1 = new Button

{
Text = " Go to Label Demo Page ",
Font = Font.SystemFontOfSize(NamedSize.Large),
BorderWidth = 1
};
button1.Clicked += async (sender, args) =>
await Navigation.PushAsync(new LabelDemoPage());

{
Text = " Go to Image Demo Page ",
BorderWidth = 1
};
await Navigation.PushAsync(new ImageDemoPage());

{
Text = " Go to BoxView Demo Page ",
BorderWidth = 1
};
await Navigation.PushAsync(new BoxViewDemoPage());

{
Text = " Go to WebView Demo Page ",
BorderWidth = 1
};
await Navigation.PushAsync(new WebViewDemoPage());
// Build the page.

Title = "NavigationPage Demo";
{
Children =
{
header,
new StackLayout
{
HorizontalOptions = LayoutOptions.Center,
Children =
{
button1,
button2,
button3,
button4
}
}
}
};
}
}
}
TabbedPage
TabbedPage deriva de la clase abstracta MultiPage y permite la navegación entre páginas

secundarias mediante pestañas. Establezca la propiedad Children en una colección de
páginas, o establezca la propiedad ItemsSource en una colección de objetos de datos y la
propiedad ItemTemplate en una DataTemplate describe cómo se debe representar
visualmente cada objeto.
using System;
{
class TabbedPageDemoPage : TabbedPage
{
public TabbedPageDemoPage()
{
Title = "TabbedPage Demo";
ItemsSource = new NamedColor[]

{
new NamedColor("Red", Color.Red),
new NamedColor("Green", Color.Green),
new NamedColor("Blue", Color.Blue),
new NamedColor("Yellow", Color.Yellow)
};
ItemTemplate = new DataTemplate(() =>

{
return new NamedColorPage(false);
});
}
}
}
CarouselPage
CarouselPage deriva de la clase abstracta MultiPage y permite la navegación entre páginas

secundarias con solo deslizar el dedo. Establezca la propiedad Children en una colección
de objetos ContentPage , o establezca la propiedad ItemsSource en una colección de
objetos de datos y la propiedad ItemTemplate en una DataTemplate describa cómo debe
representarse visualmente cada objeto.
using System;
{
class CarouselPageDemoPage : CarouselPage
{
public CarouselPageDemoPage()
{
Title = "CarouselPage Demo";
ItemsSource = new NamedColor[]
{
new NamedColor("Red", Color.Red),
new NamedColor("Yellow", Color.Yellow),
new NamedColor("Green", Color.Green),
new NamedColor("Aqua", Color.Aqua),
new NamedColor("Blue", Color.Blue),
new NamedColor("Purple", Color.Purple)
};
ItemTemplate = new DataTemplate(() =>

{
return new NamedColorPage(true);
});
}
}
}
TemplatedPage
TemplatedPage muestra contenido de pantalla completa con una plantilla de control y es la

clase base para ContentPage .
Xamarin.Forms Layouts
Los diseños de Xamarin.Forms se utilizan para componer los controles de la interfaz de
usuario en estructuras visuales.
Las clases Layout y Layout<T> en Xamarin.Forms son subtipos especializados de vistas

que actúan como contenedores para vistas y otras presentaciones. La clase Layout sí
misma deriva de View . Una derivada del Layout generalmente contiene lógica para
establecer la posición y el tamaño de los elementos secundarios en las aplicaciones de
Xamarin.Forms.
Las clases que se derivan de Layout se pueden dividir en dos categorías:
Diseños con contenido único

Estas clases se derivan de Layout , que define las propiedades Padding y
IsClippedToBounds .
ContentView
ContentView contiene un único elemento secundario que se establece con la propiedad
Content . La propiedad de Content se puede establecer en cualquier Derivado de View ,
incluyendo otros derivados de Layout . ContentView se usa principalmente como elemento
estructural y sirve como una clase base para Frame .
using System;
{
class ContentViewDemoPage : ContentPage
{
public ContentViewDemoPage()
{
{
Text = "ContentView",
FontSize = 50,
};
ContentView contentView = new ContentView

{
BackgroundColor = Color.Aqua,
Margin = new Thickness(10),
Padding = new Thickness(25),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.CenterAndExpand,
Content = new Label
{
Text = "The ContentView (colored aqua in this " +
"example) might not seem very useful " +
"because it can have a single child " +
"(in this example a Label) and doesn't " +
"do much else. But ContentView is sometimes a " +
"convenient way of providing a background " +
"color or giving a little margin to its " +
"child through its own Padding property.",
TextColor = Color.Purple
}
};
// Build the page.

Title = "ContentView Demo";
{
Children =
{
header,
contentView
}
};
}
}
}
Frame
La clase Frame deriva de ContentView y muestra un marco rectangular alrededor de su hijo.
Frame tiene un valor de Padding predeterminado de 20, y también define las OutlineColor ,
CornerRadius y HasShadow .
using System;
{
class FrameDemoPage : ContentPage
{
public FrameDemoPage()
{
{
Text = "Frame",
FontSize = 50,
};
Frame frame = new Frame

{
BorderColor = Color.Accent,
HasShadow = true,
HorizontalOptions = LayoutOptions.Center,
Content = new Label
{
Text = "I've been framed!"
}
};
// Build the page.

Title = "Frame Demo";
{
Children =
{
header,
frame
}
};
}
}
}
ScrollView
ScrollView es capaz de desplazar sus contenidos. Establezca la propiedad Content en una
vista o diseño demasiado grande para que quepa en la pantalla. (El contenido de un
ScrollView es muy a menudo un StackLayout .) Establezca la propiedad Orientation para
indicar si el desplazamiento debe ser vertical, horizontal o ambos.
using System;
{
class ScrollViewDemoPage : ContentPage
{
public ScrollViewDemoPage()
{
{
Text = "ScrollView",
FontSize = 50,
};
ScrollView scrollView = new ScrollView

{
VerticalOptions = LayoutOptions.FillAndExpand,
Content = new Label
{
Text = "Sometimes page content fits entirely on "+
"the page. That's very convenient. But " +
"on many occasions, the content of the page " +
"is much too large for the page, or only " +
"becomes available at runtime." +
"\n\n" +
"For cases such as these, the ScrollView " +
"provides a solution. Simply set its " +
"Content property to your content \u2014 in this
" +
"case a Label but in the general case very " +
"likely a Layout derivative with multiple " +
"children \u2014 and the ScrollView provides " +
"scrolling with the distinctive look and touch "
+
"familiar to the user." +
"\n\n" +
"The ScrollView is also capable of " +
"horizontal scrolling, and while that's " +
"usually not as common as vertical scrolling, " +
"sometimes it comes in handy." +
"\n\n" +
"Most often, the content of a ScrollView is " +
"a StackLayout. Whenever you're using a " +
"StackLayout with a number of items determined "
+
"only at runtime, you should probably put it in "
+
"a ScrollView just to be sure your stuff doesn't
" +
"go running off the bottom of the screen.",
typeof(Label)),
}
};
// Build the page.

Title = "ScrollBar Demo";
{
Children =
{
header,
scrollView
}
};
}
}
}
TemplatedView
TemplatedView muestra el contenido con una plantilla de control y es la clase base para
ContentView .
ContentPresenter
ContentPresenter es un administrador de diseño para vistas de plantilla, que se utiliza

dentro de una plantilla ControlTemplate para marcar dónde aparece el contenido que se
presentará.
Layouts with Multiple Children

Estas clases se derivan de Layout<View> .
StackLayout
StackLayout coloca los elementos secundarios en una pila horizontal o verticalmente en

función de la propiedad Orientation . La propiedad Spacing gobierna el espaciado entre
los hijos y tiene un valor predeterminado de 6.
using System;
{
class StackLayoutDemoPage : ContentPage
{
public StackLayoutDemoPage()
{
{
Text = "StackLayout",
FontSize = 50,
};
StackLayout stackLayout = new StackLayout

{
Spacing = 0,
Children =
{
new Label
{
Text = "StackLayout",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "stacks its children",
},
new Label
{
Text = "vertically",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "by default,",
},
new Label
{
Text = "but horizontal placement",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "can be controlled with",
},
new Label
{
Text = "the HorizontalOptions property.",
},
new Label
{
Text = "An Expand option allows one or more
children " +
"to occupy the an area within the remaining
" +
"space of the StackLayout after it's been
sized " +
"to the height of its parent.",
},
new StackLayout
{
Spacing = 0,
Orientation = StackOrientation.Horizontal,
Children =
{
new Label
{
Text = "Stacking",
},
new Label
{
Text = "can also be",
HorizontalOptions =
LayoutOptions.CenterAndExpand
},
new Label
{
Text = "horizontal.",
},
}
}
}
};
// Build the page.

Title = "StackLayout Demo";
{
Children =
{
header,
stackLayout
}
};
}
}
}
Grid
Grid coloca sus elementos secundarios en una cuadrícula de filas y columnas. La posición
de un niño se indica mediante las propiedades adjuntas Row , Column , Row y Column
ColumnSpan .
using System;
{
class GridDemoPage : ContentPage
{
public GridDemoPage ()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = new GridLength (1,
GridUnitType.Star) },
GridUnitType.Absolute) }
},
ColumnDefinitions =
{
new ColumnDefinition { Width = GridLength.Auto },
new ColumnDefinition { Width = new GridLength (1,
GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength (100,
GridUnitType.Absolute) }
}
};
grid.Children.Add (new Label

{
Text = "Grid",
FontSize = 50,
}, 0, 3, 0, 1);

{
Text = "Autosized cell",
TextColor = Color.White,
BackgroundColor = Color.Blue
}, 0, 1);
grid.Children.Add (new BoxView

{
Color = Color.Silver,
HeightRequest = 0
}, 1, 1);
grid.Children.Add (new BoxView

{
Color = Color.Teal
}, 0, 2);

{
Text = "Leftover space",
TextColor = Color.Purple,
BackgroundColor = Color.Aqua,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
}, 1, 2);

{
Text = "Span two rows (or more if you want)",
TextColor = Color.Yellow,
BackgroundColor = Color.Navy,
VerticalTextAlignment = TextAlignment.Center
}, 2, 3, 1, 3);

{
Text = "Span 2 columns",
TextColor = Color.Blue,
BackgroundColor = Color.Yellow,
}, 0, 2, 3, 4);

{
Text = "Fixed 100x100",
TextColor = Color.Aqua,
BackgroundColor = Color.Red,
}, 2, 3);
// Build the page.

Title = "Grid Demo";
Content = grid;
}
}
}
AbsoluteLayout
AbsoluteLayout coloca elementos secundarios en ubicaciones específicas en relación con

su elemento principal. La posición de un niño se indica mediante las propiedades adjuntas
LayoutBounds y LayoutFlags . Un AbsoluteLayout es útil para animar las posiciones de las
vistas.
RelativeLayout
RelativeLayout coloca elementos secundarios en relación con RelativeLayout sí o con sus
hermanos. La posición de un niño se indica mediante las propiedades adjuntas que se
establecen en objetos de tipo Constraint y BoundsConstraint .
using System;
{
class RelativeLayoutDemoPage : ContentPage
{
public RelativeLayoutDemoPage ()
{
{
Text = "RelativeLayout",
FontSize = 40,
HorizontalTextAlignment = TextAlignment.Center
};
// Create the RelativeLayout

RelativeLayout relativeLayout = new RelativeLayout
{
Margin = new Thickness(10)
};
// A Label whose upper-left is centered vertically.

Label referenceLabel = new Label
{
Text = "Not visible",
Opacity = 0,
FontSize = Device.GetNamedSize (NamedSize.Large,
typeof(Label)),
};
relativeLayout.Children.Add (referenceLabel,
Constraint.Constant (0),
Constraint.RelativeToParent ((parent) => {
return parent.Height / 2;
}));
// A Label centered vertically.

Label centerLabel = new Label
{
Text = "Center",
typeof(Label)),
};
relativeLayout.Children.Add (centerLabel,
Constraint.RelativeToView (referenceLabel, (parent,
sibling) => {
return sibling.Y - sibling.Height / 2;
}));
// A Label above the centered Label.

Label aboveLabel = new Label
{
Text = "Above",
typeof(Label)),
};
relativeLayout.Children.Add (aboveLabel,
Constraint.RelativeToView (centerLabel, (parent,
sibling) => {
return sibling.X + sibling.Width;
}),
sibling) => {
return sibling.Y - sibling.Height;
}));
// A Label below the centered Label.

Label belowLabel = new Label
{
Text = "Below",
typeof(Label)),
};
relativeLayout.Children.Add (belowLabel,
sibling) => {
}),
sibling) => {
return sibling.Y + sibling.Height;
}));
// Finish with another on top...

Label furtherAboveLabel = new Label
{
Text = "Further Above",
typeof(Label)),
};
relativeLayout.Children.Add (furtherAboveLabel,
Constraint.RelativeToView (aboveLabel, (parent,
sibling) => {
}),
Constraint.RelativeToView (aboveLabel, (parent,
sibling) => {
return sibling.Y - sibling.Height;
}));
// ...and another on the bottom.

Label furtherBelowLabel = new Label
{
Text = "Further Below",
typeof(Label)),
};
relativeLayout.Children.Add (furtherBelowLabel,
Constraint.RelativeToView (belowLabel, (parent,
sibling) => {
}),
Constraint.RelativeToView (belowLabel, (parent,
sibling) => {
return sibling.Y + sibling.Height;
}));
// Four BoxView's
relativeLayout.Children.Add (
new BoxView { Color = Color.Red },
Constraint.Constant (0));
new BoxView { Color = Color.Green },
return parent.Width - 40;
}),
Constraint.Constant (0));
new BoxView { Color = Color.Blue },
return parent.Height - 40;
}));
new BoxView { Color = Color.Yellow },
return parent.Width - 40;
}),
return parent.Height - 40;
}));
// Build the page.

Title = "RelativeLayout Demo";
Grid grid = new Grid
{
RowDefinitions =
{
GridUnitType.Star) }
}
};
grid.Children.Add (header, 0, 0);
grid.Children.Add (relativeLayout, 0, 1);
Content = grid;
}
}
}
FlexLayout
FlexLayout se basa en el Módulo de diseño de caja flexible CSS, comúnmente conocido

como diseño flexible o flex-box . FlexLayout define seis propiedades FlexLayout y cinco
propiedades enlazables adjuntas que permiten apilar o envolver a los niños con muchas
opciones de alineación y orientación.
using System;
using System.Collections.Generic;
{
public class FlexLayoutDemoPage : ContentPage
{
class DataItem
{
public string Header { set; get; }
public string Description { set; get; }
public string Image { set; get; }
public int ImageWidth { set; get; }

public IList<string> Bullets { set; get; } = new
List<string>();
}
readonly DataItem[] data =

{
new DataItem
{
Header = "Seated Monkey",
Description = "This monkey is laid back and relaxed,
and likes to watch the world go by.",
Image = "SeatedMonkey.jpg",
ImageWidth = 180,
Bullets =
{
"Doesn't make a lot of noise",
"Often smiles mysteriously",
"Sleeps sitting up"
},
},
new DataItem
{
Header = "Banana Monkey",
Description = "Watch this monkey eat a giant banana.",
Image = "Banana.jpg",
ImageWidth = 240,
Bullets =
{
"More fun that a barrel of monkeys",
"Banana not includes"
}
},
new DataItem
{
Header = "Face-Palm Monkey",
Description = "This monkey reacts appropriately to
ridiculous assertions and actions.",
Image = "FacePalm.jpg",
ImageWidth = 180,
Bullets =
{
"Cynical but not unfriendly",
"Seven varieties of grimaces",
"Doesn't laugh at your jokes"
},
}
};
public FlexLayoutDemoPage ()
{
FlexLayout flexLayout = new FlexLayout();
foreach (DataItem item in data)

{
FlexLayout itemFlexLayout = new FlexLayout
{
Direction = FlexDirection.Column,
Children =
{
new Label
{
Text = item.Header,
Margin = new Thickness(0, 8),
FontSize =
Device.GetNamedSize(NamedSize.Large, typeof(Label)),
TextColor = Color.Blue,
},
new Label
{
Text = item.Description,
Margin = new Thickness(0, 4),
},
}
};
foreach (string bullet in item.Bullets)

{
itemFlexLayout.Children.Add(new Label
{
Text = " \u2022 " + bullet,
Margin = new Thickness(0, 4)
});
}
var x = ImageSource.FromResource("");
Image image = new Image

{
Source =
ImageSource.FromResource("FormsGallery.Images." + item.Image),
WidthRequest = item.ImageWidth,
HeightRequest = 180
};
FlexLayout.SetOrder(image, -1);
FlexLayout.SetAlignSelf(image, FlexAlignSelf.Center);
itemFlexLayout.Children.Add(image);
Label blankLabel = new Label();

FlexLayout.SetGrow(blankLabel, 1);
itemFlexLayout.Children.Add(blankLabel);
itemFlexLayout.Children.Add(new Button
{
Text = "LEARN MORE",
typeof(Button)),
TextColor = Color.White,
BackgroundColor = Color.Green,
CornerRadius = 20
});
flexLayout.Children.Add(new Frame
{
WidthRequest = 300,
HeightRequest = 480,
BackgroundColor = Color.LightYellow,
BorderColor = Color.Blue,
CornerRadius = 15,
Content = itemFlexLayout
});
}
// Build the page.

Title = "FlexLayout Demo";
Content = new ScrollView
{
Orientation = ScrollOrientation.Both,
Content = flexLayout
};
}
}
}

Paginas Layouts Xamarin

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Paginas Layouts Xamarin

Uploaded by

Copyright:

Available Formats

Páginas de Xamarin.

ContentPage es el tipo de página más simple y común. Establezca la propiedad de Content

Label label1 = new Label

Label label2 = new Label

Label label3 = new Label

// Build the page.

Un MasterDetailPage gestiona dos paneles de información. Establezca la propiedad Master

Label header = new Label {

// Assemble an array of NamedColor objects.

// Create ListView for the master page.

// Create the master page with the ListView.

// Create the detail page using NamedColorPage

// For Android & Windows Phone, provide a way to get back to

// Define a selected handler for the ListView.

// Show the detail page.

// Initialize the ListView selection.

NavigationPage gestiona la navegación entre otras páginas utilizando una arquitectura

Button button1 = new Button

Button button2 = new Button

Button button3 = new Button

Button button4 = new Button

// Build the page.

TabbedPage deriva de la clase abstracta MultiPage y permite la navegación entre páginas

ItemsSource = new NamedColor[]

ItemTemplate = new DataTemplate(() =>

CarouselPage deriva de la clase abstracta MultiPage y permite la navegación entre páginas

ItemTemplate = new DataTemplate(() =>

TemplatedPage muestra contenido de pantalla completa con una plantilla de control y es la

Las clases Layout y Layout<T> en Xamarin.Forms son subtipos especializados de vistas

Diseños con contenido único

ContentView contentView = new ContentView

// Build the page.

Frame frame = new Frame

// Build the page.

ScrollView scrollView = new ScrollView

// Build the page.

ContentPresenter es un administrador de diseño para vistas de plantilla, que se utiliza

Layouts with Multiple Children

StackLayout coloca los elementos secundarios en una pila horizontal o verticalmente en

StackLayout stackLayout = new StackLayout

// Build the page.

grid.Children.Add (new Label

grid.Children.Add (new Label

grid.Children.Add (new BoxView

grid.Children.Add (new BoxView

grid.Children.Add (new Label

grid.Children.Add (new Label

grid.Children.Add (new Label

grid.Children.Add (new Label

// Build the page.

AbsoluteLayout coloca elementos secundarios en ubicaciones específicas en relación con

// Create the RelativeLayout

// A Label whose upper-left is centered vertically.

// A Label centered vertically.

// A Label above the centered Label.

// A Label below the centered Label.

// Finish with another on top...

// ...and another on the bottom.

// Build the page.

FlexLayout se basa en el Módulo de diseño de caja flexible CSS, comúnmente conocido

public string Description { set; get; }

public string Image { set; get; }

public int ImageWidth { set; get; }