Está en la página 1de 17

DATA BINDINGS EN XAMARIN

FORMS
El enlace de datos automatiza este trabajo y hace que los controladores de
eventos sean innecesarios. Los enlaces de datos se pueden implementar en
código o en XAML, pero son mucho más comunes en XAML, donde
ayudan a reducir el tamaño del archivo de código subyacente. Al
reemplazar el código de procedimiento en los controladores de eventos con
código declarativo o marcado, la aplicación se simplifica y aclara.

Uno de los dos objetos involucrados en un enlace de datos es casi siempre


un elemento que deriva View y forma parte de la interfaz visual de una
página.

En programas de demostración como los del ejemplo DataBindingDemos ,


los enlaces de datos entre dos Viewderivados a menudo se muestran con
fines de claridad y simplicidad. Sin embargo, se pueden aplicar los mismos
principios a los enlaces de datos entre un Viewobjeto y otros. Cuando se
crea una aplicación utilizando la arquitectura Model-View-ViewModel
(MVVM), la clase con datos subyacentes a menudo se denomina modelo
de vista.

ENLACES BASICOS:

Los enlaces de datos conectan propiedades de dos objetos, denominados


origen y destino. En el código, se requieren dos pasos:

 La BindingContext propiedad del objeto de destino debe establecerse


en el objeto de origen y SetBinding debe llamar al método en el
objeto de destino para enlazar una propiedad de ese objeto a una
propiedad del objeto de origen.
 La propiedad de destino debe ser una propiedad enlazable, lo que
significa que el objeto de destino debe derivar de BindableObject. La
documentación en línea Xamarin.Forms indica qué propiedades son
propiedades enlazables. Una propiedad de Label , como Text , está
asociada a la propiedad TextPropertyenlazable .

En el marcado, también debe realizar los mismos dos pasos necesarios en el


código, salvo que la Binding extensión de marcado tiene lugar
la SetBinding llamada y la Binding clase .

1
Sin embargo, al definir enlaces de datos en XAML, hay varias maneras de
establecer el BindingContext del objeto de destino. A veces se establece
desde el archivo de código subyacente, a veces mediante
una StaticResource extensión de marcado o x:Static y, a veces, como
contenido de etiquetas de elemento de BindingContext propiedad.

Los enlaces se usan con más frecuencia para conectar los objetos visuales
de un programa con un modelo de datos subyacente, normalmente en una
realización de la arquitectura de la aplicación MVVM (Model-View-
ViewModel)

ENLACE DE VISTA A VISTA :


Puede definir enlaces de datos para vincular propiedades de dos
vistas en la misma página. En este caso, se establece
el BindingContext del objeto de destino mediante la x:
Reference extensión de marcado.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamlSamples.SliderBindingsPage"
Title="Slider Bindings Page">

<StackLayout>
<Label Text="ROTATION"
BindingContext="{x:Reference Name=slider}"
Rotation="{Binding Path=Value}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

<Slider x:Name="slider"
Maximum="360"
VerticalOptions="CenterAndExpand" />

<Label BindingContext="{x:Reference slider}"


Text="{Binding Value, StringFormat='The angle is {0:F0} degrees'}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>

2
MODO DE ENCUADERNACION:
Una sola vista puede tener enlaces de datos en varias de sus propiedades.
Sin embargo, cada vista solo puede tener un BindingContext, por lo que
varios enlaces de datos en esa vista deben hacer referencia a todas las
propiedades del mismo objeto.
La solución a este y otros problemas implica la Mode propiedad, que se
establece en un miembro de la BindingMode enumeración:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamlSamples.SliderTransformsPage"
Padding="5"
Title="Slider Transforms Page">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- Scaled and rotated Label -->


<Label x:Name="label"
Text="TEXT"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

<!-- Slider and identifying Label for Scale -->


<Slider x:Name="scaleSlider"
BindingContext="{x:Reference label}"

3
Grid.Row="1" Grid.Column="0"
Maximum="10"
Value="{Binding Scale, Mode=TwoWay}" />

