A camada View da aplicação é onde vamos aplicar o padrão MVVM (Model-View-ViewModel) , adicione um projeto do tipo WPF Application em sua Solution, coloque o nome de Contatos.View.
Adicione uma classe ao projeto com o nome de ContatoViewModel:
No arquivo MainWindow.xaml vamos criar o layout da aplicação, não vou me preocupar com o designer pois não é o foco deste tutorial, adicione quatro objetos do tipo Button, três TextBlock, três TextBox e uma ListBox, deixe conforme a Figura abaixo:
Na pasta Apoio vamos adicionar duas classes escritas por Josh Smith, um dos gurus do WPF, seu blog é http://joshsmithonwpf.wordpress.com/ , como o foco do tutorial e apresentar uma introdução ao conceito, não vou utilizar de frameworks, o que pode ser interessante em um projeto real, mas para este tutorial, quanto mais simples, melhor para entender, essas duas classes são simples, a primeira servirá de base para a classe ContatoViewModel e a segunda de apoio ao suporte de ICommand.
Faça o download das classes aqui.
Na pasta ViewModel crie um arquivo do tipo Class com o nome de ContatoViewModel e adicione as duas referências aos dois projetos que criamos anterioramente:
Agora vamos herdar algumas funcionalidades da classe de apoio chamada BaseViewModel que implementa a interface INotifyPropertyChanged, que permite monitorar as mudanças que ocorrem em algumas propriedades na classe ContatoViewModel.
public class ContatoViewModel : BaseViewModel
Crie uma instância do acesso ao modelo a dados no inicio da classe ContatoViewModel, uma ObservableCollection chamada listaContatos, que auxiliará na ligação através de databinding com o ListBox e uma entidade Contato chamada contatoSelecionado, que também estará auxiliando na ligação através de databinding ao ListBox e ao DataContext de um Stackpanel, este Stackpanel é o layout control que contém os TextBox com o databinding das propriedades.
ContatoDAO_base = new ContatoDAO (); //Lista de Contatos ObservableCollection listaContatos; //Contato Selecionado public Contato contatoSelecionado = null;
# region Dados
//Carrega todos os contatos cadastrados ObservableCollection lista = new ObservableCollection();
IQueryable rev = _base.GetAll();
foreach (var item in rev.ToList()) { lista.Add(item); }
listaContatos = lista;
# endregion
Agora chegou o momento de criar os métodos que serão utilizados como databinding na View :
# region Propriedades
//Método que retorna uma lista de contatos //que será utilizado //na View via databinding public ObservableCollection ListaContatos { get { return listaContatos; } }
//Método que retorna um contato //Selecionado que será utilizado //na View via databinding public Contato ContatoSelecionado { get { return contatoSelecionado; } set { //seta o contato selecionado contatoSelecionado = value;
//Avisa a View que a //propriedade foi alterada OnPropertyChanged("ContatoSelecionado");
}
}
# endregion
No code-behind do arquivo MainPage.xaml, dentro do método MainWindow(), crie uma instância do ContatoViewModel e ligue ao DataContext do Layout Control Grid.
public MainWindow() {
InitializeComponent();
ContatoViewModel vm = new ContatoViewModel();
LayoutRoot.DataContext = vm;
}
No código XAML que cria a ListBox vamos ligar duas propriedades através de databinding , a primeira é a propriedade ItemsSource, criando um Binding com ListaContatos, a segunda propriedade é o SelectedItem, criando um Binding com ContatoSelecionado.
Os TextBox estão posicionados dentro de um Layout StackPanel, a proprieadade DataContext está ligada através de Binding com o ContatoSelecionado, cada TextBox tem sua propriedade Text ligado com as propriedades da entidade Contato.
Copie o App.config do projeto Contatos.Data para a projeto Contatos.View, marque a camada View como Set as StartUp Project, adicione algumas informações na base de dados e em seguida execute a aplicação, o ListBox será carregado e ao clicar em um item, os TextBox serão alimentados com as informações do item selecionado.
Na próxima parte do tutorial estaremos finalizando a série, inserindo as funcionalidades dos botões.
