#59 NinjaTips | Xamarin Forms | Laboratorio #1 Creando un App desde 0

Download this episode

Download Video

Description

En este vídeo vamos a retomar nuestras capsulas creando una aplicación desde 0, esta es la primera parte de un laboratorio donde aprenderás como crear apps para iOS , Android y Windows como todo un profesional.

Enlaces útiles

Sorey Bibiana García Zapata
Microsoft MVP Windows Development
XAML Mobile Developer
Blog: http://blog.soreygarcia.me

 

 

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      MaRioBoT

      Hola Sorey. que bueno volver a ver las capsulas de conocimiento. Un Saludo desde Manizales - Colombia.

    • User profile image
      Lufemoru

      Excelente y muy util,

      Muchas gracias por compartir tu conocimiento

    • User profile image
      Carlos​Espinoza

      Excelente laboratorio, espero con ansías el siguiente , muy buen trabajo. Felicitaciones desde Hidalgo Mexico

    • User profile image
      Erickh

      Excelente muchas gracias...

    • User profile image
      PequeQa

      Hola buen día, excelente aporte, me puedes ayudar a solucionar el siguiente error, Por favor :(  me sale al iniciar el proyecto, mucho agradeceré la ayuda.

      Package Installation Error

       

      Could not add all required packages to the project. The following

      packages failed to install from 'C:\PROG RAM FILES (X86)\MICRO SOFT

      VISUAL STUDIO

      14.0\COMMON7\IDE\EXTENSIONS\XAMARIN\XAMARIN\4.0.3.214\Pac

      kages':

       

      Xamarin.Forms.2.0.0.6482 :Could not install package 'Xamarin.Form s

      2.0.0.6482', Vou are trying to install this package into a project that

      targets '.NETFramework,Version=v4.0', but the package does not

      contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.

       

    • User profile image
      Miguel

      Excelente video muy bien explicado. Estuve siguiendo los mismos pasos del Lab pero al momento de compilar me aparecieron los siguientes errores:

      * Error CS0103. The name 'InitializeComponent' does not exist in the current context MyOrders. C:\Dev\XamarinFormsLab\MyOrders\MyOrders\MyOrders\App.xaml.cs
      * Error The type name 'Detail' does not exist in the type 'MasterDetailPage' MyOrders. C:\Dev\XamarinFormsLab\MyOrders\MyOrders\MyOrders\obj\Debug\MyOrders.Pages.MasterPage.xaml.g.cs
      * Error CS0103. The name 'InitializeComponent' does not exist in the current context MyOrders. C:\Dev\XamarinFormsLab\MyOrders\MyOrders\MyOrders\Pages\MasterPage.xaml.cs
      * Error CS1061 'MasterPage' does not contain a definition for 'Navigator' and no extension method 'Navigator' accepting a first argument of type 'MasterPage' could be found (are you missing a using directive or an assembly reference?)

      Como mencione anteriormente, segui todos los pasos igual que el video. La unica diferencia que note fue al momento de crear la propiedad Navigator en el App.Xaml.cs. En vez de crear dicha propiedad como object, VS lo creo como: MasterDetailPage.Detail. De todas maneras, lo sustitui por el NavigationPage como se menciona en el video. No se si eso sea la causa de alguno de los errores de arriba.

      Saludos

    • User profile image
      soreygarcia

      @PequeQa generalmente esos errores extraños son de algo que te falta en la instalacion. Revisa los SDK de Android y que tengas el VS actualizado. Prueba a generar un proyecto sin hacer nada, solo creandolo y dandole play para que descartes que no es algo que has hecho en el proceso y veas que todo este funcionando correctamente.

      @Miguel trata de mirar con calma, como en mis estudiantes presenciales casi siempre es una mayúscula o minúscula, un error de digitación en el XAML, alguna llave o nodo mal cerrado.

    • User profile image
      PequeQa

      @soreygarcia: Hola de hecho es cuando le doy iniciar un proyecto nuevo cuando aparece ese error, le di reparar instalación, tengo instalado VS Community 2015 with update 2, estoy bajando las SDK de android, es un poco tardado el proceso :( pero espero poder corregir ese error...

    • User profile image
      PequeQa

      @soreygarcia: Hola instale todas las SDK, pero el error continua. :(

    • User profile image
      Nanyin

      @PequeQa el error dice que no puedes abrir ese paquete en framework 4.0, por lo que sé, Xamarin ocupa 4.5 en adelante, verifica que tu VS no esté forzando o cargando por default el framework 4.0.

    • User profile image
      Sliver

      Tengo el mismo problema que @pequeQa, lograste obtener una solucion ?

    • User profile image
      Daniel​Monetelli

      Interesante comienzo para crear aplicaciones en Xamarin Forms, yo en general uso Gorilla Player para visualizar en tiempo real XAML. Muy buen aporte Sorey Garcia y Juan Ruiz.

    • User profile image
      eljor2011

      Gracias Sorey muy bueno,

      te agradezco si me puedes ayudar con lo siguiente en los emuladores de Android solo me aparece el de kitkat, no me aparece la versión 6.0 y lo otro es que al ejecutar el proyecto en el emulador no me sale la aplicación el visual se queda ejecutando mucho tiempo.

    • User profile image
      soreygarcia

      @eljor2011: debes iniciar el Visual Studio Android Emulator y descargar el de tu preferencia para que te aparezcan disponibles para probar. Si es en el MAC debes descargar los emuladores que prefieras con el Xamarin Player.

    • User profile image
      Tiago

      Muchas gracias Sorey, for the Real practical work examples :)

    • User profile image
      eljor2011

      Muchas Gracias Sorey, ya instale la versión 6.0 pero ejecuto la App y no la veo en el emulador algun otro consejo te agradezco.

    • User profile image
      Daniel​Monetelli

      @soreygarcia agradecido nuevamente por tus tutoriales, primera vez que escucho de inkscape y me parece una excelente herramienta para crear diseños, es por eso si no es mucha molestia nos brindaras un tutorial o el enlace para crear ese genial boceto que muestras en este videotutorial.

    • User profile image
      eternoi

      Muchísimas gracias!!!

      Y que paciencia y capacidad de resumen de la densidad del asunto, una genialidad este laboratorio y que esté a cargo de Sorey.
      Hasta para responder comentarios típicos después de tal esfuerzo.

      Pronto estaré haciendo mi prototipo de app con tus sugerencias!
      Abrazos!!! n.n

    • User profile image
      Rodrigo Uzcanga

      Excelente laboratorio!

      Para el error de InitializeComponent se soluciona asignando un nombre con la propiedad x:Name a cada elemento de cada página xaml.

      Por ejemplo:
      <Label x:Name="label1" Text="Name" />
      <Button x:Name="button1" Clicked="Click" Text="Click Me" />

      Saludos!

    • User profile image
      Sandor

      Hola Sorey buen día, muy buen video, lo estoy siguiendo al pie de la letra y tengo un problema, todo me funcionó perfecto menos la navegación desde el menu, al ejecutar me arroja el error "Xamarin.Forms.Xaml.XamlParseException: Position 15:16. No Property of name GestureRecognizer found", mi xaml del menu esta así

      <ListView ItemsSource="{Binding Menu}" HasUnevenRows="True">
      <ListView.ItemTemplate>
      <DataTemplate>
      <ViewCell>
      <Grid>
      <Grid.GestureRecognizer>
      <TapGestureRecognizer Command="{Binding NavegadorMenu}">

      </TapGestureRecognizer>
      </Grid.GestureRecognizer>

      <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <Image WidthRequest="50" HeightRequest="50" Source="{Binding Icon}">

      </Image>
      <Label Grid.Column="1" VerticalOptions="Center" XAlign="Center" YAlign="Center" TextColor="{StaticResource MenuFontColor}" Text="{Binding Title}"></Label>

      </Grid>
      </ViewCell>
      </DataTemplate>
      </ListView.ItemTemplate>
      </ListView>


      y mi MenuItemViewModel esta así

      public ICommand NavegadorMenu
      {
      get { return new RelayCommand(Navigate); }
      }

      private void Navigate()
      {
      App.Master.IsPresented = false;
      switch(PageName)
      {
      case "PerfilPage":
      App.Navigator.PushAsync(new Paginas.MainPage());
      break;
      case "MotosPage":
      App.Navigator.PushAsync(new Paginas.MotosPage());
      break;
      default:
      break;
      }
      }


      De antemano muchisimas gracias por tu ayuda y por el Taller :)

    • User profile image
      Juan Pablo Munoz Bouchard

      Saludos desde Chile.

      Primero que todo muchas gracias por el excelente tutorial para xamarin.form en VisualStudio, me aclaro muchas cosas principalmente relacionadas al MVVM, pero tengo una duda.

      Para el caso de los iconos estos se agregar al modulo de Android, pero que pasa cuando ejecute la aplicación de IOS o WMobile. Las hereda ? existe alguna forma de insertar las imágenes y heredarlas a los diferentes módulos.

      De antemano Gracias.

      Me despido atentamente y estaré pendiente a tus comentarios.

    • User profile image
      Juan Pablo Munoz Bouchard

      La problematica comentada anteriormente fue resulta en la segunda parte del laboratorio.

    • User profile image
      Rodrigo Diaz

      Felicitaciones Sorey,Este es uno de los mejores tutoriales que he visto de Xamarin Forms. Esperando pacientemente las otras partes del tutorial (..3, 4, 5, 6, 7.......99) :)

      Gracias.

    • User profile image
      Manuel Oleaga

      Muy buen tutorial la verdad que si!
      Pero tengo solo una queja: no se si es solo a mi pero el click de tu mouse desespera jajajaja XD.

      Pero Muchas Gracias excellent Tutorial!

    • User profile image
      Elqueno

      Excelente tutorial.
      Asi se debe hacer un tutorial CONCISO, PRECISO y ORDENADO.

      Felicitaciones y muchas gracias.
      Saludos desde Chile.

    • User profile image
      Manuel Oleaga

      Hola Sorey, Me gustaria saber pq el menu sale por encima de la barra? Si me podrias ayudar... Gracias!!

    • User profile image
      SandorSMMC

      Hola Sorey, hace unos meses este tutorial me sirvió para iniciar mi primera app en Xamarin Forms, en estos días tratando de agregar notificaciones push lo destrui :(, no logro dejarlo como estaba, decidí iniciar de cero y luego ir pasando los XAMLS para reconstruirlo peero hoy que estoy siguiendo de nuevo tu tutorial no jala la app nueva, al parecer por cambios que hubo en Xamarin, me esta arrojando el error "Android.Views.InflateException: Binary XML file line #1: Error inflating class android.support.v7.widget.Toolbar".

       

      esto ocurre en el base.OnCreate(bundle); del main activity, ademas veo que a diferencia del proyecto anterior (que si habia funcionado) este esta cargando

      TabLayoutResource = Resource.Layout.Tabbar;
      ToolbarResource = Resource.Layout.Toolbar;

       

      Dejo abajo la nueva clase MainActivity, espero pudieras Orientarme ya que estoy algo liado con eso.

      [Activity(Label = "MotoAlerta2017", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
      public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
      {
      protected override void OnCreate(Bundle bundle)
      {
      TabLayoutResource = Resource.Layout.Tabbar;
      ToolbarResource = Resource.Layout.Toolbar;

      base.OnCreate(bundle);

      global::Xamarin.Forms.Forms.Init(this, bundle);
      LoadApplication(new App());
      }
      }

    • User profile image
      Jason

      Hola, he seguido el tutorial al pie de la letra hasta la primera vez que se prueba el código en el emulador, al probarlo en el emulador de android, la pantalla se queda en blanco, el código se compila correctamente pero jamas se muestran las pantallas Main, Menú ni ninguna de estas como se muestra en el tutorial.

      Estoy usando MS visual studio enterprise 2017.

      A que se debe esto?

      Saludos.

    Add Your 2 Cents