<Label BindingContext="{x:Reference scaleSlider}"


Text="{Binding Value, StringFormat='Scale = {0:F1}'}"
Grid.Row="1" Grid.Column="1"
VerticalTextAlignment="Center" />

<!-- Slider and identifying Label for Rotation -->


<Slider x:Name="rotationSlider"
BindingContext="{x:Reference label}"
Grid.Row="2" Grid.Column="0"
Maximum="360"
Value="{Binding Rotation, Mode=OneWayToSource}" />

<Label BindingContext="{x:Reference rotationSlider}"


Text="{Binding Value, StringFormat='Rotation = {0:F0}'}"
Grid.Row="2" Grid.Column="1"
VerticalTextAlignment="Center" />

<!-- Slider and identifying Label for RotationX -->


<Slider x:Name="rotationXSlider"
BindingContext="{x:Reference label}"
Grid.Row="3" Grid.Column="0"
Maximum="360"
Value="{Binding RotationX, Mode=OneWayToSource}" />

<Label BindingContext="{x:Reference rotationXSlider}"


Text="{Binding Value, StringFormat='RotationX = {0:F0}'}"
Grid.Row="3" Grid.Column="1"
VerticalTextAlignment="Center" />

<!-- Slider and identifying Label for RotationY -->


<Slider x:Name="rotationYSlider"
BindingContext="{x:Reference label}"
Grid.Row="4" Grid.Column="0"
Maximum="360"
Value="{Binding RotationY, Mode=OneWayToSource}" />

<Label BindingContext="{x:Reference rotationYSlider}"


Text="{Binding Value, StringFormat='RotationY = {0:F0}'}"
Grid.Row="4" Grid.Column="1"
VerticalTextAlignment="Center" />
</Grid>
</ContentPage>

4
FORMATO DE CADENA:

Al mostrar cadenas en código, la herramienta más poderosa es


el String.Formatmétodo estático. La cadena de formato incluye códigos de
formato específicos para varios tipos de objetos y puede incluir otro texto
junto con los valores que se están formateando.

La propiedad StringFormat
Esta función se traslada a los enlaces de datos: establece
la StringFormatpropiedad de Binding(o la StringFormatpropiedad de
la Bindingextensión de marcado) en una cadena de formato .NET estándar
con un marcador de posición:

<Slider x:Name="slider" />


<Label Text="{Binding Source={x:Reference slider},
Path=Value,
StringFormat='The slider value is {0:F2}'}" />

Observe que la cadena de formato está delimitada por caracteres de


comillas simples para ayudar al analizador XAML a evitar tratar las llaves
como otra extensión de marcado XAML.

La StringFormatpropiedad solo tiene sentido cuando la propiedad de


destino es de tipo stringy el modo de enlace es OneWayo TwoWay. Para
enlaces bidireccionales, StringFormatsolo se aplica a valores que pasan del
origen al destino.

5
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard"
x:Class="DataBindingDemos.StringFormattingPage"
Title="String Formatting">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="BoxView">
<Setter Property="Color" Value="Blue" />
<Setter Property="HeightRequest" Value="2" />
<Setter Property="Margin" Value="0, 5" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Margin="10">
<Slider x:Name="slider" />
<Label Text="{Binding Source={x:Reference slider},
Path=Value,
StringFormat='The slider value is {0:F2}'}" />
<BoxView />
<TimePicker x:Name="timePicker" />
<Label Text="{Binding Source={x:Reference timePicker},
Path=Time,
StringFormat='The TimeSpan is {0:c}'}" />
<BoxView />
<Entry x:Name="entry" />
<Label Text="{Binding Source={x:Reference entry},
Path=Text,
StringFormat='The Entry text is &quot;{0}&quot;'}" />
<BoxView />
<StackLayout BindingContext="{x:Static sys:DateTime.Now}">
<Label Text="{Binding}" />
<Label Text="{Binding Path=Ticks,
StringFormat='{0:N0} ticks since 1/1/1'}" />
<Label Text="{Binding StringFormat='The {{0:MMMM}} specifier produces
{0:MMMM}'}" />
<Label Text="{Binding StringFormat='The long date is {0:D}'}" />
</StackLayout>
<BoxView />
<StackLayout BindingContext="{x:Static sys:Math.PI}">
<Label Text="{Binding}" />
<Label Text="{Binding StringFormat='PI to 4 decimal points = {0:F4}'}" />
<Label Text="{Binding StringFormat='PI in scientific notation = {0:E7}'}" />
</StackLayout>
</StackLayout>
</ContentPage>

