Model
View (XAML)
ViewModel
Design/Development Separation
Code Reuse
Multiple Views On the Same
Logic
View-Logic Testabili...
Model
View (XAML)
ViewModel
Model
ViewModel
View
ViewModel - C#
View - XAML
View (XAML)
ViewModel
DataBinding
Binding engine gets info from the Binding
object:
Binding Target
(Property)
Binding Source
(DependecyProperty /
INotifyPro...
A DependencyProperty is a special type of
property
<TextBlock x:Name="DescriptionTextBlock" Margin="12,0,0,0" Text="{Bindi...
Converters - bind a target and a source that are
different types
<TextBlock x:Name="MyTextBlock" Visibility="{Binding IsVi...
<Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" />
OneTime
OneWay
TwoWay
More advanced property paths
Use the StringFormat property to format text
<Image Source="{Binding VisualElement.Background...
ViewModel acts as a binding source
Loosely coupled to a View
public class ItemView Model : INotifyPropertyChanged
{
private string _name;
public string Name
{
get { return _name; }
se...
OneWay or TwoWay binding must implement the
INotifyPropertyChanged interface
Two ways to bind collections of data:
ViewModel - C#
ICommand
DelegateCommand
RelayCommand
View XAML
Command=“{Binding MyCommand}”
View (XAML)
ViewModel
Commands
Expose a method like a property
Attach commands to buttons and menu items
View notifies the code that some action has
occu...
<Button Content="Say Hello" Command="{Binding HelloWorldCommand}"></Button>
class HelloWorldCommand : ICommand
{
public ev...
Reusable ICommand class
See Implementation At
http://aka.ms/B4BDelegate
public MyViewModel()
{
loadSomeDataCommand = new DelegateCommand(LoadDataAction);
}
private void LoadDataAction(object p)
...
Portable Class Libraries
Windows 8 Windows Phone 8
Services
ViewModels (limited/abstract)
Models
Commands
Interfaces
Views...
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Imagine Camp Algeria 2014 Build for both session2 mvvm
Upcoming SlideShare
Loading in …5
×

Imagine Camp Algeria 2014 Build for both session2 mvvm

320 views
225 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
320
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Commands – express the function that gets called when an event happens in a view
  • INotifyPropertyChanged – just says that it has event structure to normalize the change event when a property is changed
  • Commands – express the function that gets called when an event happens in a view
  • Without data binding, you may end up with overly-large and hard-to-maintain code behind files for your views.The XAML data binding engine performs the work of observing for changes and then synchronizing data between the source and the target.
  • The binding engine, a part of Windows Runtime, is hidden from the developer. The binding object supplies the engine with information about the binding so that it can perform its duties. The engine observes changes in the binding source and target and updates data appropriately. The developer can provide an optional value converter that converts data between the source format and target format (the two boxes in the diagram are the same converter).Note that the binding engine updates data depending on the binding mode – one time, one way, or two way.A data class that is suitable for being a binding source is known as a View Model.
  • The binding statement does not say exactly which data object (binding source) is used to supply the value. It just states that if this element is bound to a data object with a property called Directions, the Text property will be synchronized with that property. The default binding mode is one-way, meaning that changes to the data model will change the view, but not vice versa. This can be done by setting the binding Mode to two-way.You define the actual object to use for data binding by setting the DataContext property. You can set DataContext on an individual element, or on a containing element, in which case it is inherited by all the contained controls. You can simply set DataContext on a Grid or on the whole Page. Note that this is usually done from code when the page is navigated to.
  • The XAML code example shows a TextBlock with the Visibility property bound to IsVisibleBool (presumably defined in the DataContext object). Because the source and target types do not match, a class named BoolToVisibilityConverter is provided as a converter. That class should implement the IValueConverter interface and convert objects between bool and System.Windows.Visibility.We will see an example of a converter in the demo.
  • If you only bind with the OneTimeMode, the source object does not need to implement INotifyPropertyChanged. The WP8 Runtime just queries the property once and does not need to track it afterwards. Do not needlessly use two-way binding when one-way or even one-time binding would work
  • We will see examples of advanced property paths and the StringFormat property in the demo.Extra info aboutStringFormat:The formatting is applied after any convertersEscape special characters with a ‘\’
  • XAML is one end of data binding, and the View Model is the other end. It essentially “presents” your app data to the view.A substantial part of your code should be in the View Model(s).
  • In Windows 8,the [CallerMemberName] attribute is a new feature that lets you obtain the name of the method or property calling a method. It is used above to get the string name of the property being set (“Name” in this case), and can help avoid cluttering your code with constant strings to identify properties.
  • The INotifyPropertyChanged interface lets an object participate as a source in a one-way or two-way data binding.The interface exposes a single event, PropertyChanged. Classes that implement this interface should fire the PropertyChanged event whenever a public setter is called. The name of the property is passed in the PropertyChangedEventArgs.
  • The INotifyPropertyChanged interface lets an object participate as a source in a one-way or two-way data binding.The interface exposes a single event, PropertyChanged. Classes that implement this interface should fire the PropertyChanged event whenever a public setter is called. The name of the property is passed in the PropertyChangedEventArgs.
  • INotifyPropertyChanged – just says that it has event structure to normalize the change event when a property is changed
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.
  • This is a very barebones implementation to get a command working, but it demonstrates the basic idea. The Command property of the Button is bound to a class that implements the ICommand interface.
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.
  • Imagine Camp Algeria 2014 Build for both session2 mvvm

    1. 1. Model View (XAML) ViewModel Design/Development Separation Code Reuse Multiple Views On the Same Logic View-Logic Testability
    2. 2. Model View (XAML) ViewModel Model ViewModel View
    3. 3. ViewModel - C# View - XAML View (XAML) ViewModel DataBinding
    4. 4. 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)
    5. 5. 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
    6. 6. Converters - bind a target and a source that are different types <TextBlock x:Name="MyTextBlock" Visibility="{Binding IsVisibleBool, Converter={StaticResource BoolToVisibilityConverter}}" />
    7. 7. <Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" /> OneTime OneWay TwoWay
    8. 8. 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}’}‚ />
    9. 9. ViewModel acts as a binding source Loosely coupled to a View
    10. 10. 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)); } } }
    11. 11. OneWay or TwoWay binding must implement the INotifyPropertyChanged interface
    12. 12. Two ways to bind collections of data:
    13. 13. ViewModel - C# ICommand DelegateCommand RelayCommand View XAML Command=“{Binding MyCommand}” View (XAML) ViewModel Commands
    14. 14. 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
    15. 15. <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; }
    16. 16. Reusable ICommand class See Implementation At http://aka.ms/B4BDelegate
    17. 17. 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; } }
    18. 18. 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

    ×