[VS4Mac] Samples Importer, acceder a ejemplos nunca fue más fácil

Introducción

A la hora de aprender un lenguaje o framework es ideal contar con una buena documentación, pero, contar con ejemplos complementarios es aún mejor si cabe. Poder ver el código, modificarlo y probar los resultados. Gran parte de la documentación Xamarin cuenta con ejemplos oficiales asociados disponibles en GitHub.  ¿Y si pudiésemos acceder a los ejemplos de forma aún más sencilla?.

Samples Importer

Llega Samples Importer, un nuevo addin para Visual Studio para macOS, que permite acceder a ejemplos oficiales de:

  • Xamarin.Android
  • Xamarin.iOS
  • Xamarin.Forms
  • Xamarin.Mac

Pudiendo ver la información básica de cada ejemplo (título, descripción, plataformas, tags, etc.), filtrar y directamente descargar además de abrir el ejemplo directamente desde el IDE.

¿Cómo instalar?

Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…

Buscamos por “Samples Importer”:

Instalar Samples Importer

Y pulsamos Install…

Tras instalar, lo primero que debemos hacer es configurar el addin. Samples Importer obtiene toda la información de cada ejemplo (así como el código del mismo) desde GitHub con el firme objetivo de ofrecer siempre el ejemplo actualizado a la última. Para ello, es necesario añadir un Personal Access Token en la configuración de Visual Studio:

Configurar el addin

NOTA: Los ejemplos se descargarán automáticamente a una ruta temporal. Sin embargo, es posible elegir una ruta específica en la configuración del addin.

¿Qué aporta?

Desde el menu Tools tenemos acceso a una nueva opción Samples Importer. Tenemos acceso a un nuevo dialogo donde podemos acceder a los ejemplos oficiales de Xamarin (Android, iOS, Xamarin.Forms, macOS). Acceder a un ejemplo, para ver el código y probar es tan sencillo como seleccionar y pulsar el botón Continue:

Usando el addin

Tras pulsar el botón, se descargará el ejemplo seleccionado a la carpeta establecida en la configuración del addin (se utiliza una carpeta temporal en caso de no establecer ninguna carpeta específica).

A continuación, una serie de capturas del addin con diferentes ejemplos:

Lo próximo

Para la próxima versión del addin se incluirán las siguientes mejoras:

  • En la actual versión se buscan ejemplos directamente de las carpetas de repositorios oficiales de ejemplos Xamarin. Sin embargo, la búsqueda se realiza en las carpetas de primer nivel. Existen carpetas con subcarpetas con más ejemplos. Se añadirá una búsqueda en profundidad.
  • Cache. Se incluirá una cache de ejemplos de modo que si, no hay cambios en el repositorio, se utilizará la cache y se evitará la carga haciendo peticiones a GitHub.
  • Se añadirá una opción para cargar ejemplos de la comunidad.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!

Más información

Anuncios

[Xamarin.Forms] Utilizando Bindable Layouts

Introducción

En Xamarin.Forms tenemos un tipo especial de View llamada Layout. Un Layout es un contenedor para otros elementos permitiendo ayudar a posicionar y gestionar el tamaño de los elementos que contiene. En Xamarin.Forms contamos con una gran variedad de Layouts:

Layouts en Xamarin.Forms

Los más utilizados son el StackLayout y el Grid, y suele ser habitual hacer una composición de varios así como utilizarlos para crear controles, etc. Por ejemplo, en ocasiones se utiliza la combinación de ScrollView y StackLayout junto con ContentViews para crear un pequeño listado de elementos horizontal.

Bindable Layout

Con la llegada de Xamarin.Forms 3.5 pre2 nos llega Bindable Layout. En toda clase derivada de Layout<T>, contamos ahora con las siguientes propiedades:

  • ItemsSource: De tipo IEnumerable, soporta el enlace de una colección de datos.
  • ItemTemplate: De tipo DataTemplate, permitirá definir la apariencia visual de cada elemento.
  • ItemTemplateSelector: De tipo ItemTemplateSelector, permite poder elegir entre diferentes templates para cada elemento en base a ciertas condiciones.

