Добавить ViewModel в Mobile View

Я работаю над созданием отдельного набора представлений для мобильных устройств, вместо того, чтобы использовать дополнительные адаптивные состояния пользовательского интерфейса для телефона. Я могу добиться этого, добавив в мою папку Views подпапку с именем DeviceFamily-Mobile и добавив новый View с тем же именем, что и тот, который я заменяю.

У меня есть следующие View, которые будут работать и отображать "МОБИЛЬНЫЙ" на мобильном устройстве / эмуляторе.

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

Однако, если я попытаюсь установить DataContext, чтобы я мог отображать что-то полезное, например:

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

Затем я получаю сообщение об ошибке при переходе к PayeesPage:

Невозможно привести объект типа Windows.UI.Xaml.Controls.TextBlock к типу MyApp.ViewModels.PayeesPageViewModel.

Таким же образом я установил DataContext на исходном PayeesPage, и он отлично работает. Есть ли другой способ установить DataContext на этих альтернативных View, или мне что-то не хватает?


xaml uwp uwp-xaml
person dub stylee    schedule 05.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказывается, мобильный View должен иметь такой же x:Class, что и исходный Page. ReSharper жаловался, когда я пытался назвать его MyApp.Views.PayeesPage, потому что он уже существует, поэтому я изменил его на MyApp.PayeesPage. Однако, когда я переключил его обратно так, чтобы оба использовали один и тот же x:Class, все начало работать, как ожидалось.

К сожалению, я получаю кучу красных волнистых линий от ReSharper, но все работает так, как должно быть. На всякий случай, если кто-нибудь в будущем столкнется с этим вопросом:

Views / PayeesPage.xaml:

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

Views / DeviceFamily-Mobile / PayeesPage.xaml:

<Page x:Class="MyApp.Views.PayeesPage"
 ...>
person dub stylee    schedule 05.07.2016
comment
спасибо за то, что поделились своим решением, есть много статей о папке DeviceFamily-Type, например igrali.com/2015/08/02/ - person Franklin Chen - MSFT; 06.07.2016
comment
Это хорошая статья, в которой я получил много информации. Моя проблема заключалась в том, что ни одна информация, которую я обнаружил, не указывала на то, что представления должны использовать один и тот же x:Class, поэтому красные волнистые линии от ReSharper в этом случае немного вводили в заблуждение. - person dub stylee; 06.07.2016