WPF View-ModelView Binding Need Help Please

1
votes

I have been playing around and looking around on how to Bind a modelview to a view, but i cant seem to work it out. I have a view called Search and I want to bind it to SearchModelView. View has one button and one textbox and looks:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

    <ComboBox Height="23" HorizontalAlignment="Left" Margin="12,40,0,0" Name="comboBox1" VerticalAlignment="Top" Width="174" />
    <Label Content="Client:" Height="28" HorizontalAlignment="Left" Margin="0,12,0,0" Name="label1" VerticalAlignment="Top" Width="71" />
    <Label Content="Client Reference:" Height="28" HorizontalAlignment="Left" Margin="0,69,0,0" Name="label2" VerticalAlignment="Top" Width="117" />
    <TextBox  
        x:Name="clientRefTxt"
        Text="{Binding Path=ClientRef, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
        Height="23" 
        HorizontalAlignment="Left" 
        Margin="12,103,0,0" 
        VerticalAlignment="Top" 
        Width="174" />
    <Button 
        Content="Search Debtors" 
        Height="23" 
        HorizontalAlignment="Left" 
        Margin="12,140,0,0" 
        Name="button1" 
        VerticalAlignment="Top" 
        Width="89" 
        Command="{Binding Path=SearchCommand}"/>

</Grid>

And I want it to bind to SearchViewModel:

namespace Master.ViewModel {

public class SearchViewModel:WorkspaceViewModel
{
    RelayCommand _searchCommand;
    readonly Search _search;


    #region Search Properties
    public string ClientRef
    {

        get { MessageBox.Show("GET CLIENTREF"); return _search.ClientRef; }
        set
        {
            MessageBox.Show("SET CLIENTREF");
            if (value == _search.ClientRef)
                return;
            _search.ClientRef = value;
            base.OnPropertyChanged("ClientRef");
        }
    }

    #endregion

    public ICommand SearchCommand
    {
        get
        {
            MessageBox.Show("SEARCHCOMMAND");

            if (_searchCommand == null)
            {
                _searchCommand = new RelayCommand(
                    param=> this.Search(),
                    param=> this.CanSearch
                    );
            }
            return _searchCommand;
        }
    }

    public void Search()
    {
        MessageBox.Show("SEARCHING");
    }

    bool CanSearch
    {
        get { return true; }
    }
}

}

I removed all the assemblies at the top but assume that they are all there. Also note that SearchViewModel is in a separate dll, not in the exe with the View. Any help would be great or at least a pointer in the write direction, I have already read the msdn article on MVVM and that didnt help...I kinda need a better rundown on binding those too pieces. Thanks in Advance. P.S. Some more details: SearchViewModel belongs to Master.ViewModel SearchView is part of GUI.View I have and idea how the binded objects work, im not to sure on how to bind the view to the viewmodel

3
c#mvvmbinding

3 Answers

1
votes

You need to set the view's DataContext to an instance of the view model. There are a variety of ways of doing this, including frameworks that wire it up automagically, but the easiest way to get started is to do it in the constructor of the view:

partial class Search : Window
{
  public Search()
  {
    InitializeComponent();                // provided by Visual Studio

    DataContext = new SearchViewModel();  // all-important!
  }
}

Obviously you may need to provide other information to initialise the SearchViewModel but hopefully this is enough to get you on the right track.

1
votes

Is your View a Grid? I've only used UserControl or Window types as Views, but you may have success using a Grid.

Regardless, this is the cleanest way to instantiate the ViewModel with a UserControl View. Just replace the UserControl tags with Grid tags if you're using a Grid.

<UserControl ...(blah blah)
    xmlns:viewmodel="clr-namespace:Master.ViewModel">
    <UserControl.DataContext>
        <viewmodel:SearchViewModel/>
    </UserControl.DataContext>

I believe keeping out of the View's code unless necessary is the preferred pattern for MVVM - let the XAML wire things up for you when possible.

0
votes

Your will need to bootstrap your application like @itowlson suggests.

But if you have more than one ViewModel you should allow WPF to do it for you. The basic way to do this (which is easy to maintain until you start having more than a dozen views) is to create a DataTemplate to tie the View with your ModelView(which most people call ViewModel).

So the xaml you provided is probably in a UserControl(at least it should be) so you need to do several things

First create a ResourceDictionary
(fast way is to right-click your project and click Add -> Resource Dictionary

In that file(let's name it Resources.xaml) put this :

<DataTemplate DataType="{x:Type vm:SearchViewModel}">
  <vw:SearchView>
</DataTemplate>

The above is assuming you put the namespaces vw and vm for View and ViewModel namespaces respectively

Go to your App.xaml and put this:

<Application.Resources>
    <ResourceDictionary Source="Resources.xaml"/>
</Application.Resources>

The above will tell WPF that whenever it encounters an object of type SearchViewModel to:

  • Instantiate a SearchView object
  • Set it's DataContext to the SearchViewModel object

HTH