Las propiedades resultan familiares conociendo otros controles en Xamarin.Forms como el ListView.

¿Recuerdas el ejemplo que hemos mencionado de listado horizontal?. Utilizando Bindable Layout todo se simplifica.

Uso básico

De la interfaz que estamos replicando, el caso más sencillo es el listado de amigos.

<StackLayout
     Orientation="Horizontal"
     BindableLayout.ItemsSource="{Binding Profile.Friends}">
     <BindableLayout.ItemTemplate>
          <DataTemplate>
          <Grid>
               <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>
                    <imageCircle:CircleImage 
                         Grid.Row="0"
                         Source="{Binding Picture}"
                         Aspect="AspectFit"
                         Style="{StaticResource FriendImageStyle}"/>
                    <Label 
                    Grid.Row="1"
                         Text="{Binding Name}"
                         Style="{StaticResource FriendNameStyle}"/>
               </Grid>
          </DataTemplate>
     </BindableLayout.ItemTemplate>
</StackLayout>

El resultado:

Bindable StackLayout

Sencillo, ¿verdad?.

Utilizando Bindable Layout con DataTemplateSelector

Pasamos a una necesidad más compleja, la galería. En la galería vamos a necesitar mostrar elementos con diferente tamaño.

¿Qué podemos hacer?

Vamos a analizar que necesitamos:

  • Los elementos hacen wrapping.
  • Los elementos se organizan de izquierda a derecha.
  • Hay imágenes de diferente tamaño.

FlexLayout nos permitirá ambas opciones. Definimos el control:

<FlexLayout
     Style="{StaticResource GalleryStyle}" />

Utilizamos un estilo para habilitar el Wrapping, etc. A continuación, vamos a hacer uso de Bindable Layout para evitar definir N imágenes dentro del Layout.

<FlexLayout
     BindableLayout.ItemsSource="{Binding Profile.Gallery}"
     BindableLayout.ItemTemplateSelector="{StaticResource GalleryItemTemplateSelector}"
     Style="{StaticResource GalleryStyle}" />

Al contar con la necesidad de tener imágenes de diferente tamaño en la galería, vamos a utilizar la propiedad ItemTemplateSelector para utilizar diferentes plantillas:

<styles:GalleryItemTemplateSelector x:Key="GalleryItemTemplateSelector">
     <styles:GalleryItemTemplateSelector.MediumGalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}"
                    Aspect="AspectFill"
                    StyleClass="photo, medium"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.MediumGalleryItemTemplate>
     <styles:GalleryItemTemplateSelector.BigGalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}"
                    Aspect="AspectFill"
                    StyleClass="photo, big"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.BigGalleryItemTemplate>
     <styles:GalleryItemTemplateSelector.GalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}" 
                    Aspect="AspectFill"
                    StyleClass="photo"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.GalleryItemTemplate>
</styles:GalleryItemTemplateSelector>

El resultado:

Bindable FlexLayout

Veamos el resultado completo:

El resultado

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

¿Qué te parece Layout Bindable?. Recuerda, puedes dejar cualquier duda o comentario en la entrada!

Más información

[VS4Mac] Asset Studio, addin para la gestión de recursos

Introducción

A la hora de trabajar con nuestros proyectos, contamos con imágenes. A veces serán recursos para la gestión del icono de la aplicación, otras serán recursos a utilizar en la aplicación. En cualquier caso, necesitamos gestionar una serie de acciones:

  • Cuidar el tamaño de las imágenes. Tener un set de imágenes optimizadas es fundamental para garantizar el correcto funcionamiento de la aplicación cuidando el consumo de memoria.
  • Generar la misma imagen en diferentes tamaños. Redimensionar una imagen o crear diferentes imágenes con diferentes tamaños para crear el icono de una aplicación móvil.
  • Ver listado de imágenes usadas (y cuales no), copiar y mover imágenes entre proyectos, etc.

Asset Studio

Asset Studio llega como un addin para Visual Studio para macOS para ofrecer diferentes opciones relacionadas con el tratamiento y gestión de imágenes.

