Xamarin y otras especias | Charla

Saludos mi buen amigo¬†Cristopher Junior Vivieca Ramos¬†de ¬†viviecar.com¬†me invito a dar una charla en el Instituto Polit√©cnico Padre Segri en Santiago, Rep. Dominicana. donde estuve hablando sobre “Xamarin y otras especias”

Fotos del evento.

Presentación del evento.

Te gustaria que sea ponente en alguna charla ?

Si te gustaria que diera una charla sobre el mismo tema o otras tecnologías Microsoft no dudes en ponerte en contacto conmigo.

Bug DisplayAlert Xamarin.Forms

Solución para Bug DisplayAlert Xamarin.Forms

Disclaimer: Si alguno considera que no es un bug y es mas una mala pr√°ctica por parte de algunos developers dejo aca el link del bug aca.

Bug

Este sucede cuando implementamos DisplayAlert  en Xamarin.Forms  se traduce en dos ventanas emergentes, lo que obviamente no se espera, y este es el bug.

Estoy hablando de este bloque de código:

var resp = await DisplayAlert("","Seguro quieres salir?","Si", "No");
if (resp)
{ 
   //Hacer algo
}

Solucion

Lo que debemos hacer es  invocar el Display Alert  en el hilo de interfaz de usuario principal usando Xamarin.Forms.Device.BeginInvokeOnMainThread. Tenemos que pasar la acción que  ejecutará el DisplayAlert al hilo principal de la UI:

Device.BeginInvokeOnMainThread(new Action(async () =>
  {
       if(await DisplayAlert("", "Seguro quieres salir?", "Si", "No"))
       {
         //Hacer algo
       }
  }));

Que hace la solución?

Esto soluciona el problema, porque ahora estamos invocando el hilo principal de la interfaz de usuario. Nuestra DisplayAlert ahora se ejecuta solo una vez. Así que, sí, por ahora, podemos utilizar esta solución.

Sin embargo, es de esperar, que corrijan el error, por lo que sólo pueden ejecutar sin el método BeginInvokeOnMainThread. Espero que esto les puede ayudar con su desarrollos.

Si tienen algo que a√Īadir, dudas comentarios no duden en escribirme.

Documentacion: https://developer.xamarin.com/api/member/Xamarin.Forms.Device.BeginInvokeOnMainThread/p/System.Action

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.Forms Splashscreen para Android

No es secreto que el inicio de toda aplicación es un Splashscreen ya sea para mostrar el branding o verificar recursos.

Para agregar un Splashscreen en Xamarin Forms a la parte Android yo lo hago de la siguiente forma:

En la parte de la Solución que pertenece a Android vamos y agregamos un nuevo Activity yo siempre le llamo Splashscreen, el código que contendrá es el siguiente :

[Activity(Label = "Splashscreen", MainLauncher = true, NoHistory = true, Theme = "@style/Theme.Splash", 
    ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class SplashScreen : Activity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        var intent = new Intent(this, typeof(MainActivity));
        StartActivity(intent);
      
    }
}

Un poco de explicacion:

 MainLauncher = true 

nos indica que este es el activity que se ejecutara primero.

NoHistory = true

evita que presionando la tecla atr√°s, se vuelva al Splash

 

El código de nuestro MainActivity.cs sera el siguiente:

[Activity(Label = "Splashscreen", Theme="@android:style/Theme.Holo", 
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : AndroidActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        Xamarin.Forms.Forms.Init(this, bundle);
        SetPage(App.GetMainPage());
    }
}

Ahora en el Resources.Drawable.SplashScreen.xml: 

<?xml version="1.0" encoding="utf-8" ?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
   android:src="@drawable/splash_logo"
  android:gravity="center"
  android:layout_gravity="center"/>

Que es donde definimos los elementos gr√°ficos de nuestro splash

Ahora vamos con el Resources.Values.Styles.xml:

 

<resources>
  <style name="Theme.Splash"
    parent="android:Theme">
    <item name="android:windowBackground">
      @drawable/splashscreen
    </item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
  </style>
</resources>

 

Ahora el ejecutar nuestra aplicación el resultado sera similar a este :

splashscreen1

Alguna duda, comentario, error o sugerencia no dudes en escribirme.

 

 

 

 

Codigo fuente de la App Demo #Charla gratuita de Conceptos Fundamentales de #Xamarin en #MundoSQL

Mi buen amigo el MVP Juan Carlos de  MundoSQL me invito a dar una charla online sobre Xamarin,  aqui les dejo el codigo fuente de la demo.

El codigo de main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView1" />
</LinearLayout>

El codigo del MainActivity.cs

using Android.App;
using Android.Widget;
using Android.OS;
using System.Collections.Generic;

