2. Model
View (XAML)
ViewModel
Design/Development Separation
Code Reuse
Multiple Views On the Same
Logic
View-Logic Testability

3. Model
View (XAML)
ViewModel
Model
ViewModel
View

4. ViewModel - C#
View - XAML
View (XAML)
ViewModel
DataBinding

9. Binding engine gets info from the Binding
object:
Binding Target
(Property)
Binding Source
(DependecyProperty /
INotifyPropertyChanged)
Binding
Object
Data Updates
(one-way)
Data Updates
(two-way)
Data Updates
(one-way)
Data Updates
(two-way)

11. A DependencyProperty is a special type of
property
<TextBlock x:Name="DescriptionTextBlock" Margin="12,0,0,0" Text="{Binding Description} " />
Dependency Property Binding Markup ExtensionDependency Object

12. Converters - bind a target and a source that are
different types
<TextBlock x:Name="MyTextBlock" Visibility="{Binding IsVisibleBool, Converter={StaticResource
BoolToVisibilityConverter}}" />

13. <Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" />
OneTime
OneWay
TwoWay

14. More advanced property paths
Use the StringFormat property to format text
<Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" />
<TextBlock Text="{Binding Coupon.ExpirationDate, StringFormat=‘Expiration Date: {0:d}’}‚ />

16. ViewModel acts as a binding source
Loosely coupled to a View

17. public class ItemView Model : INotifyPropertyChanged
{
private string _name;
public string Name
{
get { return _name; }
set {
if (value != _name)
{
_name = value;
NotifyPropertyChanged("Name");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

18. OneWay or TwoWay binding must implement the
INotifyPropertyChanged interface

19. Two ways to bind collections of data:

20. ViewModel - C#
ICommand
DelegateCommand
RelayCommand
View XAML
Command=“{Binding MyCommand}”
View (XAML)
ViewModel
Commands

21. Expose a method like a property
Attach commands to buttons and menu items
View notifies the code that some action has
occurred
Implement the ICommand interface

22. <Button Content="Say Hello" Command="{Binding HelloWorldCommand}"></Button>
class HelloWorldCommand : ICommand
{
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
MessageBox.Show("Hello world!");
}
}
class MyView Model
{
private HelloWorldCommand myCommand = new
HelloWorldCommand();
public HelloWorldCommand HelloWorldCommand
{
get
{
return myCommand;
}
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
DataContext = _myView Model;
}

23. Reusable ICommand class
See Implementation At
http://aka.ms/B4BDelegate

24. public MyViewModel()
{
loadSomeDataCommand = new DelegateCommand(LoadDataAction);
}
private void LoadDataAction(object p)
{
// Load the data into the ObserverableCollection here
}
// Command Property
private ICommand loadSomeDataCommand;
public ICommand LoadDataCommand
{
get
{
return this.loadSomeDataCommand;
}
}

26. Portable Class Libraries
Windows 8 Windows Phone 8
Services
ViewModels (limited/abstract)
Models
Commands
Interfaces
Views (XAML)
App Lifecycle
Navigation
Views (XAML)
Converters
Shared ViewModels (Add as Link)
Storage, Alerts
View (XAML)
ViewModel
Model