MVVM - Ligações de dados WPF

Neste capítulo, aprenderemos como a vinculação de dados oferece suporte ao padrão MVVM. A vinculação de dados é o principal recurso que diferencia o MVVM de outros padrões de separação de IU, como MVC e MVP.

  • Para a vinculação de dados, você precisa ter uma visualização ou conjunto de elementos de interface do usuário construídos e, em seguida, precisa de algum outro objeto para o qual as ligações apontarão.

  • Os elementos da IU em uma visualização são vinculados às propriedades expostas pelo ViewModel.

  • A ordem em que View e ViewModel são construídos depende da situação, pois cobrimos a View primeiro.

  • Um View e ViewModel são construídos e o DataContext do View é definido como ViewModel.

  • As ligações podem ser ligações de dados OneWay ou TwoWay para fluir os dados de um lado para outro entre View e ViewModel.

Vamos dar uma olhada nas ligações de dados no mesmo exemplo. Abaixo está o código XAML de StudentView.

<UserControl x:Class = "MVVMDemo.Views.StudentView" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:local = "clr-namespace:MVVMDemo.Views" 
   xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel" 
   xmlns:vml = "clr-namespace:MVVMDemo.VML" 
   vml:ViewModelLocator.AutoHookedUpViewModel = "True" 
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">

   <!--<UserControl.DataContext> 
      <viewModel:StudentViewModel/> 
   </UserControl.DataContext>--> 

   <Grid> 
      <StackPanel HorizontalAlignment = "Left"> 
         <ItemsControl ItemsSource = "{Binding Path = Students}"> 
            <ItemsControl.ItemTemplate>
               <DataTemplate> 
					
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}" 
                        Width = "100" Margin = "3 5 3 5"/>
								
                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}" 
                        Width = "100" Margin = "0 5 3 5"/> 
								
                     <TextBlock Text = "{Binding Path = FullName, Mode = OneWay}" 
                        Margin = "0 5 3 5"/> 
								
                  </StackPanel> 
						
               </DataTemplate> 
            </ItemsControl.ItemTemplate> 
         </ItemsControl> 
      </StackPanel> 
   </Grid> 

</UserControl>
  • Se você observar o código XAML acima, verá que ItemsControl está vinculado à coleção Students exposta por ViewModel.

  • Você também pode ver que a propriedade do modelo de Aluno também tem seus próprios vínculos individuais, e estes são vinculados a Textboxes e TextBlock.

  • O ItemSource de ItemsControl pode se vincular à propriedade Students, porque o DataContext geral para a View está definido como ViewModel.

  • Os vínculos individuais de propriedades aqui também são vínculos de DataContext, mas não são vinculados ao próprio ViewModel, devido à maneira como um ItemSource funciona.

  • Quando uma fonte de item se liga à sua coleção, ela renderiza um contêiner para cada item na renderização e define o DataContext desse contêiner para o item. Portanto, o DataContext geral para cada caixa de texto e bloco de texto em uma linha será um Aluno individual da coleção. E você também pode ver que essas associações para TextBoxes são associações de dados TwoWay e para TextBlock são associações de dados OneWay, pois você não pode editar TextBlock.

Ao executar este aplicativo novamente, você verá a seguinte saída.

Vamos agora mudar o texto na segunda caixa de texto da primeira linha de Allain para Upston e pressionar tab para perder o foco. Você verá que o texto TextBlock também é atualizado.

Isso ocorre porque as ligações dos TextBoxes são definidas como TwoWay e ele também atualiza o Model, e a partir do modelo novamente o TextBlock é atualizado.