6
RUTA VINCULANTE:

En todos los ejemplos anteriores de enlace de datos, la Path propiedad de


la Bindingclase se ha establecido en una única propiedad. De hecho, es
posible establecerlo Pathen una subpropiedad o en un miembro de una
colección.

La Timepropiedad es de tipo TimeSpan, que tiene


una TotalSecondspropiedad. Las
propiedades Timey TotalSecondssimplemente están relacionadas con un
punto.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:globe="clr-namespace:System.Globalization;assembly=netstandard"
x:Class="DataBindingDemos.PathVariationsPage"
Title="Path Variations"
x:Name="page">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="FontSize" Value="Large" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Margin="10, 0">
<TimePicker x:Name="timePicker" />

<Label Text="{Binding Source={x:Reference timePicker},


Path=Time.TotalSeconds,
StringFormat='{0} total seconds'}" />

7
<Label Text="{Binding Source={x:Reference page},
Path=Content.Children.Count,
StringFormat='There are {0} children in this StackLayout'}" />

<Label Text="{Binding Source={x:Static globe:CultureInfo.CurrentCulture},


Path=DateTimeFormat.DayNames[3],
StringFormat='The middle day of the week is {0}'}" />
<Label>
<Label.Text>
<Binding Path="DateTimeFormat.DayNames[3]"
StringFormat="The middle day of the week in France is {0}">
<Binding.Source>
<globe:CultureInfo>
<x:Arguments>
<x:String>fr-FR</x:String>
</x:Arguments>
</globe:CultureInfo>
</Binding.Source>
</Binding>
</Label.Text>
</Label>
<Label Text="{Binding Source={x:Reference page},
Path=Content.Children[1].Text.Length,
StringFormat='The second Label has {0} characters'}" />
</StackLayout>
</ContentPage>

CONVERTIDORES DE VALORES VINCULANTES:

Los enlaces de datos normalmente transfieren datos de una propiedad de


origen a una propiedad de destino y, en algunos casos, de la propiedad de
destino a la propiedad de origen.

LA INTERFAZ IVALUECONVERTER
8
Suponga que desea definir un enlace de datos donde la propiedad de
origen es de tipo int pero la propiedad de destino es un
archivo bool. Desea que este enlace de datos produzca un false valor
cuando el origen del número entero sea igual a 0, y true en caso
contrario.
public class IntToBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object
parameter, CultureInfo culture)
{
return (int)value != 0;
}

public object ConvertBack(object value, Type targetType, object


parameter, CultureInfo culture)
{
return (bool)value ? 1 : 0;
}
}

Establece una instancia de esta clase como Converter propiedad de


la Bindingclase o como Converter propiedad de la Bindingextensión
de marcado.

Si el enlace de datos también incluye


una StringFormatconfiguración, se invoca el convertidor de valores
antes de que el resultado se formatee como una cadena.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DataBindingDemos"
x:Class="DataBindingDemos.EnableButtonsPage"
Title="Enable Buttons">
<ContentPage.Resources>
<ResourceDictionary>
<local:IntToBoolConverter x:Key="intToBool" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Padding="10, 0">
<Entry x:Name="entry1"
Text=""
Placeholder="enter search term"
VerticalOptions="CenterAndExpand" />
<Button Text="Search"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsEnabled="{Binding Source={x:Reference entry1},
Path=Text.Length,
Converter={StaticResource intToBool}}" />

