Introducción a Xamarin

1

Todo lo que aprenderás sobre Xamarin Forms

2

¿Qué es Xamarin?

Instalación y configuración

3

Requerimientos de hardware y software

4

Introducción a Instalación de Visual Studio .NET y Herramientas

5

Instalación de Visual Studio .NET en Windows

6

Instalación de Visual Studio .NET for Mac

7

Configuración de Xamarin para iOS

Fundamentos de Xamarin.Forms

8

Mi primera app con Xamarin.Forms

9

Xamarin.Forms vs. Xamarin clásico

10

Estrategias para compartir código

Arquitectura de Xamarin.Forms

11

Anatomía de una aplicación

12

Arquitectura de Xamarin.Forms

Sistema de Propiedades Enlazables

13

Sistema de Propiedades Enlazables

14

Usando y creando Propiedades Enlazables

15

Propiedades Adjuntas

Manejo de Eventos

16

Manejo de eventos

17

Ciclo de vida

El Lenguaje XAML

18

¿Qué es XAML?

19

Espacios de Nombres XML

20

Sintaxis de subelementos y de contenido

21

Extensiones de Marcado

22

Recursos

23

XAML compilado

Interfaz de Usuario

24

Contenedores

25

Controles comunes

26

Creación de controles personalizados

27

Estilos

28

Triggers en Estilos

29

Diccionarios Mezclados

30

Transformaciones y Animaciones

31

Navegación

32

DisplayAlert y DisplayActionSheet

33

MessagingCenter

Enlace de Datos

34

Enlace de Datos

35

Interfaces de notificación

36

La clase ObservableCollection<t>

37

Contexto de Enlace de Datos

38

Enlace entre elementos

39

Propiedad StringFormat

40

Plantillas de Datos

41

Convertidores de Valor

Comandos

42

¿Qué son los Comandos?

43

Implementación básica e implementaciones existentes

El Patrón de Diseño Model-View-ViewModel (MVVM)

44

Introducción al patrón de diseño MVVM

45

¿Qué es MVVM?

46

Componentes del Patrón

47

Proyecto: Pomodoro

48

App Pomodoro

49

Continuando con la app Pomodoro

50

Concluyendo nuestra app Pomodoro

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Xamarin.Forms

Curso de Xamarin.Forms

Rodrigo Díaz Concha

Rodrigo Díaz Concha

Contexto de Enlace de Datos

37/50
Recursos

El contexto de enlace de datos se expresa a través de la propiedad BindingContext expuesta en la clase BindableObject. Es bastante útil cuando estamos enlazando múltiples controles a la misma fuente.

Al especificar el BindingContext en un control que posee sub-elementos, ya no es necesario estar indicando recurrentemente el source en cada sub-elemento porque los asume desde el contexto del control padre.

El contexto de enlace a datos funciona de la siguiente manera: la expresión de binding va a comprobar si hay un Source en el mismo elemento, si no lo hay va a buscar si se le ha definido un BindingContext, y si tampoco lo encuentra sube un nivel, hacia el elemento padre para comprobar si allí se se definió algún BindingContext. De esta manera se itera las veces necesarias hasta llegar a la raíz de la aplicación o hasta que encuentre un contexto.

Reto 3
Deberás construir una aplicación de un Reloj utilizando lo aprendido hasta ahora sobre Enlace de Datos. Cada dato actualizable del reloj debe ser un objeto de tipo <Label /> que estará enlazado a una clase llamada Maquinaria.cs que expone una propiedad notificable de tipo int para HH, MM y SS. Se deben actualizar los datos a cada segundo, para lo cual puedes utilizar la clase Timer de System.Timers de .NET, sin codeBehind, todo con enlace de datos.

Aportes 17

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

No logre que actualizara en tiempo real, debe manejarse con alguna tarea asincrona o algo asi

<?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:Reloj2"
             x:Class="Reloj2.MainPage">

    <ContentPage.Resources>
        <local:Maquinaria x:Key="maquina"/>
    </ContentPage.Resources>
    <Grid BindingContext="{Binding Source={StaticResource maquina}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Label Text="{Binding Hora, Mode=OneWay}" Grid.Column="1" VerticalOptions="Center"/>
        <Label Text="{Binding Minuto, Mode=OneWay}" Grid.Column="2" VerticalOptions="Center"/>
        <Label Text="{Binding Segundo, Mode=OneWay}" Grid.Column="3" VerticalOptions="Center"/>

    </Grid>


</ContentPage>

using System;
using System.Collections.Generic;
using System.Text;
using System.Timers;

namespace Reloj2
{
    public class Maquinaria : NotificationObject
    {
        private int hora;

        public int Hora
        {
            get { return hora; }
            set
            {
                hora = value;
                OnPropertyChanged();
            }
        }

        private int minuto;

        public int Minuto
        {
            get { return minuto; }
            set
            {
                minuto = value;
                OnPropertyChanged();
            }
        }

        private int segundo;

        public int Segundo
        {
            get { return segundo; }
            set
            {
                segundo = value;
                OnPropertyChanged();
            }
        }

        public Maquinaria()
        {
            Hora = DateTime.Now.Hour;
            Minuto = DateTime.Now.Minute;
            Segundo = DateTime.Now.Second;
        }

    }
}

