Using MvvmCross to create your first Xamarin App
Implementing MasterDetail layout in Xamarin.Forms by MvvmCross
Creating the UWP project
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:
1
Install-Package MvvmCross.Forms
Copied!
Then install the
MvvmCross.Forms package in the NuGet Package Manager:
Or you can input the command below in the Package Manager Console:
1
Install-Package MvvmCross.Forms
Copied!
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:1
public abstract class UWPApplication : MvxWindowsApplication<MvxFormsWindowsSetup<Core.App, UI.App>, Core.App, UI.App, MainPage>
2
{
3
}
Copied!
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: https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/App.xaml.cs.pp. At last, the App.xaml.cs look like this:1
using MvvmCross.Forms.Platforms.Uap.Core;
2
using MvvmCross.Forms.Platforms.Uap.Views;
3
​
4
namespace MvvmCrossDemo.Forms.Uwp
5
{
6
/// <summary>
7
/// Provides application-specific behavior to supplement the default Application class.
8
/// </summary>
9
sealed partial class App : UWPApplication
10
{
11
/// <summary>
12
/// Initializes the singleton application object. This is the first line of authored code
13
/// executed, and as such is the logical equivalent of main() or WinMain().
14
/// </summary>
15
public App()
16
{
17
this.InitializeComponent();
18
}
19
}
20
​
21
public abstract class UWPApplication : MvxWindowsApplication<MvxFormsWindowsSetup<Core.App, UI.App>, Core.App, UI.App, MainPage>
22
{
23
}
24
}
Copied!
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:1
<local:UWPApplication
2
x:Class="MvvmCrossDemo.Forms.Uwp.App"
3
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5
xmlns:local="using:MvvmCrossDemo.Forms.Uwp">
6
</local:UWPApplication>
Copied!
You can find the code of the App.xaml here: https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/App.xaml.pp.
Open the
MainPage.xaml file and add the reference by this code:1
xmlns:forms="using:MvvmCross.Forms.Platforms.Uap.Views"
Copied!
Change the class of the
MainPage to MvxFormsWindowsPage. The result is:1
<forms:MvxFormsWindowsPage
2
x:Class="MvvmCrossDemo.Forms.Uwp.MainPage"
3
xmlns:forms="using:MvvmCross.Forms.Platforms.Uap.Views"
4
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6
xmlns:local="using:MvvmCrossDemo.Forms.Uwp"
7
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9
mc:Ignorable="d"
10
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11
​
12
<Grid>
13
​
14
</Grid>
15
</forms:MvxFormsWindowsPage>
Copied!
You can find the source code of this file here: https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/MainPage.xaml.pp.
Open the
MainPage.xaml.cs and remove the base class of it, like this:1
namespace MvvmCrossDemo.Forms.Uwp
2
{
3
/// <summary>
4
/// An empty page that can be used on its own or navigated to within a Frame.
5
/// </summary>
6
public sealed partial class MainPage
7
{
8
public MainPage()
9
{
10
this.InitializeComponent();
11
}
12
}
13
}
Copied!
Find the sample code here: https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/UWPContent/MainPage.xaml.pp.
Now the UWP project based on
Xamarin.Forms is done. Launch it and you will see the result:
Last modified 3yr ago
Copy link