Hinzufügen von ViewModel zu Mobile View

Question

Ich arbeite daran, separate Ansichten für mobile Geräte zu erstellen, anstatt zusätzliche adaptive UI-Status für das Telefon zu verwenden. Ich bin in der Lage, dies zu erreichen, indem ich einen Unterordner in meinem Views Ordner DeviceFamily-Mobile hinzufüge und einen neuen View mit dem gleichen Namen wie dem, den ich überschreibe, hinzufüge.

Ich habe die folgenden View, die funktioniert und "MOBILE" auf einem mobilen Gerät/Emulator anzeigen.

<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> 

Allerdings, wenn ich die DataContext zu setzen versuchen, mich nützlich zu tatsächlichen Anzeige etwas zu ermöglichen, etwa so:

<Page.DataContext> 
    <viewModels:PayeesPageViewModel x:Name="ViewModel" /> 
</Page.DataContext> 

Dann habe ich einen Fehler, wenn sie dem PayeesPage Navigation:

Das Objekt vom Typ 'Windows.UI.Xaml.Controls.TextBlock' konnte nicht in den Typ 'MyApp.ViewModels.PayeesPageViewModel' umgewandelt werden.

Dies ist die gleiche Art, wie ich die DataContext auf den ursprünglichen PayeesPage gesetzt und es funktioniert gut. Gibt es eine andere Möglichkeit, die DataContext auf diese alternativen View s zu setzen, oder fehle ich etwas?

Answer 1

Es stellt sich heraus, dass das mobile View das gleiche x:Class wie das Original Page haben muss. ReSharper beschwerte sich, als ich versuchte, es MyApp.Views.PayeesPage zu nennen, weil das bereits existierte, also änderte ich es zu MyApp.PayeesPage. Aber als ich es zurückstellte, so dass beide das gleiche x:Class verwendeten, dann fing alles an, wie erwartet zu arbeiten.

Leider bekomme ich ein paar rote Squigglies von ReSharper, aber die Dinge funktionieren so, wie sie sein sollten. Nur für den Fall kommt jemand über diese Frage in die Zukunft:

Views/PayeesPage.xaml:

<Page x:Class="MyApp.Views.PayeesPage" 
...> 

Views/DeviceFamily-Mobile/PayeesPage.xaml:

<Page x:Class="MyApp.Views.PayeesPage" 
...>