9
<Entry x:Name="entry2"
Text=""
Placeholder="enter destination"
VerticalOptions="CenterAndExpand" />
<Button Text="Submit"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsEnabled="{Binding Source={x:Reference entry2},
Path=Text.Length,
Converter={StaticResource intToBool}}" />
</StackLayout>
</ContentPage>

Si se utiliza un convertidor de valores en varias páginas de su


aplicación, puede crear una instancia del mismo en el diccionario de
recursos en el archivo App.xaml .

La página Habilitar botones demuestra una necesidad común cuando


se Button realiza una operación basada en el texto que el usuario
escribe.

ENLACES RELATIVOS:

Los enlaces relativos proporcionan la capacidad de establecer el origen de


enlace en relación con la posición del objetivo de enlace. Se crean con
la RelativeSourceextensión de marcado y se establecen
como Sourcepropiedad de una expresión vinculante.

La RelativeSourceextensión de marcado es compatible con


la RelativeSourceExtensionclase, que define las siguientes propiedades:

10
 Mode, de tipo RelativeBindingSourceMode, describe la
ubicación del origen de enlace en relación con la posición del
destino de enlace.
 AncestorLevel, de tipo int, un nivel ancestral opcional a
buscar, cuando la Modepropiedad
es FindAncestor. Una AncestorLevelde nomite n-1instancias
de AncestorType.
 AncestorType, de tipo Type, el tipo de antepasado a buscar,
cuando la Modepropiedad es FindAncestor.

RESERVAS VINCULANTES:

A veces, los enlaces de datos fallan porque el origen del enlace no se puede
resolver o porque el enlace se realiza correctamente pero devuelve un null
valor. Si bien estos escenarios se pueden manejar con convertidores de
valores u otro código adicional, los enlaces de datos se pueden hacer más
sólidos definiendo valores alternativos para usar si el proceso de enlace
falla. Esto se puede lograr definiendo las propiedades FallbackValue
y TargetNullValue en una expresión vinculante. Debido a que estas
propiedades residen en la BindingBase clase, se pueden usar con enlaces,
enlaces múltiples, enlaces compilados y con la Binding extensión de
marcado.

Definición de un valor de reserva

La FallbackValue propiedad permite definir un valor alternativo que


se utilizará cuando no se pueda resolver el origen del enlace

En lugar de definir FallbackValue valores de propiedad en línea, se


recomienda definirlos como recursos en un
archivo ResourceDictionary. La ventaja de este enfoque es que
dichos valores se definen una vez en una única ubicación y son más
fácilmente localizables.

11
ENLACES MULTIPLES

Los enlaces múltiples brindan la capacidad de adjuntar una colección


de Binding objetos a una única propiedad de destino de enlace. Se crean
con la MultiBinding clase, que evalúa todos sus Binding objetos y devuelve
un valor único a través de una IMultiValueConverter instancia
proporcionada por su aplicación. Además, MultiBindingre evalúa todos
sus Binding objetos cuando cambia alguno de los datos vinculados.

La MultiBindingclase define las siguientes propiedades:

 Bindings, de tipo IList<BindingBase>, que representa la


colección de Bindingobjetos dentro de la MultiBindingi
nstancia.
 Converter, de tipo IMultiValueConverter, que representa el
convertidor que se utilizará para convertir los valores de origen
hacia o desde el valor de destino.
 ConverterParameter, de tipo object, que representa un
parámetro opcional para pasar al archivo Converter.

La Bindings propiedad es la propiedad de contenido de la MultiBinding


clase y, por lo tanto, no es necesario establecerla explícitamente desde
XAML.

Además, la MultiBinding clase hereda las siguientes propiedades de


la BindingBase clase:

 FallbackValue, de tipo object, que representa el valor que se


utilizará cuando el enlace múltiple no puede devolver un valor.
 Mode, de tipo BindingMode, que indica la dirección del flujo
