Aplicaciones bonitas con Xamarin Forms | Pt. 1

Aplicaciones bonitas con Xamarin Forms

Hace algunos días un developer me escribió y me contaba que Xamarin forms era asombroso que para el las aplicaciones era algo feas en cuanto a la UI, yo le respondí y le dije que si se puede solo que se necesita un poquito más de esfuerzo. Pues en la play store o en cualquiera de las tiendas se engancha mucho mas rápido al futuro usuario de nuestra app si tiene una interfaz atractiva y amigable.

Que necesito para comenzar ?

1) Visual Studio 2015 Community (gratis  o una version superior ) o Visual Studio for MAC.

Vamos a hablar de interfaces bonitas

 

XFParallax by DevsDNA

Super pero que es XFParallax by DevsDNA, pues XFParallax by DevsDNA busca implementar el muy popular efecto efecto Parallax muy famoso en la plataforma ios.

Pero Yhorby que te digo que quiero hacer apps bonitas en Xamarin Forms, calma colega que se puede implementar en Xamarin forms.

Como lo hago?

Pues puedes encontrar un proyecto de ejemplo en su repositorio de Github aquí. 

Con esta librería podemos crear el efecto parallax en las tres plataformas : Android, iOS and Windows – con  Xamarin Forms

Pasamos a explicar como funciona la librería.

1. Primero debemos crear  el codigo responsable para crear  la vista efecto parallax . Creamos un nuevo “ContentView” llamado “ParallaxView”:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DevsDNA.XFParallax.ParallaxView">
  <ContentView.Content>
    <Grid>
      <ContentView x:Name="Header" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"/>
      <ScrollView x:Name="ParentScroll" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ContentView x:Name="Body"/>
      </ScrollView>
    </Grid>
  </ContentView.Content>
</ContentView>

2. EL Code behind para “ParallaxView.xaml.cs” deberia lucir como este :

namespace DevsDNA.XFParallax
{
    using Xamarin.Forms;
 
    public partial class ParallaxView : ContentView
    {
        private double lastScroll = 0;
 
        public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(nameof(HeaderContent), typeof(ContentView), typeof(ParallaxView), coerceValue: HeaderContentCoerceValue);
        public static readonly BindableProperty HeaderScrollSpeedProperty = BindableProperty.Create(nameof(HeaderScrollSpeed), typeof(int), typeof(ParallaxView), 2);
        public static readonly BindableProperty BodyContentProperty = BindableProperty.Create(nameof(BodyContent), typeof(ContentView), typeof(ParallaxView), coerceValue: BodyContentCoerceValue);
        public static readonly BindableProperty BodyMarginProperty = BindableProperty.Create(nameof(BodyMargin), typeof(Thickness), typeof(ParallaxView), new Thickness(0), coerceValue: BodyMarginCoerceValue);
 
        public ParallaxView()
        {
            InitializeComponent();
            ParentScroll.Scrolled += ParentScroll_Scrolled;
        }
 
        public ContentView HeaderContent
        {
            get { return (ContentView)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
 
        public int HeaderScrollSpeed
        {
            get { return (int)GetValue(HeaderScrollSpeedProperty); }
            set { SetValue(HeaderScrollSpeedProperty, value); }
        }
 
        public ContentView BodyContent
        {
            get { return (ContentView)GetValue(BodyContentProperty); }
            set { SetValue(BodyContentProperty, value); }
        }
 
        public Thickness BodyMargin
        {
            get { return (Thickness)GetValue(BodyMarginProperty); }
            set { SetValue(BodyMarginProperty, value); }
        }
        /// 
        <summary>
        /// Important to call this method from Page OnDissapearing to remove event handlers and avoid memory leaks.
        /// </summary>
 
        public void DestroyParallaxView()
        {
            ParentScroll.Scrolled -= ParentScroll_Scrolled;
        }
 
        private static object HeaderContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Header.Content = (ContentView)value;
            }
            return value;
        }
 
        private static object BodyContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Body.Content = (ContentView)value;
 
