N=0 : A first MvvmCross Application (N+1 days of MvvmCross)

As the first step in N+1 days of MvvmCross, here's a first video.



In it, we make a core library containing the App and our first ViewModel:

1. We create a first PCL Core library
2. We add MvvmCross Hot Tuna StarterPack using NuGet
3. We change the namespace on the App and ViewModel
4. We add some more logic to the ViewModel - just a simple FirstName, LastName property pair with a calculated FullName

Then, we add a Windows Store UI:

1. We create a WindowsStore UI project
2. We add a reference to the PCL Core
3. We add MvvmCross Hot Tuna StarterPack using NuGet
4. We change the namespace on the generated Setup
5. We make some small changes to the default App.xaml,cs file
6. We then add a Views folder and a FirstView
7. This adds a Common/LayoutAwarePage - which we edit a little to turn it into an MvxStorePage
8. We can then add some Databound TextBlock's and TextBox'es to the XAML
9. We can then hit F5 to run the app

Then we add a Droid UI:

1. We create a Xamarin.Android UI project
2. We add a reference to the PCL Core
3. We add MvvmCross Hot Tuna StarterPack using NuGet
4. We change the namespace on the generated Setup, SplashScreen and FirstView classes
5. We edit the FirstView AXML file to include the correct local XML namespace
6. We can then add some Databound EditText's and TextView's to the AXML
7. We can then hit F5 to run the app - this takes a little time because I hadn't set up the emulator beforehand - sorry!

 Then we add a WindowsPhone UI:

1. We create a WindowsPhone UI project
2. We add a reference to the PCL Core
3. We add MvvmCross Hot Tuna StarterPack using NuGet
4. We change the namespace on the generated Setup
5. We make some small changes to the default App.xaml.cs file
6. We then add a Views folder and a FirstView
7. We then need to change the inheritance on this FirstView in both the XAML and in the C# - so that the View inherits from MvxPhonePage
8. We can then add some Databound TextBlock's and TextBox'es to the XAML
9. We can then hit F5 to run the app

 Then we add an iPhone UI:

1. We create a Xamarin.iOS iPhone HelloWorld UI project
2. We add a reference to the PCL Core
3. We add MvvmCross Hot Tuna StarterPack using NuGet
4. We change the namespace on the generated Setup file
5. We make some small changes to the default AppDelegate.cs file
6. We then add a Views folder and a FirstView - using the iPhone UIViewController template
7. We then change the inheritance on this FirstView so that the View inherits from MvxViewController instead of UIViewController
8. To create the UI within Visual Studio, we can then add some Databound UITextField's and UILabel's using some simple code (we will use a designer in a later exercise)
9. We can then hit F5 to run the app - using TeamViewer to connect to a remote Mac
10. This causes some problems - which we mainly fix by tweaking the 'set as startup project' settings, and by setting the ApplicationName, Identifier and Version for the iPhone app.

The finished code is in https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-00-FirstDemo

To get this working, users will need to:

• install Visual Studio 2012 - Pro - or higher
• install Xamarin.Android and Xamarin.iOS
• install the PCL reference assembly XML files - see notes in http://slodge.blogspot.co.uk/2013/03/xamarinios-with-mvvmcross-in-vs2012.html and http://slodge.blogspot.co.uk/2012/12/cross-platform-winrt-monodroid.html
• install the Beta of NuGet 2.5 - https://nuget.codeplex.com/

Please feel free to let me know what you think of this type of tutorial - if you like these, then I'll see if I can make one of these every day - and I'm happy for others to add their tutorials too :)