Padrão MVVM

“MVVM” nada mais é do que “model-view-view model”. O modelo de exibição obtém a

entrada do usuário da exibição usando comandos. Ao usar a vinculação de dados, a exibição
obterá os detalhes do modelo de exibição. É um exemplo de arquitetura fracamente acoplada,
pois o modelo não conhece o modelo de exibição e o modelo de exibição não conhece a exibição.

Abaixo explicado o modelo MVVM criando um pequeno aplicativo WPF,

Basicamente é um processo passo a passo,

1 CRIAÇÃO DO MODELO “MODELS” ................................................................................................. 2

2 CRIAÇÃO DA BASE DO MODELO DE EXIBIÇÃO “VIEWMODELBASE” ............................................... 3
3 CRIAÇÃO DO MODELO DE EXIBIÇÃO “VIEWMODEL” ..................................................................... 3
4 CRIAÇÃO DO RELÉ DE COMANDO “RELAYCOMMAND” .................................................................. 5
5 CRIAÇÃO DA EXIBIÇÃO “VIEWS” .................................................................................................... 6
5.1 CRIAÇÃO DE CONTROLE DE USUÁRIO (XAML) “USERCONTROL” ............................................................ 6
5.1.1 MemberDetailUserControl.xaml ......................................................................................... 6
5.1.2 MemberDetailUserControl.cs ............................................................................................. 7
5.2 CRIAÇÃO DA JANELA PRINCIPAL (XAML) “MAINWINDOW” .................................................................. 7

1
1 Criação do Modelo “Models”
O modelo nada mais é do que uma entidade comercial e atua como uma camada para
transmitir dados ao banco de dados/qualquer fonte de dados. É completamente independente
da interface do usuário.

Abaixo, dada a entidade de amostra do detalhe do membro,

