mauroDev.NINJA

Entradas recientes


Comentarios recientes


Archivos


Categorías


Meta


MVVM for Dummies II: Data Binding

Mauricio AndrésMauricio Andrés

Hola y bienvenidos!

Espero que se encuentren súper bien! yo hoy cumplí 23 vueltas al sol (años), y me gustaría inaugurar este nuevo ciclo de vida con esta serie de posts llamados MVVM for Dummies (donde trataré temas desde lo básico a más avanzado), en relación al patrón de arquitectura “Model-View-ViewModel” del cual hablamos en el post anterior de mi amigo el Satur.

El enlazado de datos (Data Binding) es una de las características más importantes que tiene XAML, y que es un punto importante dentro del patrón MVVM, ya que con el Data Binding logramos enlazar datos que son de negocio con la Vista o Presentación de nuestra aplicación, y que pueden ser dinámicos.

Si bien anteriormente hemos visto que en XAML podemos asignar valores a nuestros componentes de manera directa a través de sus propiedades, como por ejemplo a un TextBlock le podemos asignar un valor a través de su propiedad Text.


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="UnTextoCualQuiera"/>
    </Grid>

Éste nunca cambiará su valor, y más aún… ¿qué hago si quiero mostrar un valor dinámicamente, o un valor que está almacenado en una variable? la respuesta es Binding.

Haremos un pequeño ejemplo, en la vista vamos a declarar dos TextBox para ingresar 2 valores y que en nuestro code behind vamos a sumar, luego en la vista mostraremos un TextBlock con los resultados, nos quedaría más o menos así.

Vista MainPage.xaml


    <Page
    x:Class="BindingDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BindingDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{Binding Resultado}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="tb_valor1"
                     Grid.Column="0" 
                     VerticalAlignment="Center" 
                     HorizontalAlignment="Center"
                     FontSize="30"/>
            <TextBox x:Name="tb_valor2"
                     Grid.Column="1"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Center"
                     FontSize="30"/>
        </Grid>
        <TextBlock x:Name="tb_Resultado"
                   Grid.Row="1"
                   Text="Resultado"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="30"
                   />
        
        <Button x:Name="btn_Sumar"
                Content="Sumar" Grid.Row="1" 
                VerticalAlignment="Top" 
                HorizontalAlignment="Center"
                FontSize="30"
                Background="DodgerBlue"
                Foreground="White"
                Click="btn_Sumar_Click"/>
        
        <TextBlock x:Name="tb_ResultadoCopia" 
                   Grid.Row="1"
                   Text="{Binding Text,ElementName=tb_Resultado}"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Center"
                   FontSize="30"
                   Margin="0,0,0,60"/>
    </Grid>
</Page>

CodeBehind MainPage.xaml.cs


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace BindingDemo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void btn_Sumar_Click(object sender, RoutedEventArgs e)
        {
            int resultado = int.Parse(tb_valor1.Text) + int.Parse(tb_valor2.Text);

            tb_Resultado.Text = resultado.ToString();
        }
    }
}

Básicamente lo que hemos hecho es enlazar el resultado de nuestro TextBlock tb_Resultado a nuestro otro TextBlock que se llama tb_ResultadoCopia debido a que su propiedad de Text la Bindeamos al texto que tiene tb_Resultado.

databinding1

Fíjate que lo único que hicimos con el Binding fue decirle que buscara un elemento llamado tb_Resultado, a través de ElementName, y que le asignara el valor de la propiedad Text.

Pero, ¿cómo es que la vista logra encontrar los elementos?, la respuesta esta en los DataContext. Un DataContext de manera sencilla es la fuente de estos, en donde uno le señala a vista dónde ir a buscar los elementos y atributos que se desean enlazar.

Todos los elementos de XAML tienen un DataContext, y funcionan de manera jerárquica. Cuando hacemos Binding, las evaluaciones de expresiones buscan el elemento que hemos señalado en la misma expresión, en nuestro ejemplo sería tb_Resultado, de no resolverlo va a buscar dentro de la propiedad DataContext del elemento, y aun así, si no lo encuentra, irá a buscar al DataContext del padre del elemento, y así sucesivamente.

Ojo que cuando nosotros no señalamos un DataContext, por defecto él se asigna el CodeBehind de nuestra vista.

Más adelante, adentrándonos en la arquitectura MVVM veremos como el DataContext juega un papel crucial cuando nosotros separemos nuestra aplicación en distintas capas, y nuestro DataContext ya no sea el codebehind de la vista, sino una clase totalmente aparte.

Eso es todo por ahora 🙂 más adelante iremos viendo muchas más características de XAML y arquitectura MVVM, por ejemplo, cómo hacer para separar la aplicación en capas, crear nuevos DataContext, cómo conectar la vista con el ViewModel y trabajar con modelos, y cómo mantener la vista de nuestra aplicación con los enlaces de datos actualizados, incluso si estos cambian en el ViewModel.

Recuerda bajar el código de ejemplo aquí abajo y estudiarlo, todas las dudas que tengas por favor envíamelas y yo te las aclaro con gusto.

Muchas gracias por visitarme y comparte esto con tus amigos! 🙂 Hasta pronto!!!

Descarga el Código desde GitHub

I love to make impact through #coding and #technology, I'm a #software #developer and #musician!

Comments 1
  • jaime hernandez
    Posted on

    jaime hernandez jaime hernandez

    Responder Author

    Gracias por compartir los códigos fuentes estoy chequeando ya que recién me estoy iniciando en esto saludos.