Xaml Binding cannot see ViewModel in Template 10 app

Question

I'm using the latest Template 10 VS extension to create a UWP Windows 10 mobile app. I've updated the template to use IOC (Autofac) so the ViewModels get resolved in the app.xaml.cs overridden INavigable ResolveForPage(Page page, NavigationService) method. I've also updated the Page classes to each have a ViewModel property such as:

public sealed partial class LoginPage : Page
{
    private LoginPageViewModel _viewModel;

    public LoginPageViewModel ViewModel => _viewModel ?? (_viewModel = (LoginPageViewModel)DataContext);

    public LoginPage()
    {
        InitializeComponent();
        NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
    }
}

This has been fine until now as I've only used x:Bind in views and the binding to the viewmodel works. Since I installed the Template 10 validation package I've updated some views to use the older Binding method such as

<validate:ControlWrapper PropertyName="Password">
            <TextBox x:Name="Password" 
                 HorizontalAlignment="Left"
                 Margin="10,220,0,0" 
                 TextWrapping="Wrap"
                 Text="{Binding ViewModel.LoginModel.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                 VerticalAlignment="Top"
                 Width="{StaticResource FieldWidth}"
                 Height="60" 
                 PlaceholderText="Password" 
                 FontSize="24" 
                 InputScope="Password">
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior>
                        <Behaviors:FocusAction />
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </TextBox>
        </validate:ControlWrapper>

This issue I have is that the text binding, Text="{Binding ViewModel.LoginModel.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" doesn't work with the error Cannot resolve symbol ViewModel due to unknown DataContext.

As I'm new to UWP I think I'm missing some required configuration to ensure the DataContext is set to the correct ViewModel. I did try adding DataContext = this in the app.xaml.cs constructor but this didn't work.

Can anyone tell me which part of the puzzle I am missing?

Answer 1

Check here for the difference between the new x:Bind and the old Binding difference-between-binding-and-xbind. According to the error message, the old binding is looking for a property called "ViewModel" on the DataContext of the Page. But the DataContext is of type "LoginPageViewModel" with the Property "LoginModel"? So if I'm right, you need to change the text binding to something like

Text="{Binding LoginModel.Password, Mode=...

I think this should be a good start to guide you in the right direction ;)

Also helpful to learn and unterstand the difference between the old and new binding: data-binding-in-depth