namespace dfdd
{
	[Activity(Label = "Lista", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : Activity
	{
		private List<string> mItem;
		private ListView mListView;

		protected override void OnCreate(Bundle savedInstanceState)
		{
			base.OnCreate(savedInstanceState);

			// Set our view from the "main" layout resource
			SetContentView(Resource.Layout.Main);

			mListView = FindViewById<ListView>(Resource.Id.listView1);

			mItem = new List<string>();
			mItem.Add("Naiomi");
			mItem.Add("Jose Miguel");
			mItem.Add("Juan carlos");
			mItem.Add("Luis");
			mItem.Add("Frank ac");
			mItem.Add("JLuis Perez");
			mItem.Add("Jordi");
			mItem.Add("Jose Miguel");
			mItem.Add("Naiomi");
			mItem.Add("Jose Miguel");
			mItem.Add("Juan carlos");
			mItem.Add("Luis");
			mItem.Add("Frank ac");
			mItem.Add("JLuis Perez");
			mItem.Add("Jordi");
			mItem.Add("Jose Miguel");
			ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, mItem);

			mListView.Adapter = adapter;

		
  }
	}
}


Aqui el video de la demo !

Esto es todo por el momento alguna duda, comentario o sugerencia no duden en escribirme.

Errores en Xamarin “Unzipping failed”

En mis inicios con Xamarin, utilice por primera vez Xamarin.Droid y durante la compilación del proyecto recibí errores que casi hacen que tire la toalla, similares a estos :

Error      2             Unzipping failed. Please download https://dl-ssl.google.com/android/repository/android_m2repository_r22.zip and extract it to the C:\Users\User\AppData\Local\Xamarin\Xamarin.Android.Support.Design\23.0.1.3\content directory.                DemoForms.Droid

Error      3             Reason: C:\Users\User\AppData\Local\Xamarin\zips\96659D653BDE0FAEDB818170891F2BB0.zip is not a valid zip file            DemoForms.Droid

 

 Porque sucede esto ?

Cuando compilamos por primera vez nuestro proyecto se descargan de algunas librer√≠as propias de Android, estas librer√≠as se descargan en ficheros ¬†.zip y luego estos ¬†son descomprimidas durante el proceso de compilaci√≥n. Estas librer√≠as se almacenan en el directorio “%LOCALAPPDATA%\Xamarin\zips”.

Todos sabemos¬†Visual Studio no es muy expl√≠cito acerca de lo que est√° haciendo mientras compila y dependiendo de la velocidad ¬†nuestra conexi√≥n a Internet ¬†este proceso puede ser muy lento, esto provoca que en muchas ocasiones esta lentitud causa que cancelemos el proceso de compilacion pensando en que Visual Studio ya no est√° haciendo nada, sin embargo, lo que logramos es que las descargas queden a medias y esos archivos se mantienen da√Īados en el¬†directorio “%LOCALAPPDATA%\Xamarin\zips”.

Solución !

Eliminar de manera manual los archivos da√Īados en el¬†directorio “%LOCALAPPDATA%\Xamarin\zips”.¬†y re-compilar la soluci√≥n ahora si con paciencia esperando a que se descargue todo.

Serie tutorial Xamarin Forms 101 #3

Saludos en esta entrada les compartiré el video donde continua la serie tutorial sobre Xamarin.forms la cual se denomina Xamarin Forms 101
Donde aprenderemos los diferentes modelos de desarrollo de Xamarin.


Si te ha gustado esta Entrada, por favor, compartir y dejar su comentario a continuaci√≥n. Si tienes alguna pregunta, no dudes en enviar aqu√≠. Voy a responder a todas las preguntas! ūüôā .

Seminario desarrollo aplicaciones móviles РXamarin

Saludos en esta entrada les compartir√© el video de el momento de mi participaci√≥n como speaker¬†en ¬†el Seminario Internacional: “Desarrollo de Aplicaciones M√≥viles” hablando sobre #Xamarin. Llevado a cabo en el auditorio principal del edificio de Postgrado de la Sede de la universidad UAPA recinto Santiago.

Seminario desarrollo aplicaciones móviles РXamarin

Si te ha gustado esta Entrada, por favor, compartir y dejar su comentario a continuaci√≥n. Si tienes alguna pregunta, no dudes en enviar aqu√≠. Voy a responder a todas las preguntas! ūüôā .

Introducción a Xamarin Android, guía total

Saludos en esta entrada les compartir√° un video sobre Xamarin Android, una poderosa herramienta de desarrollo de software.

Xamarin Android

Si te ha gustado esta Entrada, por favor, compartir y dejar su comentario a continuaci√≥n. Si tienes alguna pregunta, no dudes en enviar aqu√≠. Voy a responder a todas las preguntas! ūüôā .
Sigue leyendo “Introducci√≥n a Xamarin Android, gu√≠a total”