namespace WindowsApp
{
public class MemberDetail : INotifyPropertyChanged
{
private string _firstName;

public string FirstName

{
get
{
return _firstName;
}
set
{
_firstName = value;
OnPropertyChanged("FirstName");
}
}

private string _lastName;

public string LastName

{
get
{
return _lastName;
}
set
{
_lastName = value;
OnPropertyChanged("LastName");
}
}

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)

{
PropertyChangedEventHandler eventHandler = PropertyChanged;
if (eventHandler != null)
{
eventHandler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}

2
2 Criação da Base do Modelo de Exibição “ViewModelBase”
É a melhor abordagem ter “ViewModelBase” como classe base para todos os
ViewModels herdando-o. Para que os métodos comuns a todos os ViewModels estejam
presentes nesta Classe Base.

Aqui o “ViewModelBase” implementou a interface “INotifyPropertyChanged” para

obter a notificação sempre que os valores da propriedade forem alterados.

namespace WindowsApp.ViewModel
{
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)

{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}

3 Criação do Modelo de Exibição “ViewModel”

“ViewModel” cria dados do tipo “Model” para vinculá-los na view.

• A Propriedade que contém os dados deve ser marcada como “Pública” para
expor e vinculá-la à visualização.
• Ele também herda “ViewModelBase” para notificar sempre que os valores da
propriedade forem alterados. Para fazer isso, o evento “PropertyChanged”
deve ser chamado sempre que definir um valor para uma propriedade.

namespace WindowsApp.ViewModel
{
public class MemberDetailUserControlViewModel : ViewModelBase
{
public ICommand AddNewMemberCommand { get; set; }
public ObservableCollection<MemberDetail> MemberDetailList { get; set; }

public MemberDetailUserControlViewModel()
{
BindCommand();

MemberDetailList = new ObservableCollection<MemberDetail>

{
new MemberDetail()
{
FirstName = "First Name",
LastName = " Last Name"
}
};
}

3
private void BindCommand()
{
try
{
AddNewMemberCommand = new RelayCommand(AddNewMemberDetail);
}
catch (Exception)
{
throw;
}
}

private void AddNewMemberDetail(object parameter)

{
try
{
//Message

MemberDetailList.Add(new MemberDetail()
{
FirstName = FirstName,
LastName = LastName
});

FirstName = "";
LastName = "";
}
catch (Exception)
{
throw;
}
}

private string firstName;

public string FirstName
{
get
{
return firstName;
}
set
{
firstName = value;
OnPropertyChanged("FirstName");
}
}

private string lastName;

public string LastName
{
get
{
return lastName;
}
set
{
lastName = value;

4
 OnPropertyChanged("LastName");
}
}
}
}

4 Criação do Relé de Comando “RelayCommand”

Aqui criei uma classe personalizada chamada “RelayCommand” para invocar um evento
presente no “ViewModel” sempre que o comando for acionado a partir da exibição. Basicamente,
os limites de “Comandos” como dados para vinculações de entrada, botão e caixa de
seleção/botões de opção.

Na ação do usuário, view executa comandos que são implementados no modelo de

view. Abaixo dado o código de “RelayCommand” que implementa a interface “ICommand”.

namespace WindowsApp.Helper
{
public class RelayCommand : ICommand
{
private readonly Action<object> _execute;
private readonly Predicate<object> _canExecute;

public bool CanExecute(object parameter)

{
return _canExecute == null || _canExecute(parameter);
}

public event EventHandler CanExecuteChanged

{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}

public void Execute(object parameter)

{
_execute(parameter);
}

public RelayCommand(Action<object> execute) : this(execute, null)

{
}

public RelayCommand(Action<object> execute, Predicate<object> canExecute)

{
if(execute==null)
throw new ArgumentNullException("execute");

_execute = execute;
_canExecute = canExecute;
}
}
}

5
5 Criação da Exibição “Views”
5.1 Criação de Controle de Usuário (XAML) “UserControl”
5.1.1 MemberDetailUserControl.xaml

Basicamente, os controles do usuário são criados para reutilizá-lo em muitos modos de

exibição. Abaixo criado “MemberDetailUserControl” que será utilizado na View. Aqui,
Comandos e Bindings mencionados no “MemberDetailUserControlViewModel” são vinculados
aqui para exibir os dados e invocar os eventos na ação do usuário.

<UserControl x:Class="WindowsApp.UserControl.MemberDetailUserControl"
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"
mc:Ignorable="d"
d:DesignHeight="372" d:DesignWidth="658">
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Uid="ColumnDefinition_1" Height="Auto" />
<RowDefinition x:Uid="ColumnDefinition_2" Height="Auto" />
<RowDefinition x:Uid="ColumnDefinition_3" Height="Auto" />
<RowDefinition Height="103*" />
</Grid.RowDefinitions>

<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition x:Uid="ColumnDefinition_1" Height="Auto" />
<RowDefinition x:Uid="ColumnDefinition_2" Height="Auto" />
<RowDefinition x:Uid="ColumnDefinition_3" Height="Auto" />
</Grid.RowDefinitions>
<Label Content="FirstName" Height="28" HorizontalAlignment="Left" Margin="10,11,0,0" Name="
LblName" VerticalAlignment="Top" ClipToBounds="False" FontWeight="Bold" />
<Label Content="LastName" Height="28" HorizontalAlignment="Left" Margin="11,40,0,0" Name="
LblPassword" VerticalAlignment="Top" ClipToBounds="False" FontWeight="Bold" />
<TextBox Name="TxtFirstName" Height="23" HorizontalAlignment="Left" Margin="82,11,0,0" Text
="{Binding FirstName}" VerticalAlignment="Top" Width="120" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="82,40,0,0" Name="TxtLastName" Text
="{Binding LastName}" VerticalAlignment="Top" Width="120" />
<Button Content="Add" Command="{Binding AddNewMemberCommand}" Height="23" Horizontal
Alignment="Left" Margin="82,69,0,0" Name="BtnSubmit" VerticalAlignment="Top" Width="40" Foregrou
nd="DarkSlateGray" ForceCursor="True" Background="AntiqueWhite" FontWeight="Bold" />
</Grid>

<ScrollViewer Grid.RowSpan="3" Grid.Row="1" Height="150" HorizontalAlignment="Left" Margin="1

0,10,0,0" Name="ScrollViewer1" VerticalAlignment="Top" Width="208">
<DataGrid Name="memberDataGrid" AutoGenerateColumns="False" ItemsSource="{Binding Mem
berDetailList}"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="192" Grid.Row="1" GridLinesVi
sibility="None" AlternatingRowBackground="BlanchedAlmond" AreRowDetailsFrozen="True" RowHeight=
"20" FontFamily="Vrinda" FontSize="12" CanUserResizeRows="False" CanUserSortColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
<DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
</DataGrid.Columns>
</DataGrid>

6
 </ScrollViewer>
</Grid>
</UserControl>

5.1.2 MemberDetailUserControl.cs

Para DataContext, a classe de controle de usuário criará uma instância de

“MemberDetailUserControlViewModel” para acessar todos os dados/propriedades que são
expostos no ViewModel.

namespace WindowsApp.UserControl

{
/// <summary>
/// Interaction logic for MemberDetailUserControl.xaml
/// </summary>
public partial class MemberDetailUserControl : System.Windows.Controls.UserControl
{
private readonly MemberDetailUserControlViewModel _memberDetailUserControlViewModel;

public MemberDetailUserControl()
{
InitializeComponent();

_memberDetailUserControlViewModel = new MemberDetailUserControlViewModel();

this.DataContext = _memberDetailUserControlViewModel;
}
}
}
5.2 Criação da Janela Principal (XAML) “MainWindow”

Aqui, criei uma exibição que está usando a interface do usuário

"MemberDetailUserControl". Não haverá nenhuma lógica de código no arquivo code-behind de
“View”. Somente o “UserControl” implementado criará o DataContext de um “ViewModel”.

<Window x:Class="WindowsApp.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:memberDetailUserControl="clr-namespace:WindowsApp"
xmlns:userControl="clr-namespace:WindowsApp.UserControl"
Title="Member Detail" Height="350" Width="282">
<Grid Width="488">
<userControl:MemberDetailUserControl x:Uid="memberDetailUserControl:MemberDetailUserControl1"
Margin="12,12,244,12" />
</Grid>
</Window>