¿Cómo instalar?

Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…

Buscamos por “Asset Studio”:

Instalar Asset Studio

Y pulsamos Install…

¿Qué aporta?

Actualmente, esta primera versión del addin se centra en optimizar las imágenes. Podemos seleccionar una imagen específica, y al hacer clic derecho tendremos la opción

Optimize Image

Tras pulsar la opción, aparecerá un dialogo donde veremos la información básica de la imagen (previsualización, tamaño, peso y nombre) y podremos optimizarla.

Optimizar imagen

Si hacemos clic derecho sobre una carpeta en lugar de una imagen, se buscarán todas las imágenes que contiene la carpeta (y sus subcarpetas).

Optimize Images

Veremos un listado con todas las imágenes con su información básica (nombre y tamaño):

Optimizar imágenes

Veámoslo en funcionamiento:

Optimizar imágenes

Para optimizar las imágenes se utiliza la API de TinyPNG que requiere un API Key para funcionar. Para añadir el API Key se debe acceder a las preferencias de Visual Studio, opción Other > Asset Studio:

API Key

NOTA: Desde las opción de configuración del addin se encontrará un enlace para crear un API Key.

Lo próximo

Para las próximas versiones, se incluirá un gestor de imágenes junto con una opción para generar los iconos necesarios para Android e iOS en diferentes tamaños partiendo desde una imagen.

Crear iconos para iOS y Android

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!

Más información

[VS4Mac] Sweeper, addin para limpiar carpetas output

Introducción

En ocasiones, necesitamos borrar las carpetas de salida (bin y obj) y puede llegar a ser un proceso tedioso y manual sobretodo en caso de contar con muchos proyectos en la solución.

Sweeper

Sweeper llega en forma de addin para Visual Studio para macOS para facilitar el borrado de carpetas bin y obj además de otras carpetas importantes.

¿Cómo instalar?

Accedemos al menu principal de Visual Studio y seleccionamos Extensions…

Buscamos por “Sweeper”:

Instalar Sweeper

Pulsamos Install…

¿Qué aporta?

Con una solución abierta, podemos hacer clic derecho sobre la solución o un proyecto específico y veremos:

Menu

El addin incluye dos opciones extras:

  • Clean /bin and /obj Directories: Limpia las carpetas bin y obj. Al seleccionar una solución limpiará los directorios de salida de cada proyecto.
  • Clean /packages Directory: Limpia la carpeta de paquetes NuGet.

NOTA: Al recompilar la solución se volverán a descargar los paquetes NuGet.

Lo próximo

Para próximas versiones hay ya planeadas nuevas opciones como:

  • Comprimir un proyecto.
  • limpiar y comprimir un proyecto.
  • Comprimir la salida de un proyecto.

¿Qué te parece el addin?, ¿qué te gustaría añadir?. Recuerda, cualquier comentario es bienvenido en la entrada!.

Más información

[VS4Mac] Color Helper, addin con herramientas para trabajar con colores

Introducción

A la hora de desarrollar y crear aplicaciones (móviles, web, escritorio, etc.) trabajamos de forma habitual con colores. La diversidad de formatos o y la necesidad de contar con una serie de colores que compongan una buena paleta nos suelen llevar a buscar herramientas para realizar conversión entre formatos o buscar colores análogos, complementarios, etc.

Color Helper

Color Helper llega en formato de addin para Visual Studio para macOS con el objetivo de contar directamente en el IDE con las herramientas necesarias para convertir colores entre diferentes formatos o buscar esos colores que hagan que la aplicación luzca mejor.

Color Helper

¿Cómo instalar?

Para instalar el addin, accedemos al menu principal de Visual Studio y seleccionamos la opción Extensions… 

Buscamos por “Color Helper”:

Instalar Color Helper

Y pulsamos Install…

¿Qué aporta?

Tras instalar el addin, tendremos dos bloques de funcionalidad diferente.

Por un lado, tenemos un nuevo Pad en Visual Studio llamado Color Converter.

Acceder a Color Converter

Se nos abrirá un nuevo panel lateral:

Color Converter