de datos del enlace múltiple.
 StringFormat, de tipo string, que especifica cómo formatear el
resultado del enlace múltiple si se muestra como una cadena.
 TargetNullValue, de tipo object, que representa el valor que se
utiliza en el destino cuando el valor del origen es null.

A MultiBinding debe utilizar a IMultiValueConverter para producir un


valor para el destino de enlace, en función del valor de los enlaces de
la Bindings colección.

Definir un IMultiValueConverter
La IMultiValueConverter interfaz permite aplicar lógica
personalizada a un archivo MultiBinding. Para asociar un
12
convertidor con MultiBinding, cree una clase que implemente
la IMultiValueConverterinterfaz y luego implemente los
métodos Converty ConvertBack:
public class AllTrueMultiConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo
culture)
{
if (values == null || !targetType.IsAssignableFrom(typeof(bool)))
{
return false;
// Alternatively, return BindableProperty.UnsetValue to use the binding
FallbackValue
}

foreach (var value in values)


{
if (!(value is bool b))
{
return false;
// Alternatively, return BindableProperty.UnsetValue to use the binding
FallbackValue
}
else if (!b)
{
return false;
}
}
return true;
}

public object[] ConvertBack(object value, Type[] targetTypes, object parameter,


CultureInfo culture)
{
if (!(value is bool b) || targetTypes.Any(t => !t.IsAssignableFrom(typeof(bool))))
{
// Return null to indicate conversion back is not possible
return null;
}

if (b)
{
return targetTypes.Select(t => (object)true).ToArray();
}
else
{
// Can't convert back from false because of ambiguity
return null;
}
}
}

13
El ConvertBackmétodo convierte un destino de enlace en los valores
de enlace de origen. Este método acepta cuatro argumentos:

 value, de tipo object, es el valor que produce el objetivo


de enlace.
 targetTypes, de tipo Type[], es la matriz de tipos a los
que se va a convertir. La longitud de la matriz indica el
número y los tipos de valores que se sugieren para que
devuelva el método.
 parameter, de tipo object, es el parámetro del convertidor
a utilizar.
 culture, de tipo CultureInfo, es la cultura a utilizar en el
convertidor.

El ConvertBackmétodo devuelve una matriz de valores, de


tipo object, que se han convertido del valor de destino a los valores
de origen. Este método debería devolver:

 BindableProperty.UnsetValueen la posición ipara indicar


que el convertidor no puede proporcionar un valor para el
enlace de origen en el índice iy que no se debe establecer
ningún valor en él.
 Binding.DoNothingen la posición ipara indicar que no se
debe establecer ningún valor en el enlace de origen en el
índice i.
 Null para indicar que el convertidor no puede realizar la
conversión o que no admite la conversión en esta
dirección.

LA INTERFAS DE COMANDO

La interfaz de comandos proporciona un enfoque alternativo para


implementar comandos que se adapta mucho mejor a la arquitectura
MVVM. El ViewModel en sí puede contener comandos, que son métodos
que se ejecutan como reacción a una actividad específica en la Vista, como
un Buttonclic. Los enlaces de datos se definen entre estos comandos y el
archivo Button.

Para permitir un enlace de datos entre a Button y View Model, Button


define dos propiedades:

 Command de tipo System.Windows.Input.ICommand


 CommandParameter de tipo Object

14
Para usar la interfaz de comando, debe definir un enlace de datos que tenga
como destino la Command propiedad de Button. Puede
configurar CommandParameter datos arbitrarios para distinguir entre varios
botones si todos están vinculados a la misma ICommand propiedad en
ViewModel.

Las propiedades Commandy CommandParameter también están definidas


por las siguientes clases:

 MenuItemy por tanto, ToolbarItem, que deriva deMenuItem


 TextCelly por tanto, ImageCell, que deriva deTextCell
 TapGestureRecognizer

