Xamarin & MvvmCross Handbook
  • Introduction
  • Using MvvmCross to create your first Xamarin App
    • Creating the Core project
      • Understanding MVVM
      • Adding a simple Service
      • Adding a ViewModel
      • Adding an App class
    • Creating the Android project
      • Adding an Android Application class
      • Adding the Android Layout View (AXML)
      • Understanding the data-binding syntax
      • Adding the View class
    • Creating the iOS project
      • Updating the AppDelegate class
      • Adding the iOS View for the first ViewModel
      • Understanding the data-binding syntax
    • Creating the UWP project
      • Updating the App.xaml.cs and the App.xaml
      • Adding the UWP View
      • Understanding the data-binding syntax
    • Creating the REST API Service
      • Creating the models
      • Creating the interface and the implementation for the PostService
      • Creating the ViewModel
      • Adding the View for the Android project
      • Adding the View for the iOS project
      • Adding the View for the UWP project
    • Navigation
      • Creating the PostDetail View & ViewModel
      • Command with the parameter
      • Retrieving the param from the previous ViewModel
      • Understanding the IMvxNavigationService
      • Responding the events from different controls in the ListView
      • Retrieving the return result from the previous ViewModel
    • Creating the Xamarin.Forms project
      • Creating the Forms.UI project
      • Adding the App.xaml and the App.xaml.cs
      • Adding the View
      • Creating the Android project
      • Creating the iOS project
      • Creating the UWP project
      • Summary For Forms
    • Summary
  • Implementing MasterDetail layout in Xamarin.Forms by MvvmCross
    • Introduction
    • Creating the project by MvxScaffolding
    • Creating the MasterDetailPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the MasterPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the DetailPages
      • Creating the ViewModels
      • Creating the XAML files
    • Implementing the Menu functionalities
      • Displaying the MasterPage and the DetailPage
      • Setting the menu navigation
      • The other approaches to set the data-binding
    • Fine-tuning the UI
      • Adding the hamburger icon for iOS
      • Adding the header bar for Android and iOS
      • Adjust the height of the item for UWP
    • Summary
Powered by GitBook
On this page

Was this helpful?

  1. Using MvvmCross to create your first Xamarin App
  2. Creating the Xamarin.Forms project

Creating the UWP project

PreviousCreating the iOS projectNextSummary For Forms

Last updated 6 years ago

Was this helpful?

Now let us create the UWP project based on Xamarin.Forms. Add a new Blank App (Windows Universal) project to the solution:

Select the proper version of Windows 10:

Install the Xamarin.Forms package in the NuGet Package Manager:

Or use the command below in the Package Manager Console:

Install-Package MvvmCross.Forms

Then install the MvvmCross.Forms package in the NuGet Package Manager:

Or you can input the command below in the Package Manager Console:

Install-Package MvvmCross.Forms

Then add the references to the MvvmCrossDemo.Core project and the MvvmCrossDemo.Forms.UI project by right-clicking the MvvmCrossDemo.Forms.Uwp project in the solution explorer:

Open the App.xaml.cs file and add a new class with name UWPApplication, as shown below:

public abstract class UWPApplication : MvxWindowsApplication<MvxFormsWindowsSetup<Core.App, UI.App>, Core.App, UI.App, MainPage>
{
}
using MvvmCross.Forms.Platforms.Uap.Core;
using MvvmCross.Forms.Platforms.Uap.Views;

namespace MvvmCrossDemo.Forms.Uwp
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : UWPApplication
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
        }
    }

    public abstract class UWPApplication : MvxWindowsApplication<MvxFormsWindowsSetup<Core.App, UI.App>, Core.App, UI.App, MainPage>
    {
    }
}

Accordingly, we need update the App.xaml file to update the base class to make it to inherit from the UWPApplication class, as shown below:

<local:UWPApplication
    x:Class="MvvmCrossDemo.Forms.Uwp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MvvmCrossDemo.Forms.Uwp">
</local:UWPApplication>

Open the MainPage.xaml file and add the reference by this code:

xmlns:forms="using:MvvmCross.Forms.Platforms.Uap.Views"

Change the class of the MainPage to MvxFormsWindowsPage. The result is:

<forms:MvxFormsWindowsPage
    x:Class="MvvmCrossDemo.Forms.Uwp.MainPage"
    xmlns:forms="using:MvvmCross.Forms.Platforms.Uap.Views"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MvvmCrossDemo.Forms.Uwp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

    </Grid>
</forms:MvxFormsWindowsPage>

Open the MainPage.xaml.cs and remove the base class of it, like this:

namespace MvvmCrossDemo.Forms.Uwp
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

Now the UWP project based on Xamarin.Forms is done. Launch it and you will see the result:

Update the App class to inherit from UWPApplication class and remove all the other pre-generated methods except for the constructor. Only keep the InitializeComponent() method in the constructor. You can find the source code of this file here: . At last, the App.xaml.cs look like this:

You can find the code of the App.xaml here: .

You can find the source code of this file here: .

Find the sample code here: .

https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/App.xaml.cs.pp
https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/App.xaml.pp
https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/MainPage.xaml.pp
https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/MainPage.xaml.pp