                if (instance.BodyMargin != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private static object BodyMarginCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is Thickness)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                if (instance.Body != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private void ParentScroll_Scrolled(object sender, ScrolledEventArgs e)
        {
            if (lastScroll == 0)
                lastScroll = e.ScrollY;
            else
            {
                CalculateHeaderTranslation(e);
            }
        }
 
        private void CalculateHeaderTranslation(ScrolledEventArgs e)
        {
            double translation = 0;
 
            if (lastScroll < e.ScrollY) { translation = 0 - ((e.ScrollY / HeaderScrollSpeed)); if (translation > 0)
                    translation = 0;
            }
            else
            {
                translation = 0 + ((e.ScrollY / HeaderScrollSpeed));
                if (translation > 0)
                    translation = 0;
            }
            Header.TranslateTo(Header.TranslationX, translation);
            lastScroll = e.ScrollY;
        }
    }
}

3. Ahora podemos usar Parallax en una de nuestras  Content Pages, como se muestra a  continuación:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DevsDNA.XFParallax.Sample" xmlns:parallax="clr-namespace:DevsDNA.XFParallax;assembly=DevsDNA.XFParallax" x:Class="DevsDNA.XFParallax.Sample.MainPage">
 
  <parallax:ParallaxView x:Name="MainParallax" BodyMargin="0,180,0,0" HeaderScrollSpeed="4">
    <parallax:ParallaxView.HeaderContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue">
        <Image Source="https://www.windowscentral.com/sites/wpcentral.com/files/styles/large/public/field/image/2016/02/microsoft-xamirin.jpg?itok=M_JRL3qE" Aspect="AspectFill" VerticalOptions="Start"/>
      </ContentView>
    </parallax:ParallaxView.HeaderContent> 
    <parallax:ParallaxView.BodyContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="500">
        <ContentView.Margin>
          <!-- need to add specific margin to Windows to show header.-->
          <OnPlatform x:TypeArguments="Thickness" WinPhone="0,180,0,0"/>
        </ContentView.Margin>
        <Grid BackgroundColor="White">
                    <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                </Grid.RowDefinitions>
                     
                <Image HorizontalOptions="Center" VerticalOptions="Start" Margin="0,-50,0,0" HeightRequest="100" WidthRequest="100" Grid.Row="0" Source="http://students.stmaryschs.org.uk/Y9_Scratch_To_VB/images/VS_Logo.png" Aspect="AspectFit"/>
                <Label Text="Xamarin Parallax Effect!" Grid.Row="1" HorizontalOptions="Center"/>
                     
        </Grid>
      </ContentView>
    </parallax:ParallaxView.BodyContent>
  </parallax:ParallaxView>
 
</ContentPage>

4. Ahora en el  code behind invocamos “DestroyParallaxView” en el método llamado  MainParallax en el metodo “OnDisappearing” :

public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
      }
 
      protected override void OnDisappearing()
      {
          base.OnDisappearing();
          // To avoid memory leak:
          MainParallax.DestroyParallaxView();
      }
  }

Y así es como tenemos el hermoso efecto Parrallax en nuestra aplicacion Xamarin Forms.

Quieres verlo funcionando ?

Ejecuta tu codigo y dejame saber que tal !!

Cualquier duda o comentario puedes escribirme o dejar un comentario en la entrada !

Xamarin Diplomado Latinoamérica 3.0

Xamarin Diplomado Latinoamérica 3.0

Microsoft México se anunció una nueva versión del #XamarinDiplomado: Xamarin Diplomado Latinoamérica 3.0, el cual abarcará desde los temas básicos (instalación de herramientas) hasta temas más avanzados, con nuevos speakers y sorpresas.

De momento no se ha dado más información sobre la fecha de inicio y los temas específicos del diplomado, pero ya te puedes registrar, dando clic en el siguiente enlace: —> diplomadoxamarin

Xamarin Diplomado es gratis !

Recuerda que el diplomado es gratuito y que aprenderás muchas cosas nuevas sobre Xamarin, una herramienta que te permite desarrollar aplicaciones móviles multiplataforma que se pueden ejecutar en Android, iOS y Windows 10. Si ya tomaste los diplomados anteriores, continúa con tu formación en esta nueva versión del curso; y si no has comenzado con Xamarin pero te interesa aprender, pues esta es una excelente oportunidad para hacerlo, dado que el curso comenzará desde lo básico. Y en español.

