Durante el proceso de desarrollo de interfaces de usuario dentro de Xamarin.Forms es necesario contar con datos para ayudarnos con el diseño ya que es difícil esperar hasta ejecutar nuestra aplicación para ver cómo se comportarán nuestros controles y en caso de no obtener los resultados deseados detener la aplicación, realizar los cambios necesarios y volver a ejecutar la aplicación.
Ciertamente existen herramientas muy potentes como livexaml (del que seguramente ya habrás leído y del cual @jsuarezruiz tiene un excelente post que te invito a leer) o puedes hacer uso del Xamarin Live Player que se encuentra en preview, pero también tienes como opción el Xamarin.Forms previewer el cual te permite hacer binding con datos en tiempo de diseño.
Para hacer uso de esta característica necesitamos usar una clase como la que se muestra a continuación para definir las propiedades que podremos usar para realizar binding en nuestra interfaz.
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
//TODO: cambiar la implementación para desarrollo y producción
public ImageSource ImageSource => ImageSource.FromFile(ImageUrl);
public string ImageUrl { get; set; }
}
Y una clase con datos estáticos a la cuál haremos binding en un paso posterior.
public static class PeopleData
{
public static List<Person> People { get; set; }
static PeopleData()
{
InitData();
}
private static void InitData()
{
People = new List<Person>()
{
new Person()
{
LastName = "Juárez",
Name = "Raúl",
Id = 1,
ImageUrl = "lorempixel.png"
},
new Person()
{
LastName = "Juárez",
Name = "Luis",
Id = 2,
ImageUrl = "lorempixel.png"
}
};
}
}
Ahora que ya tenemos nuestros fuente de datos estática es necesario que agreguemos el namespace donde se encuentra nuestra clase PeopleData dentro del XAML de nuestro ContenPage.
xmlns:mocks="clr-namespace:CustomDataForDesign.Views.MockData"
Por último hacemos uso de los datos dentro de nuestra página, en este ejemplo haremos binding de los datos en la propiedad ItemsSource de nuestro ListView.
ItemsSource="{x:Static mockdata:PeopleData.People}"
Y listo ya tendremos datos disponibles para trabajar en tiempo de diseño y poder mejorar nuestra productividad usando el Xamarin.Forms previewer.
Espero que te resulte útil este pequeño post.
¡Saludos!
@saturpimentel
