Ejercicio: Reemplazo del código por enlaces de Xamarin.Forms

Creará una versión simplificada de la aplicación educativa de geografía que se centra en banderas de países. En este primer ejercicio, se reemplaza el código de manipulación de datos con enlaces.

Apertura y ejecución de la solución de inicio

Se ha proporcionado una solución de inicio con la que puede trabajar. Contiene una aplicación totalmente funcional que se implementa sin enlace de datos.

  1. Clone o descargue el Repositorio del ejercicio.

    Nota

    Si planea ejecutar y depurar aplicaciones de Xamarin en Android desde Windows, la mejor opción es clonar o descargar el contenido del ejercicio en una ruta de acceso de carpeta corta, como C:\dev\ para evitar que los archivos generados por la compilación superen la longitud de ruta de acceso máxima.

  2. Vaya hasta la carpeta exercise1 > start.

  3. Abra la solución FlagFacts.sln.

  4. Compile y ejecute la aplicación para asegurarse de que funciona. Muestra una única bandera, y también puede editar los detalles de la bandera. El botón Show de la barra de herramientas muestra los detalles del objeto Flag subyacente en un cuadro de alerta.

  5. La solución contiene cuatro proyectos, pero todo el trabajo se realiza en el proyecto FlagFacts. FlagFacts es el código compartido y la capa de interfaz de usuario. También tiene un ensamblado de datos que carga todos los datos de las banderas. Los otros proyectos son los proyectos de host específicos de la plataforma.

  6. Como referencia, este es un resumen de las clases y los archivos con los que va a trabajar.

Archivo Descripción
App.cs Contiene la clase Application para la aplicación de Xamarin.Forms. Esta clase define la página de inicio de la aplicación.
MainPage.xaml(.cs) Define la interfaz de usuario y la lógica de la página inicial. El archivo XAML define la interfaz de usuario mediante marcado. Después, el archivo de código asociado proporciona el comportamiento de la interfaz de usuario.
FlagRepository.cs Esta clase se encuentra en el proyecto FlagData. Contiene los datos de ejemplo con los que se trabaja.
Flag.cs Esta clase también se encuentra en el proyecto FlagData. Define la clase Flag que se usa para todos los objetos procedentes del repositorio.

Creación de un enlace en el código

En este caso, se crea de forma manual un único enlace en el código. Se necesitan tres fragmentos de información: el origen (BindingContext), la ruta de acceso de la propiedad y el destino BindableProperty.

  1. Abra MainPage.xaml.cs y busque el método InitializeData.

  2. Convierta en comentario o elimine las líneas que establecen la propiedad SelectedItem del control Picker country y el controlador de eventos SelectedIndexChanged.

  3. Establezca la propiedad BindingContext del control country en el objeto Flag activo.

  4. Cree un objeto Binding y establezca su elemento Path. Quiere asociar este enlace a la propiedad Country de la bandera.

  5. Por último, agregue un enlace al control country mediante el método SetBinding. Quiere asociar el elemento Binding a la propiedad Picker.SelectedItemProperty.

    private void InitializeData()
    {
        country.ItemsSource = (IList) repository.Countries;
        // country.SelectedItem = CurrentFlag.Country;
        // country.SelectedIndexChanged += (s, e) => CurrentFlag.Country = repository.Countries[country.SelectedIndex];
        country.BindingContext = CurrentFlag;
        country.SetBinding(Picker.SelectedItemProperty,
                           new Binding(nameof(CurrentFlag.Country)));
        ...
    }
    
  6. Ejecute la aplicación y asegúrese de que el selector de país se rellena correctamente. Cambie su valor y, después, seleccione Show. Como se muestra en la captura de pantalla siguiente, debería cambiar el objeto subyacente.

    Captura de pantalla de la aplicación FlagFacts en la que se muestra el elemento emergente de detalles adicionales sobre Nueva Zelanda.

Creación de enlaces en XAML

En este caso, se reemplaza el código de actualización de la interfaz de usuario con enlaces escritos en XAML.

  1. Quite los establecedores de propiedad y los controladores de eventos de los controles siguientes en el código subyacente:

    • country
    • adopted
    • hasShield
    • description

    No modifique el control flagImage por ahora. Requiere algo más de trabajo para enlazar los datos.

  2. Establezca el elemento BindingContext de la página en el objeto Flag del que quiera extraer datos. Establézcalo al final del método InitializeData. En concreto, asegúrese de que se establece después de establecer la propiedad Picker.ItemsSource. Si el selector de país ya no muestra el país al ejecutar la aplicación, es probable que haya establecido ItemsSource después de BindingContext. Esta configuración borra el valor.

    private void InitializeData()
    {
        country.ItemsSource = (IList)repository.Countries;
        // country.SelectedItem = CurrentFlag.Country;
        // country.SelectedIndexChanged += (s, e) => CurrentFlag.Country = repository.Countries[country.SelectedIndex];
        // country.BindingContext = CurrentFlag;
        // country.SetBinding(Picker.SelectedItemProperty, new Binding(nameof(CurrentFlag.Country)));
    
        flagImage.Source = CurrentFlag.GetImageSource();
    
        // adopted.Date = CurrentFlag.DateAdopted;
        // adopted.DateSelected += (s, e) => CurrentFlag.DateAdopted = e.NewDate;
    
        // hasShield.IsToggled = CurrentFlag.IncludesShield;
        // hasShield.Toggled += (s, e) => CurrentFlag.IncludesShield = hasShield.IsToggled;
    
        // description.Text = CurrentFlag.Description;
    
        // Set the binding context
        this.BindingContext = CurrentFlag;
    }
    
  3. Abra MainPage.xaml y agregue etiquetas {Binding PROPERTY_NAME} en cada uno de los controles anteriores para vincular la propiedad adecuada a cada destino. Use el código de C# que ha comentado para determinar las propiedades de origen y de destino adecuadas para cada enlace. Por ejemplo, el elemento country es similar al código siguiente:

    <Picker x:Name="country" SelectedItem="{Binding Country}" />
    

    Este enlace vincula la propiedad SelectedItem del control Picker a la propiedad Country de BindingContext (la bandera).

    <Picker x:Name="country" SelectedItem="{Binding Country}" />
    
    <Label Text="Current Design was Adopted on" FontAttributes="Bold" />
    <DatePicker x:Name="adopted" MinimumDate="01/01/1700" HorizontalOptions="Start"
                Date="{Binding DateAdopted}" />
    
    <Label Text="Has Shield" FontAttributes="Bold" />
    <Switch x:Name="hasShield" IsToggled="{Binding IncludesShield}" />
    
    <Label Text="Fun Fact" FontAttributes="Bold" />
    <Label x:Name="description" Text="{Binding Description}" />
    
  4. Ejecute la aplicación y asegúrese de que todos los campos muestran datos.

  5. Seleccione las flechas de la barra de herramientas para probar otras banderas. Los valores deberían cambiar. Se cambia el elemento BindingContext y por eso se actualizan los valores enlazados.

  6. Cambie el valor de un control. Por ejemplo, seleccione un país nuevo. Después, seleccione Show (Mostrar) para comprobar que el objeto subyacente ha cambiado.