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=鈥渦tf-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=鈥淩eloj.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)