Xamarin.Forms
Diseños de formas de Xamarin

ContentPresenter

Un gestor de diseño para vistas templadas. Se utiliza dentro de un ControlTemplate para marcar donde aparece el contenido que se presentará.

ContentView

Un elemento con un solo contenido. ContentView tiene muy poco uso propio. Su propósito es servir como una clase base para vistas compuestas definidas por el usuario.

XAML

<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>

Código

var contentView = new ContentView {
Content = new Label {
 Text = "Hi, I'm a simple Label inside of a simple ContentView",
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center
}
};

Cuadro

Un elemento que contiene un solo hijo, con algunas opciones de encuadre. Frame tiene un Xamarin.Forms.Layout.Padding predeterminado de 20.

XAML

<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>

Código

var frameView = new Frame {
Content = new Label {
 Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};

ScrollView

Un elemento capaz de desplazarse si su Content requiere.

ScrollView contiene diseños y les permite desplazarse fuera de la pantalla. ScrollView también se usa para permitir que las vistas se muevan automáticamente a la parte visible de la pantalla cuando se muestra el teclado.

Nota: ScrollViews no debe estar anidado. Además, ScrollViews no debe estar anidado con otros controles que proporcionen desplazamiento, como ListView y WebView .

Un ScrollView es fácil de definir. En XAML:

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

La misma definición en el código:

var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red,   HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());

Vista Templated

Un elemento que muestra contenido con una plantilla de control y la clase base para ContentView .

AbsoluteLayout

AbsoluteLayout coloca y dimensiona elementos secundarios proporcionales a su propio tamaño y posición o por valores absolutos. Las vistas secundarias pueden posicionarse y dimensionarse utilizando valores proporcionales o valores estáticos, y los valores proporcionales y estáticos se pueden mezclar.

Una definición de un AbsoluteLayout en XAML se ve así:

<AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
        AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>

El mismo diseño se vería así en código:

Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();

var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

El control AbsoluteLayout en Xamarin.Forms le permite especificar dónde exactamente en la pantalla desea que aparezcan los elementos secundarios, así como su tamaño y forma (límites).

Hay algunas maneras diferentes de establecer los límites de los elementos secundarios en función de la enumeración AbsoluteLayoutFlags que se utilizan durante este proceso. La enumeración AbsoluteLayoutFlags contiene los siguientes valores:

• Todos : Todas las dimensiones son proporcionales.
• AlturaProporcional : La altura es proporcional al diseño.
• Ninguna : no se hace ninguna interpretación.
• PositionProportional : Combina XProportional y YProportional.
• SizeProportional : Combina WidthProportional y HeightProportional.
• WidthProportional : El ancho es proporcional al diseño.
• XProporcional : la propiedad X es proporcional al diseño.
• YProporcional : la propiedad Y es proporcional al diseño.

El proceso de trabajar con el diseño del contenedor AbsoluteLayout puede parecer un poco contradictorio al principio, pero con un poco de uso se volverá familiar. Una vez que haya creado los elementos secundarios, para establecerlos en una posición absoluta dentro del contenedor, deberá seguir tres pasos. Deseará establecer los indicadores asignados a los elementos utilizando el método AbsoluteLayout.SetLayoutFlags () . También querrá usar el método AbsoluteLayout.SetLayoutBounds () para dar a los elementos sus límites. Finalmente, querrá agregar los elementos secundarios a la colección Children. Como Xamarin.Forms es una capa de abstracción entre Xamarin y las implementaciones específicas del dispositivo, los valores posicionales pueden ser independientes de los píxeles del dispositivo. Aquí es donde las banderas de diseño mencionadas anteriormente entran en juego. Puede elegir cómo el proceso de diseño de los controles de Xamarin.Forms debe interpretar los valores que define.

Cuadrícula

Un diseño que contiene vistas dispuestas en filas y columnas.

Esta es una definición típica de Grid en XAML.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
    
  <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>

  <ContentView Grid.Row="0" Grid.Column="1"/>
  <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

La misma Grid definida en el código se ve así:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

Para agregar elementos a la cuadrícula: En XAML :

<Grid>
      
   <--DEFINITIONS...--!>
        
   <ContentView Grid.Row="0" Grid.Column="0"/>
   <ContentView Grid.Row="1" Grid.Column="0"/>
   <ContentView Grid.Row="2" Grid.Column="0"/>

   <ContentView Grid.Row="0" Grid.Column="1"/>
   <ContentView Grid.Row="1" Grid.Column="1"/>
   <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

En el código C #:

var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

Para Height y Width una cantidad de unidades disponibles.

• Automático : ajusta automáticamente el tamaño para adaptarse al contenido de la fila o columna. Especificado como GridUnitType.Auto en C # o como Auto en XAML.
• Proporcional : dimensiona columnas y filas como proporción del espacio restante. Especificado como un valor y GridUnitType.Star en C # y como # * en XAML, siendo # el valor deseado. Especificar una fila / columna con * hará que llene el espacio disponible.
• Absoluto : dimensiona columnas y filas con valores específicos de altura y ancho fijos. Especificado como un valor y GridUnitType.Absolute en C # y como # en XAML, siendo # su valor deseado.

Nota: Los valores de ancho de las columnas se establecen como Auto de forma predeterminada en Xamarin.Forms, lo que significa que el ancho se determina a partir del tamaño de los elementos secundarios. Tenga en cuenta que esto difiere de la implementación de XAML en las plataformas de Microsoft, donde el ancho predeterminado es *, que llenará el espacio disponible.

Disposición relativa

Un Layout que utiliza Constraints para diseñar sus hijos.

RelativeLayout se usa para posicionar y ajustar el tamaño de las vistas en relación con las propiedades del diseño o las vistas de hermanos. A diferencia de AbsoluteLayout , RelativeLayout no tiene el concepto de ancla móvil y no tiene facilidades para posicionar elementos en relación con los bordes inferior o derecho del diseño. RelativeLayout admite elementos de posicionamiento fuera de sus propios límites.

Un RelativeLayout en XAML es así:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

El mismo diseño se puede lograr con este código:

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent ((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {
        return sibling.Y + 20;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

StackLayout

StackLayout organiza las vistas en una línea unidimensional ("stack"), ya sea horizontal o verticalmente. Views en un StackLayout se pueden dimensionar según el espacio en el diseño utilizando las opciones de diseño. El posicionamiento está determinado por el orden en que se agregaron las vistas al diseño y las opciones de diseño de las vistas.

Uso en XAML

<StackLayout>
    <Label Text="This will be on top" />
    <Button Text="This will be on the bottom" />
</StackLayout>

Uso en codigo

StackLayout stackLayout = new StackLayout
{
    Spacing = 0,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = 
    {
        new Label
        {
            Text = "StackLayout",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "stacks its children",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "vertically",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "by default,",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "but horizontal placement",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "can be controlled with",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "the HorizontalOptions property.",
            HorizontalOptions = LayoutOptions.End
        },
        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.",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.End
        },
        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.",
                },
            }
        }
    }
};