Basic MVVM Application

Question

I have read multiple tutorials but most of the tutorials somehow explain it like everyone has experience with MVVM already. I do know the basics like what Model, ViewModel etc is.

Now I want to create a simple Application that has FirstName, LastName and a label where I want to display the FullName later on.

Starting with the Persons Class:

public class Student
{
    public string FirstName { set; get; }
    public string LastName { set; get; }


    public string FullName
    {
        get
        {
            return this.FirstName + " " + this.LastName;
        }
    }
}

This should be correct, right?

My ViewModel looks like this:

public class StudentViewModel : ViewModelBase
{
    private Student _Student = new Student();

    public string FirstName
    {
        get { return _Student.FirstName; }
        set
        {
            _Student.FirstName = value;
            NotifyPropertyChanged("FirstName");
        }
    }

    public string LastName
    {
        get { return _Student.LastName; }
        set
        {
            _Student.LastName = value;
            NotifyPropertyChanged("LastName");
        }
    }

    public string FullName
    {
        get { return _Student.FullName; }
    }

}

Is this also correct?

Last but not least:

How do I actually display the FullName when I press a Button?

Possible duplicate of [MVVM: Tutorial from start to finish?](http://stackoverflow.com/questions/1405739/mvvm-tutorial-from-start-to-finish) — Tim, Feb 14 '16 at 19:00
@HenkHolterman Yeah, if i press a button it should display the Full Name in a label — Tenken, Feb 14 '16 at 19:02

Sudipta Kumar Sahoo · Answer 1 · 2016-02-14T19:38:13.063

as you said you are new to MVVM, in that case your code is good, But i would suggest a different approach for 'Student" class;

public class Student
{
    private string _firstName;
    private string _lastName;
    public Student(string firstName, string lastName)
    {
        _firstName = firstName;
        _lastName = lastName;
    }

    public string FullName
    {
        get
        {
            return _firstName + " " + _lastName;
        }
    }
}

Your viewmodel class is okay.

To display the Full Name on button press, you need to register to either "Button Click Event" or "Button Command".

You can create a label in .xaml file and bind with Full Name property in your view model. also bind you button with command in viewmodel like.

In .xaml file Modify view model like this

public class StudentViewModel : ViewModelBase
{
    public StudentViewModel 
    {
       ButtonCommand = //Initilaize it with relay command class.
    }
    //... Other stuff goes here

    ICommand ButtonCommand { get; private set; }

    private  void OnButtonCommand()
    {
       NotifyPropertyChanged("FullName");
    }

}

devuxer · Answer 2 · 2016-02-14T19:40:05.160

As @Tim said in his comment, you need to call NotifyPropertyChanged("FullName") from every property setter that could cause FullName to change (in this case, FirstName and LastName).

This would result in:

public string FirstName
{
    get { return _Student.FirstName; }
    set
    {
        _Student.FirstName = value;
        NotifyPropertyChanged("FirstName");
        NotifyPropertyChanged("FullName");
    }
}

public string LastName
{
    get { return _Student.LastName; }
    set
    {
        _Student.LastName = value;
        NotifyPropertyChanged("LastName");
        NotifyPropertyChanged("FullName");
    }
}

With the above changes, a button shouldn't be necessary if you all you want to do is display the full name based on the first name and last name. All you really need to do is have a TextBlock in your XAML that binds to FullName, like this:

<TextBlock Text="{Binding FullName}" />

As the first name or last name is updated, notification would immediately be sent that would cause the TextBlock to update to the new FullName.

What do you have in mind for the button? What would happen when you press it?

Based on the OP's comment, I'm adding an example of how a Button could be used.

First change your XAML to this:

<TextBlock Text="{Binding FullName}" Visibility="{Binding FullNameVisibility}" />
<Button Content="Display Full Name" Command="{Binding ShowFullNameCommand}" />

Second, change your view model to this:

public Visibility FullNameVisibility { get; private set; }
public ICommand ShowFullNameCommand { get; private set; }

public StudentViewModel(Student student)
{
    _Student = student;
    FullNameVisibility = Visibility.Hidden;
    ShowFullNameCommand = new RelayCommand(() => FullNameVisibility = Visibility.Visible);
}

When you start your app, the full name will be hidden. When the user clicks the button, full name will appear.

Note that this assumes you are using MVVM Light (which has RelayCommand). If you are using a different MVVM library, that command may be called something else.

Don't know who downvoted it because it is correct and works, but i want to start learning ICommand, so i want to display the FullName when i press the Button, not when the first or last name changes — Tenken, Feb 14 '16 at 19:32
@Tenken, yeah I'm not sure why either, but glad if I'm able to help. I updated my answer to show how a button may work to display the full name. Hope that gets you started on using `ICommand`. — devuxer, Feb 14 '16 at 19:56

Basic MVVM Application

2 Answers2