用于MVVM的DataTemplate：它去哪里了？

Question

I'm working on a "Modern UI" application so the syntax is a bit new for me and I just can't seem to get my bindings to work properly.

My desire is to have a ViewModel first design so that on my apps pages I can just do things like have a ListView and add a UserViewModel as a child, and have the DataTemplate be found automatically to create a UserView and bind to the supplied UserViewModel.

I do something similar for a different app written for Win 7 desktop and it just works but for the life of me I can't figure out why it doesn't work here. I just get in my ListView "UserViewModel" as text (no UserControl created).

The only other difference here is it is the first time I'm using async functions since it pretty much is forced on you for Win 8 development, and that is the methods I get from the WCF service I'm pulling my data from.

Here's an example of my view model:

 public class UserViewModel
{
    private UserDTO _user { get; set; }

    public UserViewModel(UserDTO user)
    {
        _user = user;
    }

    public UserViewModel(int userId)
    {
        SetUser(userId);
    }

    private async void SetUser(int userId)
    {
        ServiceClient proxy = new ServiceClient();
        UserDTO referencedUser = await proxy.GetUserAsync(userId);
    }

    public string FirstName
    {
        get
        {
            return _user.FirstName;
        }
    }

    public string LastName
    {
        get
        {
            return _user.LastName;
        }
    }

    public string Email
    {
        get
        {
            return _user.email;
        }
    }
}

The view is supposed to be all XAML and glued together in the application resources as follows:

<UserControl x:Class="TaskClient.Views.UserView" ...
    xmlns:root="using:TaskClient"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="30"
    d:DesignWidth="200">
    <StackPanel Orientation="Horizontal" Margin="5, 0, 0 ,0" DataContext="{Binding}">
        <TextBlock x:Name="FirstNameLabel" Text="{Binding FirstName}"/>
        <TextBlock x:Name="LastNameLabel" Text="{Binding LastName}"/>
        <TextBlock x:Name="EmailLabel" Text="{Binding Email}"/>
    </StackPanel>
</UserControl>

and :

<Application x:Class="TaskClient.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TaskClient"
xmlns:localData="using:TaskClient.Data" 
xmlns:vm="using:ViewModels"
xmlns:vw="using:TaskClient.Views">

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

            <!-- 
                Styles that define common aspects of the platform look and feel
                Required by Visual Studio project and item templates
             -->
            <ResourceDictionary Source="Common/StandardStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <!-- Application-specific resources -->

        <x:String x:Key="AppName">TaskClient</x:String>

        <DataTemplate x:Key="vm:UserViewModel">
            <vw:UserView />
        </DataTemplate>
    </ResourceDictionary>
</Application.Resources>

I've tried searching for an hour or so now through various examples (eg. http://joshsmithonwpf.wordpress.com/a-guided-tour-of-wpf/ ) and haven't been able to find an example that works in my case.

Any idea what I'm doing wrong?

Answer 1

Could be a typo but you don't seem to update the "_user" field when you fetch a user via WCF service. You probably need to change this:

private async void SetUser(int userId)
{
    ServiceClient proxy = new ServiceClient();
    UserDTO referencedUser = await proxy.GetUserAsync(userId);
}

To this:

private async void SetUser(int userId)
{
    ServiceClient proxy = new ServiceClient();
    _user = await proxy.GetUserAsync(userId);
}

Also I don't see your ViewModel class implementing INotifyPropertyChange interface which is the key to WPF databinding. Once that's done and you have loaded a user, you need to notify WPF about properties being updated:

private async void SetUser(int userId)
{
    ServiceClient proxy = new ServiceClient();
    _user = await proxy.GetUserAsync(userId);
    NotifyOfPropertyChange();
}

private void NotifyOfPropertyChange() 
{
    NotifyChanged("FirstName"); //This would raise PropertyChanged event.
    NotifyChanged("LastName");
    NotifyChanged("Email");
}

Answer 2

I just get in my ListView "UserViewModel" as text (no UserControl created)

Your DataTemplate needs be defined with the DataType property and no x:Key property, for the DataTemplate to get applied implicitly

<DataTemplate DataType="{x:Type vm:UserViewModel}">
    <vw:UserView />
</DataTemplate>

A DataTemplate with a DataType specified but no x:Key is an Implicit DataTemplate, meaning it will be used implicitly anytime WPF needs to draw an object of the specified data type.

A DataTemplate with an x:Key property needs to actually be specified in your code by key, such as

<ListView ItemTemplate="{StaticResource MyKey}" ... />

Also, I'm not sure if the title of your question ( "DataContext for MVVM: where does it go?" ) is a typo or not since your question body doesn't appear to be asking about the DataContext , however I have an beginners article on my blog explaining the DataContext that you may be interested in if you're struggling to understand the DataContext