La idea es tener una opción rápida y directa para poder hacer conversión entre formatos de colores. Actualmente se soporta RGB y Hex.

La otra opción incluida en el addin es Color Blender. La idea es tener algo similar a www.colorblender.com directamente en el IDE. Permite utilizar diferentes algoritmos para ver colores análogos, complementarios, etc.

Color Blender

Se utiliza la librería Color Blender creada por Wiesław Šoltés.

Lo próximo

Hay una gran cantidad de nueva funcionalidad en el Roadmap del addin:

  • Añadir más formatos a la conversión entre colores: HSL, HSV, CMYK.
  • Añadir colores similares en el menu lateral de conversión de colores.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Puedes dejar cualquier pregunta o comentario directamente en la entrada!.

Más información

[VS4Mac] Text Generator, addin para generar texto

Introducción

Creando datos de pruebas para la UI, servicios Fake, etc. solemos tirar de herramientas que generen Dummy Text (Loren ipsum y la gran variedad de variantes).

Text Generator

Text Generator es un addin para Visual Studio para macOS que nos permitirá generar texto directamente desde el IDE.

Generar texto

¿Cómo instalar?

Accedemos al menu principal de Visual Studio y seleccionamos la opción Extensions…

A continuación, buscamos “Text Generator”.

Instalar Text Generator

Y pulsamos Install…

¿Qué aporta?

Al tener un proyecto abierto y un archivo de código, tendremos una nueva opción en el menu Edit.

Generar palabras

Al elegir la opción Generate words… aparecerá un dialogo donde introducir el número de palabras a generar.

Lo próximo

Actualmente (v0.1) sólo se permite generar un número determinado de palabras usando “Loren ipsum”. Para la próxima versión:

  • Menu contextual desde el editor de código.
  • Permitir elegir si generar caracteres, palabras o párrafos.
  • Permitir elegir entre diferentes proveedores para generar el texto. Jeffsum.NET de James Montemagno será una de las opciones añadidas.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

 

Más información

[VS4Mac] SkiaSharp Fiddle

Introducción

SkiaSharp es un sistema de gráficos 2D para .NET y C# que utiliza el motor de gráficos de código abierto Skia usado en los productos de Google. Recientemente, Matthew Leibowitz creo una herramienta llamada SkiaSharpFiddle. Se trata de una herramienta para Windows que permite ver cambios en código SkiaSharp al vuelo ademas de tener resultados de compilación. Fantástica!.

SkiaSharpFiddle

Tras probarla y hablar con Matthew, seria genial tener la herramienta también en macOS, ¿cierto?.

SkiaSharp Fiddle

Llega a Visual Studio para macOS un nuevo addin que añade SkiaSharp Fiddle integrado en Visual Studio.

addin SkiaSharp Fiddle para VS4Mac

¿Cómo instalar?

Para instalar el addin, accedemos al menu principal de Visual Studio y elegimos la opción Extensions…

Buscamos por “SkiaSharp” y encontramos SkiaSharp Fiddle:

Instalar SkiaSharp Fiddle

Tras pulsar Install…, tendremos el addin instalado.

¿Qué aporta?

la principal ventaja del addin es poder previsualizar al vuelo, de forma inmediata código de SkiaSharp. La herramienta es ideal para crear y prototipar al trabajar con SkiaSharp. Además:

  • Podemos personalizar la superfie de dibujado (ancho y alto).
  • Realmente compilamos el código, en caso de error tenemos visualización directa de la línea donde hay error (o errores) junto con el mensaje de error.

Para acceder a la herramienta basta con acceder al menu Tools y seleccionar SkiaSharp Fiddle.

¿Cómo la utilizo?

Lo próximo

Estamos ante la primera versión (v0.1) con la funcionalidad básica.

¿Qué hay pensado para la próxima versión?.

La principal novedad que se incluirá en la próxima versión es IntelliSense en el editor de código. Recibir ayuda a la hora de escribir el código autocompletado y facilitando la escritura. Además se añadirá elección de modo de color y se realizarán correcciones a errores o feedback recibido.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?, ¿qué añadiríais (o quitarías)?. Recuerda, puedes dejar comentarios directamente en la entrada!