Reto
![](
![](
![](
![](
![](

Faltó una clase, no se de donde llegó a este código, esto viene pasando de hace 3 vídeos. Ni siquiera aparece el código en los archivos de la clase, como para entenderlo por último. No sé de donde salió la clase Disco.

alguien tiene el ejemplo del video, es que no me funciono!

Me pasa algo rarisimo y es que al setear la propiedad FontSize en los Label me lanza una excepción en el inicializador y no me deja compilar.
Pero finalmente reto cumplido

Aquí les dejo los archivos del reto, basándome en lo que hizo mvalverdedev

https://github.com/PauZoffoli/RelojXamarin/blob/master/MainPage.xaml

yo lo hice de la siguiente manera y me funcionó perfecto.

MainPage.xaml

<?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:Reloj"
x:Class=“Reloj.MainPage”>

<ContentPage.Resources>
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontAttributes" Value="Bold"/>
        <Setter Property="WidthRequest" Value="50"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="VerticalTextAlignment" Value="Center"/>
    </Style>
    <local:Maquinaria x:Key="maquina">
        
    </local:Maquinaria>
</ContentPage.Resources>

<Grid BindingContext="{Binding Source={StaticResource maquina}}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <Label Text="{Binding Hora, Mode=OneWay}" Grid.Column="0" Grid.Row="1"/>
    <Label Text=":" Grid.Column="1" Grid.Row="1"/>
    <Label Text="{Binding Minutos, Mode=OneWay}" Grid.Column="2" Grid.Row="1"/>
    <Label Text=":" Grid.Column="3" Grid.Row="1"/>
    <Label Text="{Binding Segundos, Mode=OneWay}" Grid.Column="4" Grid.Row="1"/>
</Grid>

</ContentPage>

Maquinaria.cs

using System.Timers;

namespace Reloj
{
public class Maquinaria: NotificationObject
{
string hora;
public string Hora
{
get
{
return hora;
}
set
{
hora = value;
OnPropertyChanged();
}
}

    string minutos;
    public string Minutos
    {
        get
        {
            return minutos;
        }
        set
        {
            minutos = value;
            OnPropertyChanged();
        }
    }

    string segundos;
    public string Segundos
    {
        get
        {
            return segundos;
        }
        set
        {
            segundos = value;
            OnPropertyChanged();
        }
    }

    public Maquinaria()
    {
        Timer t = new Timer();
        t.Elapsed += new ElapsedEventHandler(Time_Elapsed);
        t.Start();
    }
    

    private void Time_Elapsed(object sender, ElapsedEventArgs e)
    {
        Hora = e.SignalTime.Hour.ToString();
        Minutos = e.SignalTime.Minute.ToString();
        Segundos = e.SignalTime.Second.ToString();
    }

}

}

NotificationObject.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Reloj
{
public abstract class NotificationObject : INotifyPropertyChanged
{

    protected void OnPropertyChanged([CallerMemberName] string propertyname = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyname));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}


.
.

.
.

.
.

.
.

MainPage.xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:local="clr-namespace:Reloj"
             x:Class="Reloj.MainPage">

    <ContentPage.Resources>
        <Style TargetType="Label" >
            <Setter Property="FontSize" Value="50" />
        </Style>
        <local:Maquinaria x:Key="maquina" />
    </ContentPage.Resources>

    <StackLayout BindingContext="{Binding Source={StaticResource maquina}}" 
                 Orientation="Horizontal"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">
        <Label Text="{Binding Fecha, Mode=OneWay, StringFormat='{}{0:HH:mm:ss}'}"/>
    </StackLayout>

</ContentPage>```

Maquinaria.cs


using System;
using System.Collections.Generic;
using System.Text;
using System.Timers;

namespace Reloj
{
class Maquinaria : NotificationObject
{
private int hora;

    public int Hora
    {
        get
        {
            return hora;
        }
        set
        {
            hora = value;
            OnPropertyChanged();
        }
    }
    private int minuto;

    public int Minuto
    {
        get
        {
            return minuto;
        }
        set
        {
            minuto = value;
            OnPropertyChanged();
        }
    }
    private int segundo;

    public int Segundo
    {
        get
        {
            return segundo;
        }
        set
        {
            segundo = value;
            OnPropertyChanged();
        }
    }
    public Maquinaria()
    {
        Timer aTimer = new Timer();
        aTimer.Elapsed += Time_Elapsed;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }
    private void Time_Elapsed(object sender, ElapsedEventArgs e)
    {
        Fecha = DateTime.Now;
    }

    private DateTime fecha;

    public DateTime Fecha
    {
        get { return fecha; }
        set { fecha = value; OnPropertyChanged(); }
    }
    
}

}



Reto #3

Reto cumplido!!

Reto:
.
.

.

.

.
.
Resultado
.
.

Resultado del reto:

XAML

C#

    public Maquinaria()
    {
        System.Timers.Timer aTimer = new System.Timers.Timer(1000);
        aTimer.Elapsed += ATimer_Elapsed;
        aTimer.Enabled = true;

    }

    private void ATimer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
        Console.WriteLine("The Elapsed event was raised at {0:HH:mm:ss.fff}",
            e.SignalTime);

        Horas = e.SignalTime.Hour.ToString() + ":";
        Minutos = e.SignalTime.Minute.ToString() + ":";

        if (e.SignalTime.Second < 10)
        {
            Segundos = "0" + e.SignalTime.Second.ToString();
        }
        else
        {
            Segundos = e.SignalTime.Second.ToString();
        }
        //throw new NotImplementedException();
    }

agregando tambien Mode=OnWay a BindigContentex

 <StackLayout BindingContext="{Binding Source={StaticResource datos1}, Mode=OneWay}"
                  Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- Place new controls here -->
        <Label Text="{Binding Hora }" TextColor="Red"/>
        <Label Text=":"/>
        <Label Text="{Binding Minutos}" />
        <Label Text=":"/>
        <Label Text="{Binding Segundos}"/>
    </StackLayout>```

dejo enlace a clase Timers:[](https://docs.microsoft.com/en-us/dotnet/api/system.timers.timer?view=netframework-4.8)