Presentacion Itla Xamarin Fest

Aqui la presentacion Xamarin fest ITLA: Aqui.

 

Aca una Foto del evento, vista parcial; asistieron 41 personas.

Que es el Xamarin Fest ?

Citando del sitio oficial:

Xamarin Fest es una iniciativa de capacitación para Latinoamérica que te permitirán tener el conocimiento para desarrollar y desplegar aplicaciones móviles desde cualquier plataforma con Xamarin, conectarlas con todo el poder que te trae la nube y realizar tus propios proyectos en nuestros talleres prácticos utilizando algunas de las tecnologías más innovadoras del momento.

El tema central del evento fue Introduccion a Xamarin, el cual fue impartido por mi.

Xamarin.Forms | Eliminar margenes entre Grids

Xamarin.Forms es una gran ayuda a la hora de desarrollar aplicaciones para las tres principales plataformas móviles (Windows, iOS y Android), pero aveces si no ponemos atencion se nos escapan algunas cositas. Por ejemplo con los Grids, ya que la interpretación que hace para cada una de las plataformas de los controles es muy distinta y por defecto para iOS y Android deja un espacio entre las Grids.

Porque pasa esto ?

Pues porque no hemos indicado el padding a las celdas.

Como resolverlo ?

Para resolver este “problema” tan sólo tienes que hacer uso de una propiedad de los Grids, “RowSpacing

como muestra el siguiente code

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>;
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Text="Item 1" />
    <Label Grid.Row="1" Text="Item 2" />
    <Label Grid.Row="2" Text="Item 3" />
</Grid>

así solucionamos  el problema en las tres plataformas y conseguiremos prácticamente la “misma” visualización en todas las plataformas; dependiendo de los controles que pongas como contenido de cada una de las celdas del Grid.

Entity Framework: Database First | Mi Experiencia

Saludos, recien me enfrasco en una nueva aventura de desarrollo en el mundo web y he decidido usar Entity Framework y pues quise escribir una entrada sobre mi experiencia usandolo en el enfoque Database First.

Que es Database First?

Es el método que nos permite primero crear la base de datos con sus tablas (y otras estructuras) y luego incorporarlas a la aplicación. Esto es necesario cuando la aplicación que realizamos necesita utilizar una base de datos existente. Otro uso que podemos darle es cuando necesitamos crear la base de datos, pero nos es más cómodo realizar la definición de las estructuras de la base de datos directamente con sentencias SQL, y luego importar los resultados en la aplicación (lo cual en muchos casos es muy útil y necesario, ya que nos permite definir las estructuras SQL tal cual las queremos o las necesitamos) y poder aplicar al 100% todos los tips y orientaciones que podemos encontrar en este blog Base de Datos con SQL Server . Cuando hablamos que podemos crear otras estructuras nos referimos a procedimientos almacenados, funciones, vistas etc…

Una vez sabemos esto vamos a ponerlo en práctica para ello vamos a crear una pequeña base de datos de ejemplo de “estudiantes” la vamos a crear en SQL Server. Las tablas generadas serán:

  • Estudiante
  • Notas
  • Materia

Si eres nuevo y no sabes como crear una base de datos te recomiendo el siguiente video —-> aqui

Para implementar el Database First en nuestra aplicación es muy sencillo, lo primero que vamos a hacer es agregar el archivo de Entity Framework a nuestra aplicación. En este caso particular lo haré en un nuevo proyecto de tipo “Biblioteca de clases”, de forma que quede separada la gestión de los datos de lo que es la aplicación Web en sí (esto implica agregar una referencia desde el proyecto Web al nuevo que estamos creando).

Lo siguiente que haremos es que  agregamos un nuevo elemento de tipo “ADO.NET Entity Data Model”, como se muestra en la imagen. En este caso lo nombraremos EstudiantesDataContext.

 

Una vez que presionemos “Agregar”, seleccionamos la opción “Generar desde la base de datos”. En un caso normal, no deberíamos tener la cadena de conexión configurada en nuestra aplicación, por lo que daremos click en “Nueva conexión…”