Más información

Felices fiestas!

Felices fiestas!

Queridos amigos, celebréis lo que celebréis, os deseo a todos unas felices fiestas, que espero que podáis compartir con vuestros familiares y amigos.

Felices fiestas!

Para el 2019

Para el próximo año os deseo a todos salud, trabajo y que sea un gran año que os permita cumplir todos vuestros objetivos y sueños. Este 2018 ha sido un año donde he podido aprender y profundizar en grandes tecnologías, he conocido a gente excelente, he participado en grandes proyectos (muchos Open Source), he podido asistir/participar en grandes eventos e incluso he tenido un cambio profesional. Para el próximo año sólo pido poder continuar aprendiendo lo máximo posible para compartir con todos vosotros la mayor cantidad de conocimientos posibles.

Felices fiestas!

[Preview] Primer vistazo a Xamarin.Forms CollectionView

Introducción

Como parte de las novedades que llegan con Xamarin.Forms 4.0 se encuentra el nuevo control CollectionView.

Xamarin.Forms CollectionView

CollectionView llega con el objetivo de mejorar lo ofrecido por el control ListView hasta ahora:

  • Facilitar más opciones como listados horizontales o Grids.
  • Cubrir opciones muy solicitadas (vista para cuando no hay contenido, etc.).
  • Mejorar rendimiento.
  • Etc.

Primeros pasos

Para habilitar CollectionView es necesario utilizar un flag antes de inicializar Xamarin.Forms (recuerda, estamos ante una preview).

global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

Layout básico

Podemos conseguir el mismo Layout de un ListView de forma sencilla. Como ventaja, con CollectionView no es necesario utilizar celdas, es decir, no usaremos ViewCell. Esto tiene un impacto en el rendimiento, sobretodo en Android, pero manteniendo la estructura y Layout del ListView.

<CollectionView 
     ItemsSource="{Binding Monkeys}">
     <CollectionView.ItemTemplate>
          <DataTemplate>
               <Grid 
                    HeightRequest="48">
                    <Label 
                         Text="{Binding Name}"
                         FontSize="18"
                         VerticalOptions="Center"/>
               </Grid>
          </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

El resultado:

Layout básico

Fíjate que usamos un DataTemplate sin necesidad de ViewCell!.

Listas horizontales

Por defecto, el CollectionView utilizar un layout lineal. Esto quiere decir que se pueden hacer listas verticales pero…también horizontales!.

El control CollectionView cuenta con la propiedad ItemsLayout. Podemos establecer esta propiedad a una nueva instancia de GridItemsLayout que cuenta con una propiedad Orientation para definir la orientación.

<CollectionView.ItemsLayout>
     <GridItemsLayout
          Orientation="Horizontal" />
</CollectionView.ItemsLayout>

El resultado:

Listas horizontales

Carousel

Algo similar pero más complejo, un Carousel. Contar con un elemento scrollable pero navegando de elemento en elemento. Contamos con un control llamado CarouselView, un control nuevo basado en CollectionView, que podemos utilizar para conseguir el formato clásico de “carta” y paso de elemento a elemento:

<CarouselView 
     ItemsSource="{Binding Monkeys}">
     <CarouselView.ItemsLayout>
          <GridItemsLayout
               Orientation="Horizontal" 
               SnapPointsAlignment="Center" 
               SnapPointsType="Mandatory"/>
     </CarouselView.ItemsLayout>
</CarouselView>

El resultado:

Carousel

Una de las características más interesantes que tenemos disponible es la posibilidad de controlar el comportamiento y alineación de cada elemento al hacer el desplazamiento. Lo conseguimos con las propiedades SnapPointsType y SnapPointsAlignment.

Grid

Por defecto, CollectionView utiliza un layout lineal. Es decir, por defecto podemos hacer listas verticales u horizontales. Como ya vimos previamente, con la propiedad ItemsLayout podemos modificar el comportamiento del Layout.

<CollectionView.ItemsLayout>
     <GridItemsLayout
          Orientation="Vertical"
          Span="2"/>
