A maior rede de estudos do Brasil

Grátis
1800 pág.
indroducao Xammarin.Froms

Pré-visualização | Página 26 de 50

simples de MVVM (como os mostrados aqui), geralmente há um modelo e o padrão envolve
apenas um modo de exibição e ViewModel vinculado com associações de dados.
Aqui está um ViewModel para um clock com apenas uma única propriedade denominada DateTime , mas que
atualizações DateTime propriedade por segundo:
using System;
using System.ComponentModel;
using Xamarin.Forms;
namespace XamlSamples
{
 class ClockViewModel : INotifyPropertyChanged
 {
 DateTime dateTime;
 public event PropertyChangedEventHandler PropertyChanged;
 public ClockViewModel()
 {
 this.DateTime = DateTime.Now;
 Device.StartTimer(TimeSpan.FromSeconds(1), () =>
 {
 this.DateTime = DateTime.Now;
 return true;
 });
 }
 public DateTime DateTime
 {
 set
 {
 if (dateTime != value)
 {
 dateTime = value;
 if (PropertyChanged != null)
 {
 PropertyChanged(this, new PropertyChangedEventArgs("DateTime"));
 }
 }
 }
 get
 {
 return dateTime;
 }
 }
 }
}
ViewModels geralmente implementa o INotifyPropertyChanged interface, o que significa que a classe dispara
um PropertyChanged eventos sempre que for alterado em uma de suas propriedades. O mecanismo de
associação de dados em xamarin. Forms anexa um manipulador a este PropertyChanged evento para ser
notificado quando uma propriedade alterada e manter o destino atualizado com o novo valor.
Um relógio com base nesse ViewModel pode ser tão simple quanto esta:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:local="clr-namespace:XamlSamples;assembly=XamlSamples"
 x:Class="XamlSamples.ClockPage"
 Title="Clock Page">
 <Label Text="{Binding DateTime, StringFormat='{0:T}'}"
 FontSize="Large"
 HorizontalOptions="Center"
 VerticalOptions="Center">
 <Label.BindingContext>
 <local:ClockViewModel />
 </Label.BindingContext>
 </Label>
</ContentPage>
<Label Text="{Binding DateTime.Second, StringFormat='{0}'}" … >
Interativo MVVM
using System;
using System.ComponentModel;
using Xamarin.Forms;
Observe como o ClockViewModel é definido como o BindingContext do Label usando marcas de elemento de
propriedade. Como alternativa, você pode instanciar o ClockViewModel em uma Resources coleção e defina-a
como o BindingContext por meio de um StaticResource extensão de marcação. Ou então, o arquivo code-
behind pode instanciar o ViewModel.
O Binding extensão de marcação no Text propriedade o Label formatos o DateTime propriedade. Aqui está
a exibição:
Também é possível acessar propriedades individuais do DateTime propriedade do ViewModel separando as
propriedades com períodos:
MVVM com muita frequência, é usado com associações de dados bidirecional para uma exibição interativa com
base em um modelo de dados subjacente.
Aqui está uma classe denominada HslViewModel que converte um Color valor em Hue , Saturation , e 
Luminosity valores e vice-versa:
using Xamarin.Forms;
namespace XamlSamples
{
 public class HslViewModel : INotifyPropertyChanged
 {
 double hue, saturation, luminosity;
 Color color;
 public event PropertyChangedEventHandler PropertyChanged;
 public double Hue
 {
 set
 {
 if (hue != value)
 {
 hue = value;
 OnPropertyChanged("Hue");
 SetNewColor();
 }
 }
 get
 {
 return hue;
 }
 }
 public double Saturation
 {
 set
 {
 if (saturation != value)
 {
 saturation = value;
 OnPropertyChanged("Saturation");
 SetNewColor();
 }
 }
 get
 {
 return saturation;
 }
 }
 public double Luminosity
 {
 set
 {
 if (luminosity != value)
 {
 luminosity = value;
 OnPropertyChanged("Luminosity");
 SetNewColor();
 }
 }
 get
 {
 return luminosity;
 }
 }
 public Color Color
 {
 set
 {
 if (color != value)
 {
 color = value;
 OnPropertyChanged("Color");
 Hue = value.Hue;
 Saturation = value.Saturation;
 Luminosity = value.Luminosity;
 }
 }
 get
 {
 return color;
 }
 }
 void SetNewColor()
 {
 Color = Color.FromHsla(Hue, Saturation, Luminosity);
 }
 protected virtual void OnPropertyChanged(string propertyName)
 {
 PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
 }
 }
}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:local="clr-namespace:XamlSamples;assembly=XamlSamples"
 x:Class="XamlSamples.HslColorScrollPage"
 Title="HSL Color Scroll Page">
 <ContentPage.BindingContext>
 <local:HslViewModel Color="Aqua" />
 </ContentPage.BindingContext>
 <StackLayout Padding="10, 0">
 <BoxView Color="{Binding Color}"
 VerticalOptions="FillAndExpand" />
 <Label Text="{Binding Hue, StringFormat='Hue = {0:F2}'}"
 HorizontalOptions="Center" />
 <Slider Value="{Binding Hue, Mode=TwoWay}" />
 <Label Text="{Binding Saturation, StringFormat='Saturation = {0:F2}'}"
 HorizontalOptions="Center" />
 <Slider Value="{Binding Saturation, Mode=TwoWay}" />
 <Label Text="{Binding Luminosity, StringFormat='Luminosity = {0:F2}'}"
 HorizontalOptions="Center" />
 <Slider Value="{Binding Luminosity, Mode=TwoWay}" />
 </StackLayout>
</ContentPage>
Altera para o Hue , Saturation , e Luminosity propriedades causa o Color propriedade a ser alterada e as
alterações Color faz com que as outras três propriedades alterar. Isso pode parecer um loop infinito, exceto
que a classe não chamar o PropertyChanged evento, a menos que a propriedade realmente foram alterados.
Isso coloca um fim para o loop de comentários caso contrário incontrolável.
Contém o seguinte arquivo XAML um BoxView cujo Color propriedade está vinculada a Color propriedade
ViewModel e três Slider e três Label modos de exibição associada ao Hue , Saturation e Luminosity
propriedades:
Ordenar com ViewModels
A associação em cada Label é o padrão OneWay . Ele só precisa exibir o valor. Mas a associação em cada 
Slider é TwoWay . Isso permite que o Slider seja inicializada em ViewModel. Observe que o Color está
definida como Aqua quando o ViewModel é instanciado. Uma alteração no, mas o Slider também precisa
definir um novo valor para a propriedade no ViewModel, que, em seguida, calcula uma nova cor.
Em muitos casos, o padrão MVVM é restrito a manipulação de itens de dados: objetos de dados no ViewModel
paralelo de objetos de interface do