Decoupling the UI Parts

Thomas Claudius Huber

MICROSOFT MVP (WINDOWS DEVELOPMENT)

@thomasclaudiush www.thomasclaudiushuber.com
The Current UI Structure
Module
Plan the new structure
Outline
Create a LookupDataService
Create a NavigationView
and a NavigationViewModel
Create a FriendDetailView
and a FriendDetailViewModel
 Plan the New Structure

MainWindow MainViewModel

ListView
ItemsSource Friends

SelectedItem SelectedFriend

TextBox Text FirstName

DataContext
 Plan the New Structure

MainWindow MainViewModel

NavigationView
Navigation
DataContext
ViewModel

FriendDetailView
FriendDetail
DataContext
ViewModel

DataContext
 Plan the New Structure

MainWindow MainViewModel

NavigationView
Navigation
DataContext
ViewModel

FriendDetailView
FriendDetail
DataContext
ViewModel

DataContext
 Plan the New Structure

MainWindow MainViewModel

NavigationView
Navigation Lookup
DataContext is using
ViewModel DataService

FriendDetailView
FriendDetail Friend
DataContext is using
ViewModel DataService

DataContext
Demo Create the LookupDataService
Create the NavigationViewModel
and the NavigationView
Create the FriendDetailViewModel
and the FriendDetailView
Summary Decoupled the UI parts
- MainWindow
- NavigationView
- FriendDetailView

Created a LookupDataService