Como se ve en la pantalla anterior, debemos ingresar el nombre del servidor, datos de autenticación en caso de que sean necesarios y la base de datos que queremos utilizar. Una vez que presionamos “Aceptar” tendremos la confirmación de la cadena de conexión a utilizar.

El siguiente paso  es seleccionar las estructuras de SQL que queremos incluir en nuestra aplicación. Para incluirlas, solo debemos seleccionar el check correspondiente.
Si trabajamos con nombres de tablas en ingles (este no es el caso del ejemplo), el asistente nos ofrece la opción de poner los nombres de las clases en singular, aunque la tabla esté en plural permitiéndonos que el código resultante quede mucho más limpio y representativo de lo que se está modelando con el mismo.

Al presionar “Aceptar” de esa ventana se hará el mapeo de las estructuras en el DataContext. Para nuestro ejemplo el resultado es el siguiente:

Una vez realizado esto ya podremos utilizar estas clases contenidas en el DataContext. Esto nos permitirá interactuar directamente con nuestra base de datos. Una de las grandes ventajas que presenta este enfoque es la facilidad de mantenimiento que ofrece. En caso de que haya algún cambio en las estructuras, solo debemos abrir el archivo del DataContext (con extensión edmx), hacer click derecho sobre una zona sin clases y seleccionar la opción “Actualizar modelo desde base de datos…”. Allí nos aparecerá una ventana idéntica a la de que usamos cuando agregamos las estructuras en primer término, pudiendo seleccionar que clases actualizar (tanto porque sean nuevas las tablas, se hayan modificado columnas, o se haya eliminado la tabla):

Estos son los pasos necesarios a seguir para implementar esta técnica.

Opinion personal

Como opinión personal, es recomendable para cualquier tipo de proyectos ya que permite definir nuestras tablas (u otras estructuras) en el motor de base de datos y luego importarlas de forma sencilla. Generalmente este es un orden lógico de trabajo cuando comenzamos una nueva aplicación no ir a escribir codigo directamente.
En los proyectos pequeños no tiene desventajas, ya que no requiere mucho tiempo para implementarlo. Y en los proyectos grandes mantiene el orden, ya que distintas personas harán modificaciones simultáneas en la base de datos, las cuales cada uno importará en el DataContext cuando sea necesario y fácilmente puedes integrar a tu equipo un experto en bases de datos al desarrollo del proyecto.

Manejando las Properties C# Like a Ninja | .Net Core | Visual Code

Saludos, que tal volveré acá a escribir un poco como a los inicios del blog. En esta entrada trataremos lo que son las Properties en C#.

Las propiedades nos permiten controlar la accesibilidad de las variables de una clase y es la forma recomendada de acceder a variables desde el exterior en un lenguaje de programación orientado a objetos como C #. En el video Live que realice en Facebook via  streaming, puedes verlo aca si te lo perdiste, vimos el uso de una Properties por primera vez, y el concepto es realmente muy simple.

Una propiedad es como una combinación de una variable y un método –  esta no puede tomar ningún parámetro-, pero es capaz de procesar el valor antes de que se asigne a nuestro devuelto.

Una propiedad consta de 2 partes, un get y un método de set, contenido dentro de la propiedad:

private string color;

public string Color
{
    get{ return color;}
    set{color = value;}
}

El método get debe devolver la variable, mientras que el método set debe asignarle un valor. El ejemplo es tan simple como es posible, pero puede extenderse. Otra cosa que debemos debe saber sobre las Properties es el hecho de que sólo se requiere un método – ya sea get o set. Esto nos permite definir las propiedades de solo lectura y escritura. Aquí hay un ejemplo de cómo utilizar las propiedades:

public string Color
{
    get 
    {  // vuelve el string a minusculas.
        return color.ToLower(); 
    }
    set 
    { 
        if(value == "Rojo")
            color = value; 
        else
            Console.WriteLine("A mi me gustan Rojos !!");
    }
}

Esta propiedad hace que la variable  color se devolverá ahora en minúsculas, ya que aplicamos el método ToLower () antes de devolverlo, y cuando intentamos establecer el color, sólo se aceptará el valor “Rojo”. Claro, este ejemplo no es Waoooo de tan útil, pero muestra el potencial de las propiedades.