</CollectionView.ItemsLayout>

Utilizando GridItemsLayout podemos controlar la orientación con la propiedad Orientation y con la propiedad Span el número de elementos por fila o columna.

Grid Layout

Vista cuando no hay contenido

¿Qué ocurre cuando ItemsSource no tiene elementos?. Probablemente, hasta ahora con el ListView has jugado con paneles y visibilidad para dar feedback al usuario ante esta situación. CollectionView viene a mejorar esto. Podemos utilizar la propiedad EmptyView para mostrar cualquier contenido en caso de tener elementos.

<CollectionView 
     ItemsSource="{Binding Monkeys}">
     <CollectionView.EmptyView>
          <Grid>
          <Label 
               Text="No items"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
          </Grid>
     </CollectionView.EmptyView>
</CollectionView>

El resultado:

Sin contenido

Sencillo, ¿verdad?.

Tienes el ejemplo disponible en GitHub:

Ver GitHub¿Qué te parece?, ¿qué te resulta más interesante?. Recuerda, puedes dejar comentarios en la entrada!.

Más información

[Preview] Primer vistazo a Xamarin.Forms Visual

Introducción

A la hora de desarrollar aplicaciones multiplataforma, buscamos llegar a diferentes plataformas cada una de ellas con sus propias guías de estilo, controles e idiosincrasia. Sin embargo, en ocasiones como desarrolladores móviles buscamos conseguir el mismo aspecto. Con Xamarin.Forms, a pesar de contar con una capa de abstracción en la capa de UI permitiendo definir la interfaz una única vez, creamos aplicaciones nativas. Es decir, utilizando Xamarin.Forms utilizamos los controles nativos de cada plataforma. Para conseguir un mismo aspecto necesitamos utilizar Custom Renderers o efectos en ocasiones.

Xamarin.Forms Visual

Con Xamarin.Forms 4.0-pre1 nos llega una nueva forma de indicar una forma de renderizar los controles nativos con Visual.

Cuando utilizamos Visual, se utiliza el renderizado personalizado en cada plataforma en lugar del renderizado predeterminado.

NOTA: Utilizando Visual seguimos utilizando controles 100% nativos.

Para establecer el uso de Visual, utilizaremos la propiedad Visual:

<ContentPage 
     Visual="Material">

</ContentPage>

La propiedad Visual esta disponible en la clase VisualElement. Cualquier elemento hijo de otro heredará el valor de la propiedad y modificará su forma de renderizar. Por este motivo, si establecemos Visual a nivel de ContentPage aseguramos que cualquier elemento de la página utilizará el nuevo sistema de renderizado.

NOTA: El valor de la propiedad Visual puede cambiar en tiempo de ejecución.

Nos llega esta funcionalidad en modo Preview con la apariencia basada en Material Design. Actualmente, en la versión 4.0-pre1 contamos con Material Design en Android e iOS para los siguientes controles:

  • Button
  • Entry
  • Frame
  • ProgressBar

Para utilizar Visual, por ahora (recuerda, estamos ante una Preview) es necesario añadir la siguiente línea:

Forms.SetFlags("Visual_Experimental");

Antes de llamar a Forms.Init. Además, en iOS, es necesario añadir el paquete NuGet Xamarin.iOS.MaterialComponents.

NOTA: Visual requiere API 29 para funcionar en Android.

Veamos un ejemplo:

<Grid
     BackgroundColor="DarkGray">
     <Frame 
          Style="{StaticResource SignInFrameStyle}">
          <StackLayout 
               Style="{StaticResource SignInPanelStyle}">
               <Label 
                    Text="Sign in"
                    Style="{StaticResource SignInTitleStyle}" />
               <Entry 
                    Placeholder="Username" />
               <Entry 
                    IsPassword="True"
                    Placeholder="Password" />
               <Button 
                    Text="Sign in" 
                    Style="{StaticResource SignInButtontyle}"/>
          </StackLayout>
     </Frame>
</Grid>

El resultado:

Tienes el ejemplo disponible en GitHub:

Ver GitHub

Más información