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?

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

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

edited May 23 '17 at 12:10

Community

1
1

answered Dec 09 '16 at 14:12

1ppCH

276
1
3
13

This was exactly the hint I needed to get it working. Setting the binding as you suggested worked. I'll do some more thorough reading on it too. Now to find out why the validation errors whilst being set in code are not showing up in the view. Thanks for the help. – Steve Dec 09 '16 at 14:47
1

@Steve Glad it helped. A problem/issue is usually a good start to read, learn and go more into details to understand what happened and why I didn’t work. – 1ppCH Dec 09 '16 at 15:14

Xaml Binding cannot see ViewModel in Template 10 app

1 Answers1