Diseño de Interfaces con Absolute Layout en Visual Studio

Este es mi diseño 😃

¡Una imagen de fondo y 8 Labels!

Code

AbsoluteLayoutSample.xaml
Consideraciones: Roboto-Medium.ttf es la fuente que utilizo.

<AbsoluteLayout HorizontalOptions="CenterAndExpand">
    <Image Source="credit_card"
           AbsoluteLayout.LayoutBounds="0,0,250,150"
           AbsoluteLayout.LayoutFlags="PositionProportional"/>
    <Label Text="1111"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.1,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="2222"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.35,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="3333"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.60,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="4444"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.85,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="1111"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.1,0.12,40,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="6"
           FontAttributes="Bold"/>
    <Label Text="J. Andrade"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.25,0.145,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="12"
           FontAttributes="Bold"/>
    <Label Text="VÁLIDA HASTA"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.52,0.145,20,10"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="4"
           FontAttributes="Bold"/>
    <Label Text="06/23"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.654,0.140,60,20"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="12"
           FontAttributes="Bold"/>
</AbsoluteLayout>

Cada día es mejor!

Asi quedo mi diseño

Hola a todos! Así quedó mi diseño, muy interesante la clase. 

Mi diseño. Ambos, la tarjeta y el cuadro gris fueron hechos con AbsoluteLayout, solo que la tarjeta de fondo usé BoxView.

Hola!, este es mi diseño:  Todo fue hecho con Xaml sin imágenes, si gustan les dejo el código: ` <AbsoluteLayout HorizontalOptions="CenterAndExpand">` ` <Frame BackgroundColor="#00005B"` ` AbsoluteLayout.LayoutBounds="1,300,350,175"` ` CornerRadius="15"` ` BorderColor="#00005B"` ` HasShadow="True">` ` <Frame.Shadow>` ` <Shadow Brush="Black"` ` Offset="20,20"` ` Radius="10"` ` Opacity="0.6"/>` ` </Frame.Shadow>` ` </Frame>` ` ` ` <Label Text="Tarjeta Dígital"` ` TextColor="White"` ` AbsoluteLayout.LayoutBounds="10,310"` ` FontSize="Medium"/>` ` ` ` <Frame Margin="0"` ` Padding="5,1,5,1"` ` BackgroundColor="#0e077d"` ` Opacity="0.7"` ` BorderColor="#2b16c0"` ` AbsoluteLayout.LayoutBounds="40,350">` ` <Label Text="1111"` ` TextColor="White"` ` FontSize="Medium"/>` ` </Frame>` ` ` ` <Frame Margin="0"` ` Padding="5,1,5,1"` ` BackgroundColor="#0e077d"` ` Opacity="0.7"` ` BorderColor="#2b16c0"` ` AbsoluteLayout.LayoutBounds="110,350">` ` <Label Text="2222"` ` TextColor="White"` ` FontSize="Medium"/>` ` </Frame>` ` ` ` <Frame Margin="0"` ` Padding="5,1,5,1"` ` BackgroundColor="#0e077d"` ` Opacity="0.7"` ` BorderColor="#2b16c0"` ` AbsoluteLayout.LayoutBounds="180,350">` ` <Label Text="3333"` ` TextColor="White"` ` FontSize="Medium"/> ` ` </Frame>` ` ` ` <Frame Margin="0"` ` Padding="5,1,5,1"` ` BackgroundColor="#0e077d"` ` Opacity="0.7"` ` BorderColor="#2b16c0"` ` AbsoluteLayout.LayoutBounds="250,350">` ` <Label Text="4444"` ` TextColor="White"` ` FontSize="Medium"/>` ` </Frame>` ` ` ` <Label Text="Daniel Liévano Rodríguez"` ` TextColor="White"` ` AbsoluteLayout.LayoutBounds="20,445"` ` FontSize="Small"/>` ` ` ` ` ` <Label Text="Expired Date"` ` TextColor="White"` ` FontSize="Micro"` ` AbsoluteLayout.LayoutBounds="160,395"/>` ` ` ` <Label Text="09/25"` ` TextColor="White"` ` FontSize="Large"` ` AbsoluteLayout.LayoutBounds="200,395"/>` ` ` ` <Frame BackgroundColor="red"` ` CornerRadius="100"` ` Opacity="0.7"` ` BorderColor="Red"` ` AbsoluteLayout.LayoutBounds="275,420,40,40"` ` ></Frame>` ` <Frame BackgroundColor="Yellow"` ` BorderColor="Yellow"` ` CornerRadius="100"` ` AbsoluteLayout.LayoutBounds="300,420,40,40"` ` Opacity="0.7"></Frame>` ` ` ` <Frame BackgroundColor="silver"` ` BorderColor="Silver"` ` AbsoluteLayout.LayoutBounds="15,390,30,20"` ` CornerRadius="1">` ` ` ` </Frame>` ` </AbsoluteLayout>` `</ContentPage>`

Cuando le agrego el "AbsoluteLayout.LayoutFlags=All" No se ven las lineas, por lo que cambien los BoxView 2,3 y 4 a BackgroundColor="Black" para que se vean 

 😎👍

Asi deje mi diseño 

```js <AbsoluteLayout HorizontalOptions="CenterAndExpand"> <Image Source="creditcard.png" AbsoluteLayout.LayoutBounds="1,0,350,300" AbsoluteLayout.LayoutFlags="PositionProportional"></Image> <Label AbsoluteLayout.LayoutBounds=".10,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".35,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".60,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".85,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".20,.25,200,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="Nombre del dueno fantasma" FontAttributes="Bold"></Label> </AbsoluteLayout> ```


Reto

Agregue un entry para poder digitar los numeros de la tarjeta

Este es mi diseño. 

Aqui mi dieño;