pass specific ID to MVVM

Question

Thre's something I don't get. If i have for instance a profile.xaml page and I have a ProfileViewModel with a user instance. How do I tell the ProfileViewModel with a User property to load user with an id that I want?

I mean : How do I pass a userid to the profileviewmodel when I click a button in another page to open that page?

For Instance

Userlist.xaml has a list of users. One is clicked and an instance of Profile.Xaml is loaded, but how do I pass the userId onto the viewmodel? Won't i need some dependencyproperty in profile.xaml and then pass it on?

Please tell me if this makes sense to you :)

Answer 1

There are multiple options, here.

If you're working from within a "parent" ViewModel, you can potentially construct a new ProfileViewModel with the specific user ID, and set it to a property that is picked up by your View directly. This is the approach I used in my MVVM article.

Alternatively, if you have a single ProfileViewModel (and ProfileView) and it's not "connected" to the screen/view where you're picking the user directly, the best option is typically to use some form of messaging service. This is the approach MVVM Light uses.

Answer 2

You should consider binding your list of users in Userlist.xaml to a collection of ProfileViewModel instances, then you can just provide the specific ProfileViewModel to the profile.xaml.

In this example, your Userlist.xaml would include:

<UserControl Name="userView">
    <!-- other stuff -->
    <ItemsControl ItemsSource={Binding Users}>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding UserName}" />
                    <Button Content="View User Profile"
                    Command="{Binding ElementName=userView, Path=DataContext.ViewUserProfileCommand}"
                    CommandParameter="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <!-- other stuff -->
</UserControl>

And your UserlistViewModel would include:

    #region Users Property

    public const string UsersPropertyName = "Users";

    private ObservableCollection<IProfileViewModelViewModel> _users;

    public ObservableCollection<IProfileViewModelViewModel> Users
    {
        get { return _users; }
        set
        {
            if (_users == value)
                return;

            _users = value;
            RaisePropertyChanged(UsersPropertyName);
        }
    }

    #endregion

    public RelayCommand<IProfileViewModel> ViewUserProfileCommand
        = new RelayCommand<IProfileViewModel>(ViewUserProfileCommandExecute);

    private void ViewUserProfileCommandExecute(IUserProfileViewModel userProfileViewModel)
    {
        // display your profile view here
    }

As Reed mentioned above, one way to pass the user profile view model to your other page would be MVVM Light Toolkit's messaging.