MVVM Command in Windows Phone 7 Series

[KornFlexia]

I have bought a new Windows Mobile phone which i would be using specially because of the Windows Phone 7 operating system. I guess it would be just great to have a windows experience on the mobile phone with its beautiful command controlling. But i guess this phone does not have Command property for the controls so i can bind the MVVM commands?

[Regina]

MVVM is a pattern that facilitates testing of code and patches for developers and designers as washables no "code behind" in the views. To develop on Windows 7 Phone, you must download the SDK which is free. The online version is now in Beta. To begin with You have to use the template made which would be available on Visual Studio Gallery in order to allows saving time. You will notice that: The directories "ViewModel" / "Views" / "Model" are already created and files MainViewModel.cs / ViewModelBase.cs also already created. Suppose you are creating a mini Twitter client with the pattern MVVM, So you have to attack the Model class and add a "Tweet". Add Reference: ystem.Xml.Linq will facilitate our parking XML. Also add in the class "Tweet" the two namespaces:

System.Xml.Linq 
System.Linq

Add the properties you need: Username, Message, ImageSource (all of type string) and the static method which will parse the xml result.

[Simond]

I am able to use the MVVM-Light toolkit on my Windows Phone 7 application. Here i have provided my View:

<TextBox Height="80" HorizontalAlignment="Left" Margin="106,34,0,0" VerticalAlignment="Top" Width="315" Text="{Binding RealVal, Mode=TwoWay}" />
<Button Content="Go" Height="80" HorizontalAlignment="Left" Margin="127,252,0,0" Name="button1" VerticalAlignment="Top" Width="213" cmd:ButtonBaseExtensions.Command="{Binding DoCommand}"  />

My view model is :

    public class MainPageViewModel : ViewModelBase
    {
        public ICommand DoCommand { get; internal set; }
    public MainPageViewModel()
    {
        DoCommand = new RelayCommand(() =>
            {
                DoSomethingWith(RealVal);
            }, () => true);

    }

    private const string RealValPropertyName = "RealVal";
    private string _RealVal;
    public string RealVal
    {
        get { return _RealVal; }
        set
        {
            if (_RealVal == value)
                return;
            _RealVal = value;
            RaisePropertyChanged(RealValPropertyName);
        }
    }
}

In the emulator, when you type the value on the textbox then clicking on the button will show you see you are in the relaycommand lambda expression and with a breakpoint. I see that RealVal is null. Then, the breakpoint in the setter of RealVal is reached, and the correct value goes in RealValue. What could i do if i want to setter to be reaching before relay command.

[Paxton]

I have collected some information from the different forums which says that there is no need to use the SL3 assemblies as ButtonBaseExtension is included in the GalaSoft.MvvmLight.WP7.dll. So you are just left with adding the

xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.WP7"

Now if you want to add up the manespace in your PhoneApplicationPage then you have to use the

cmd:ButtonBaseExtensions.Command property.

[Quentin]

An accurate execution of the MVVM pattern is the ViewModel should "wrap" the model (i.e the domain.) Customer must have exposed properties of the domain entity which should not be replicated, through the ViewModel. Therefore, You should create test for CustomerViewModel in order to verify that:

Cust.FName is wrapped by CustomerViewModel.FName
Cust.LName is wrapped by CustomerViewModel.LName
[TestMethod]
public void Constructor_CustomerAndRepositoryInput_CustomerPropertiesEqualViewModelProperties()
{
    var customer = new Customer { FName = "June", LastName = "Wong" };
    var sut = new CustomerViewModel(_customerRepository, cust);

    Assert.AreEqual(cust.FName, sut.FName);
    Assert.AreEqual(cust.LastName, sut.LastName);
}

CustomerViewModel properties

public string FName
{
    get
    {
        return _cust.FName;
    }
    set
    {
        _cust.FName = value;
    }
}

public string LastName
{
    get
    {
        return _cust.LastName;
    }
    set
    {
        _cust.LastName = value;
    }
}

[Daley]

To create the view models. This simple class called "ExampleVModel" is generated. Here, a method and associated SelectionChangedEventArgs signature is added.

using System; 
using System.Windows.Controls; 
namespace WpfCallMethodExample.VModel 
{ 
public class ExampleVModel 
{ 
public void SelectionChangedMethod (object sender, SelectionChangedEventArgs e) 
{ 
throw new NotImplementedException (); 
  } 
 } 
}

Source code view of the models "ExampleVModel.cs". An instance of the view model is created from the view of the resource area of the respective view.

<Window 
xmlns = "http://schemas.mi...xaml/presentation" 
xmlns: x = "http://schemas.mi..../xaml" 
xmlns: i = "http://schemas.mi....../interactivity" 
xmlns: ei = "http://schemas.mi..../interactions" 
xmlns: local = "clr-namespace: WpfCallMethodExample.VModel" 
xmlns: d = "http://schemas.mi..../blend/2008" 
xmlns: mc = "http://schemas.open..../markup-compatibility/2006" mc: Ignorable = "d "x: Class =" WpfCallMethodExample.MainWindow " 
Title = "MainWindow" Height = "350" width = "525"> 
<Window.Resources> 
<DataTemplate x:Key= "ItemTemplate"> 
<StackPanel> 
<TextBlock Text= "{Binding Property1}" /> 
</ StackPanel> 
</ DataTemplate> 
<local:ExampleVModel x:Key= "VModel" /> 
</ Window.Resources> 
<Grid DataContext= "{Binding Source={StaticResource SampleDataSource}}"> 
<ListBox Margin= "8,64,8,8" ItemTemplate= "{DynamicResource ItemTemplate}" ItemsSource= "{Binding Collection}" /> 
<TextBlock Margin= "8,8,8,0" TextWrapping= "Wrap" VerticalAlignment= "Top" height= "52" FontSize= "21.333"> <Run Language = en-us "text =" CallMethodExample " /> </ TextBlock> 
</ Grid> 
</ Window>