La interfaz ICommand
Se define en el espacio de nombres System.Windows.Input y consta de dos
métodos y un evento:
public interface ICommand
{
public void Execute (Object parameter);

public bool CanExecute (Object parameter);

public event EventHandler CanExecuteChanged;


}

Para usar la interfaz de comandos, su ViewModel contiene propiedades de


tipo ICommand:

public ICommand MyCommand { private set; get; }


En la Vista, la Commandpropiedad de a Buttonestá vinculada a esa
propiedad:

<Button Text="Execute command"


Command="{Binding MyCommand}" />

Cuando el usuario presiona Button, Buttonllama al Executemétodo en


el ICommandobjeto vinculado a su Commandpropiedad. Esa es la parte
más simple de la interfaz de comando.

ENLACES COMPILADOS

15
Los enlaces compilados se resuelven más rápidamente que los enlaces
clásicos, lo que mejora el rendimiento del enlace de datos en las
aplicaciones de Xamarin.Forms.

Los enlaces de datos tienen dos problemas principales:

1. No hay validación en tiempo de compilación de expresiones


vinculantes. .
2. No son rentables. Los enlaces se resuelven en tiempo de
ejecución mediante la inspección de objetos de propósito
general, y la sobrecarga de hacerlo varía de una plataforma a
otra.

Los enlaces compilados mejoran el rendimiento del enlace de datos en


aplicaciones de Xamarin.Forms al resolver expresiones de enlace en tiempo
de compilación en lugar de en tiempo de ejecución. .

Para utilizar enlaces compilados, el x:DataTypeatributo debe establecerse


en un literal de cadena o en un tipo que utilice la x:Typeextensión de
marcado. En el momento de la compilación de XAML, cualquier expresión
de enlace no válida se informará como error de compilación. Sin embargo,
el compilador XAML solo informará un error de compilación para la
primera expresión de enlace no válida que encuentre. La compilación de
una expresión vinculante genera código compilado que obtendrá un valor
de una propiedad en el origen y lo establecerá en la propiedad
del destino.eso está especificado en el marcado.

Usar enlaces compilados


La página Selector de color compilado muestra el uso de enlaces
compilados entre las vistas de Xamarin.Forms y las propiedades del
modelo de vista:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DataBindingDemos"
x:Class="DataBindingDemos.CompiledColorSelectorPage"
Title="Compiled Color Selector">
...
<StackLayout x:DataType="local:HslColorViewModel">
<StackLayout.BindingContext>
<local:HslColorViewModel Color="Sienna" />
</StackLayout.BindingContext>
<BoxView Color="{Binding Color}"
... />
<StackLayout Margin="10, 0">
<Label Text="{Binding Name}" />
16
<Slider Value="{Binding Hue}" />
<Label Text="{Binding Hue, StringFormat='Hue = {0:F2}'}" />
<Slider Value="{Binding Saturation}" />
<Label Text="{Binding Saturation, StringFormat='Saturation = {0:F2}'}" />
<Slider Value="{Binding Luminosity}" />
<Label Text="{Binding Luminosity, StringFormat='Luminosity = {0:F2}'}" />
</StackLayout>
</StackLayout>
</ContentPage>

La raíz StackLayout crea una instancia HslColorViewModele


inicializa la Color propiedad dentro de las etiquetas de elementos de
propiedad. Esta raíz StackLayout también define el x:DataType
atributo como el tipo de modelo de vista, lo que indica
que StackLayout se compilará cualquier expresión vinculante en la
jerarquía de vista raíz.

Los elementos, y las vistas heredan el contexto de BoxView


enlace del archivo. Todas estas vistas son objetivos vinculantes que
hacen referencia a las propiedades de origen en el modelo de vista.

Cuando se ejecuta la aplicación por primera vez, los elementos se


configuran desde el modelo de vista en función de la propiedad
inicial BoxView establecida cuando se creó una instancia del modelo
de vista.

A medida que se manipulan los controles deslizantes, los


elementos BoxViewy Label se actualizan en consecuencia.

17

También podría gustarte