Add Windows 8.1 Store Basic Page using MvvmCross (No Longer inherits from LayoutAware class)

In Windows 8.1, when you add a View/Page based upon a Windows 8.1 Basic Page it no longer inherits from LayoutAware class because it no longer exists in Win 8.1. All Basic Pages now inherit directly from Page class and required to do so. Additionally, it no longer has an OnNavigatedTo/OnNavigatedFrom event as the Win8.1 Basic page now leverages the NavigationHelper class and calls this.navigationHelper.LoadState and this.navigationHelper.SaveState event handlers. If using the TipCalc sample and adding a Windows Store Basic Page, TipView, initial page would look like:

public sealed partial class TipView : Page
{

    private NavigationHelper navigationHelper;
    private ObservableDictionary defaultViewModel = new ObservableDictionary();

    /// <summary>
    /// This can be changed to a strongly typed view model.
    /// </summary>
    public ObservableDictionary DefaultViewModel
    {
        get { return this.defaultViewModel; }
    }

    /// <summary>
    /// NavigationHelper is used on each page to aid in navigation and 
    /// process lifetime management
    /// </summary>
    public NavigationHelper NavigationHelper
    {
        get { return this.navigationHelper; }
    }

    public TipView()
    {
        this.InitializeComponent();
        this.navigationHelper = new NavigationHelper(this);
        this.navigationHelper.LoadState += navigationHelper_LoadState;
        this.navigationHelper.SaveState += navigationHelper_SaveState;
    }

Since the TipView page now inherits directly from Page, if you change the TipView Page to inherit from MvxStorePage like noted below:

public sealed partial class TipView : MvxStorePage
  {

      private NavigationHelper navigationHelper;
      private ObservableDictionary defaultViewModel = new ObservableDictionary();

Since the Page is a partial class the following error occurs:

Partial declarations of 'TipCalc.CrossPlat.WinStore.Views.TipView' must not specify different base classes.

And even if it would allow for the change in the base class to MvxStorePage, you cannot add base.OnNavigatedTo(e) in LoadState event handler as noted:

private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
   base.OnNavigatedTo(e);
}

because e parameter in OnNavigatedTo is looking for NavigationEventArgs vs. LoadStateEventArgs.

So I can't start the app w/TipView page, if I change App.xaml.cs as I should for a MvvmCross project.

I have hacked it to make it work with code noted below:

public sealed partial class TipView : Page, IMvxStoreView, IMvxView, IMvxDataConsumer
    {
        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        /// <summary>
        /// This can be changed to a strongly typed view model.
        /// </summary>
        public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

        /// <summary>
        /// NavigationHelper is used on each page to aid in navigation and 
        /// process lifetime management
        /// </summary>
        public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }

        protected IMvxSuspensionManager _suspensionManager { get; set; }
        private TipViewModel _viewModel { get; set; }

        public new IMvxViewModel ViewModel 
        {
            get { return _viewModel; }
            set { _viewModel = (TipViewModel)value; }
        }

        public TipView()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.navigationHelper.SaveState += navigationHelper_SaveState; 

        }

        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {

        }

        private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
        {
        }

        public void ClearBackStack()
        { 

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedFrom(e);
        }

    }
}

Any help will be greatly appreciated as I need to complete my cross-platform PCL project which has a Windows 8.1 implementation.

Posts

  • TaraewTaraew USMember, Beta
    edited December 2013

    @Cheesebaron: Yes, I did. I think the dilemma is that in 8.1 LayoutAware.cs does not exist. Even if you add a Basic Page, it no longer adds Common/LayoutAware.cs and has the Basic Page inherit from LayoutAware class. So the OnNavigatedTo(e) and OnNavigatedFrom(e) methods are less of an issue than the issue that I can no longer have
    public class NewPage : LayoutPage and have public class LayoutPage: MvxStorePage as typically done for Windows 8.0 pages when using MvvmCross. I am using some of the new API and Controls of Win8.1 so I do not want to add a Win8.0 page just to resolve this.

    Any thoughts? As I noted, I have hacked it as noted by having by have the Page inherit from the same interfaces of the MvxStorePage abstract class, and implement properties and method required by those interfaces.

  • CheesebaronCheesebaron DKInsider, University mod

    No idea at all, I don't dabble in Windows Store projects right now :-/

  • TaraewTaraew USMember, Beta

    I found the answer to how to resolve this without the hack I noted above, but the hack lead me to the answer. I am posting for anyone else that may have the issue in wanting to add a Win8.1 page that inherits from the MvvmCross Store Page.

    The answer lies in that the Win8/Win8.1 Page class that is found in Page.xaml.cs is a partial class which the entire completed class definition is built/comprised both in CS and in XAML which are collectively compiled to build entire class for the page.

    So if you have a TipView page, change the TipView page inherit from MvxStorePage by altering code as follows:

    public sealed partial class TipView: MvxStorePage
    

    then go to the TipView page XAML file and change declaration of the default root Page node from:

    <Page
        x:Name="pageRoot"
        x:Class="TipCalc.CrossPlat.WinStore.Views.TipView"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TipCalc.CrossPlat.WinStore.Views"
        xmlns:common="using:TipCalc.CrossPlat.WinStore.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    

    to be changed to the following Page node declaration and add MvvmCross MvxStorePage namespace as follows:

    <StorePage:MvxStorePage
        x:Name="pageRoot"
        x:Class="TipCalc.CrossPlat.WinStore.Views.TipView"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TipCalc.CrossPlat.WinStore.Views"
        xmlns:StorePage="using:Cirrious.MvvmCross.WindowsStore.Views"
        xmlns:common="using:TipCalc.CrossPlat.WinStore.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"> 
    

    Key thing to note: The StorePage namespace in StorePage: MvxStorePage is being referenced by adding the namespace to Cirrious.MvvmCross.WindowsStore.Views by including the line:

    xmlns:StorePage="using:Cirrious.MvvmCross.WindowsStore.Views"
    

    in the XAML page declaration. Once I have done this, it works like a charm.

  • jbzjhan09jbzjhan09 PHMember

    thanks man ! really helped me :smile:

Sign In or Register to comment.