textbox input to get / set viewmodel

Question

I'm sure this has already been asked, but I'm still new to MVVM and WPF, and not too sure what I should be searching for.

I have a viewmodel which includes items in a Model, as well as some additional temporary data items which will all be passed to a process.start(). I have a stackpanel of textbox, and want to allow the user to type in a "ModelName", and if existing, The ViewModel will get and set "TemplateName" associated with the ModelName.

I'm a bit lost on how to implement this. Do I need to create a completely separate ViewModel, which then goes and extracts data from ModelViewModel? Do I just write some code under ModelName's set, where it can validate, query, and set TemplateName?

Model:

public partial class Model
   {
    public string ModelName { get; set; }
    public virtual Template Template { get; set; }

and ViewModel, which takes the Model, and some temporary data:

public class LauncherViewModel:ViewModelBase
{        
    public LauncherViewModel()
    {
        _ESTContext = new ESTContext();
        Models = new ObservableCollection<Model>(_ESTContext.Models); 
    }

    private ESTContext _ESTContext;
    private string _modelname;
    private string _serialno;
    private string _sonumber;
    private string _templatename;
    private string _outputname;
    private Model _selectedmodel;

    public ObservableCollection<Model> Models { get; set; }

    public string ModelName
    {
        get { return _modelname; }
        set
        {
            if (!string.Equals(_modelname, value))
            {
                _modelname = value;
            };
        }
    }
    public string TemplateName { get { return _templatename;  }}
    public string SerialNo { get { return _serialno; } }
    public string SONumber { get { return _sonumber; } }
    public string OutputName { get { return _outputname; } }

    public Model SelectedModel
    {
        get { return _selectedmodel; }
        set
        {
            if (_selectedmodel != value)
            {
                _selectedmodel = value;
            }
        }
    }
} 

My View:

<DockPanel>
    <StackPanel Margin="0,78,0,68" Width="233" DataContext="{Binding Models}">
        <ComboBox IsEditable="True" Text="{Binding ModelName}" SelectedItem="{Binding SelectedModel}"/>
        <TextBox Height="23" TextWrapping="Wrap" Text="{Binding SONumber}"/>
        <TextBox Height="23" TextWrapping="Wrap" Text="{Binding SerialNumber}"/>
        <Button Content="Button"/>
    </StackPanel>
</DockPanel>

Answer 1

For your gui to update you must implement INotifyPropertyChanged and a call to it on all your bound properties.

// basic base class for your models, you a
public class ModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator] // remove if you are not using R#
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

// your model
public class Model : ModelBase
{
    private string modelName;
    private Template template;
    public string ModelName
    {
        get { return modelName; }
        set
        {
            if (value == modelName) return;
            modelName = value;
            OnPropertyChanged();
        }
    }
    public virtual Template Template
    {
        get { return template; }
        set
        {
            if (Equals(value, template)) return;
            template = value;
            OnPropertyChanged();
        }
    }
}

View:

<DockPanel>
    <StackPanel Margin="0,78,0,68" Width="233"> 
    <ComboBox IsEditable="True" Text="{Binding ModelName, Mode='TwoWay'}" SelectedItem="{Binding SelectedModel}" ItemsSource="{Binding Models}"/>
    <TextBox Height="23" TextWrapping="Wrap" Text="{Binding SONumber Mode='TwoWay'}"/>
    <TextBox Height="23" TextWrapping="Wrap" Text="{Binding SerialNumber Mode='TwoWay'}"/>
    <Button Content="Button"/>
</StackPanel>

Note the Mode='TwoWay' this makes the GUI change the values in your viewmodel, rather than just display them. So you need to set that on everything that's supposed to be editable as above. The default behaviour of WPF is that when a control looses focus it will update the bound property, if you set UpdateSourceTrigger='PropertyChanged' the property will be updated each time ie a letter is entered in a text box. I'll leave that part to you, but you will have to do it in your vm! At minimum the properties SONumber,SerialNumber and Models(if it's ref. changes).

VM: I assume you use galasoft here

public class LauncherViewModel : ViewModelBase
{
    private ESTContext _ESTContext;
    private string _templatename;
    private string _modelname;
    private string serialNumber;
    private string _outputname;
    private string modelName;
    private ObservableCollection<Model> models;
    private Model selectedModel;
    private string soNumber;

    public LauncherViewModel()
    {
        // dangerous ;)
        _ESTContext = new ESTContext();
        Models = new ObservableCollection<Model>(_ESTContext.Models);
    }


    public ObservableCollection<Model> Models
    {
        get { return models; }
        set
        {
            if (Equals(value, models)) return;
            models = value;
            RaisePropertyChanged();
        }
    }

    public string ModelName
    {
        get { return modelName; }
        set
        {
            if (value == modelName) return;
            modelName = value;
            RaisePropertyChanged();
        }
    }
    public string TemplateName { get { return _templatename;  }}
    public string SerialNumber // Note you spelled this wrong in your xaml. SONumber
    {
        get { return serialNumber; }
        set
        {
            if (value == serialNumber) return;
            serialNumber = value;
            RaisePropertyChanged();
        }
    }

    public string SONumber
    {
        get { return soNumber; }
        set
        {
            if (value == soNumber) return;
            soNumber = value;
            RaisePropertyChanged();
        }
    }

    public string OutputName { get { return _outputname; } }

    public Model SelectedModel
    {
        get { return selectedModel; }
        set
        {
            if (Equals(value, selectedModel)) return;
            selectedModel = value;
            RaisePropertyChanged();
        }
    }
}

A cool litle thing if you are using galasoft or sim together with R#.

public class YourViewModelBase : ViewModelBase
{
    [NotifyPropertyChangedInvocator] // alt + enter = convert auto property to prop  
                                     // with backing field and change notification :)
    override protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        base.RaisePropertyChanged(propertyName);
    }
    // .. :)
}

Cheers,

Stian

Answer 2

If I havent misunderstood your question , Bind Models to ItemsSource of ComboBox instead of Binding it to DataContext of StackPanel

Remove DataContext binding

<StackPanel Margin="0,78,0,68" Width="233" >

Bind Itemssource of ComboBox to Models and you will also have to specify DisplayMemberPath to the property of Model that you want to display in ComboBox.

<ComboBox IsEditable="True" ItemsSource="{Binding Models}" Text="{Binding ModelName}" SelectedItem="{Binding SelectedModel}"/>

And I am assuming you are setting DataContext of window to instance of LauncherViewModel class.

Answer 3

You need to raise the property changed event on properties you bind to i.e.:

private string _ModelName;
    public string ModelName
    {
        get { return _ModelName; }
        set
        {
            if (_ModelName != value)
            {
                _ModelName = value;
                RaisePropertyChanged("ModelName");
            }
        }
    }

In your base view model you need something like this (make sure you implement INotifyPropertyChanged):

     public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

In the constructor or loaded event of your view add this:

DataContext = new LauncherViewModel();