Add ViewModel to Mobile View - xaml

Question

I am working on making a separate set of views for mobile devices, rather than using additional adaptive UI states for the phone. I am able to achieve this by adding a sub-folder in my Views folder called DeviceFamily-Mobile and adding a new View with the same name as the one I am overriding.
I have the following View that will work and display "MOBILE" on a mobile device/emulator.
<Page x:Class="MyApp.PayeesPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:Template10.Behaviors"
xmlns:controls="using:Template10.Controls"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="using:MyApp.Models"
xmlns:viewModels="using:MyApp.ViewModels"
xmlns:views="using:MyApp.Views"
mc:Ignorable="d">
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="MobileTextBlock"
Foreground="{ThemeResource ForegroundColorBrush}"
Text="MOBILE" />
</RelativePanel>
</Page>
However, if I try to set the DataContext to allow me to actual display something useful, like so:
<Page.DataContext>
<viewModels:PayeesPageViewModel x:Name="ViewModel" />
</Page.DataContext>
Then I get an error when navigating to the PayeesPage:
Unable to cast object of type 'Windows.UI.Xaml.Controls.TextBlock' to type 'MyApp.ViewModels.PayeesPageViewModel'.
This is the same way I set the DataContext on the original PayeesPage and it works fine. Is there a different way to set the DataContext on these alternate Views, or am I missing something?

Answer 1

It turns out that the mobile View needs to have the same x:Class as the original Page. ReSharper was complaining when I tried to call it MyApp.Views.PayeesPage because that already existed, so I changed it to MyApp.PayeesPage. However, when I switched it back so that both were using the same x:Class then everything started working as expected.
Unfortunately, I am getting a bunch of red squigglies from ReSharper, but things are working as they should be. Just in case anyone comes across this question in the future:
Views/PayeesPage.xaml:
<Page x:Class="MyApp.Views.PayeesPage"
...>
Views/DeviceFamily-Mobile/PayeesPage.xaml:
<Page x:Class="MyApp.Views.PayeesPage"
...>