Steps to create an MvvmCross App

by Ishai Hachlili 10. October 2016 21:08

These steps are for creating the basic MvvmCross app which will be the starting point for talks at the Silicon Valley X.Net meetup



Create the solution and projects

  1. Create a new Portable Class Library Project (Portable for iOS, Android and Windows) - The name of the project should end with .Core ({AppName}.Core)
    Make sure to delete the .Core from the solution name (to avoid confusion...)
  2. Add a new Android Blank App project – The name of the project should end with .Droid (there are issues with projects that end with .Android, Droid is a common convention)
  3. Add a new iOS Universal Blank App project – The name should end with Touch or iOS to keep with the conventions of most MvvmCross projects
  4. Add a new Windows project (Windows 8.x, Windows Phone 8.1 or Windows UWP. Silverlight WP apps are no longer supported. UWP apps will require more manual setup work).



Add MvvmCross

  1. Go to Manage NuGet packages for the solution (right click on the solution and select Manage Nuget Packages)
  2. Search for MvvmCross StarterPack and add the package to all projects



  1. Follow the ToDo for Android (add Core project as reference, delete MainActivity)
  2. Change icon in splash screen (we don't have a midmap icon, use a drawable for now)
  3. Run Android App in VS Emulator or on device to make sure it works



  1. Follow ToDo for iOS (add Core project as reference, update AppDelegate inheritance and FinishedLaunching method based on AppDelegate.cs.txt, you can simply copy all of the contents from the txt file over to AppDelegate.cs)
  2. Run iOS app to make sure everything works



  1. Follow ToDo for Windows (add Core project, update App.xaml.cs with the four line setup initialization code)
  2. Run app to make sure everything works


Windows UWP

UWP projects/nuget 3.0 won't add the code files included with the starter pack. You will have to do it manually. The same will be true when adding plugins later on (bootstrap files will need to be added manually)


  1. Add a class named Setup.cs in the root of the Windows UWP project:
    public class Setup : MvxWindowsSetup
            public Setup(Frame rootFrame) : base(rootFrame)
            protected override IMvxApplication CreateApp()
                return new Core.App();
            protected override IMvxTrace CreateDebugTrace()
                return new DebugTrace();
  1. Add a class named DebugTrace in the root of the Windows UWP project:
    public class DebugTrace : IMvxTrace
            public void Trace(MvxTraceLevel level, string tag, Func<string> message)
                Debug.WriteLine(tag + ":" + level + ":" + message());
            public void Trace(MvxTraceLevel level, string tag, string message)
                Debug.WriteLine(tag + ":" + level + ":" + message);
            public void Trace(MvxTraceLevel level, string tag, string message, params object[] args)
                    Debug.WriteLine(tag + ":" + level + ":" + message, args);
                catch (FormatException)
                    Trace(MvxTraceLevel.Error, tag, "Exception during trace of {0} {1} {2}", level, message);
  1. Create a Views folder
  2. Add a blank page to the Views folder and name it FirstView
  3. Change the base class of FirstView to MvxWindowsPage (in XAML and code behind)
  4. Add the following XAML to the view:
        <TextBox Text="{Binding Hello, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Text="{Binding Hello}" />


  1. Add a reference to the Core project
  2. Delete MainPage.xaml
  3. Update App.xaml.cs (add the four lines of code to initialize the app, look for the MainPage initialization code and replace it)
    if (rootFrame.Content == null)
        var setup = new Setup(rootFrame);
        var start = Mvx.Resolve<IMvxAppStart>();


You should be able to build and run the UWP app now



Add keyboard shortcuts to your MVVM UWP App

by Ishai Hachlili 28. January 2016 07:22


Adding shortcuts to your app will make life easier for your users.

On a PC users would expect shortcuts and now with Windows 10/UWP these shortcuts will work on Mobile apps as well when a keyboard is connected.

When used on a phone with Continuum an app that supports full screen and keyboard shortcuts will give the user a great experience.

I use MVVM for all my apps and I try to avoid code behind in pages (I aim for one line of code in my *.xaml.cs files, InitializeComponent();) so I wanted a nice way to define keyboard interactions in XAML.


Enter Template10

Template10 is an open source project from Jerry Nixon and other Microsoft Developer Evangelists.

There's a lot of good stuff in Template10 but one of the things that caught my eye was the TextBoxEnterKeyBehavior. I quickly used it to add Enter key support in login and search forms.

It's very simple to use:

<TextBox Header="Search:" Text="{Binding SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" >
                              <core:InvokeCommandAction Command="{Binding SearchCommand}"/>

I'm using the InvokeCommandAction to execute a command in my ViewModel but you could use other actions as well (to change focus for example).

Notice the added UpdateSourceTrigger=PropertyChange in the TextBox binding, without it the typed value won't be updated before the command executes (thanks janabimustafa).


Keyboard Shortcuts

Once I saw how simple it is to add keyboard support with a behavior, I decided to add a bunch of shortcuts. Since I now wanted to use other keys and not just the enter key I created a new behavior and added a Key property to it. I also changed the behavior target to Control so you can set it up on a whole page or grid.

 Here's a gist of the new behavior

 To use it add a behavior and define the Key you want to list to:

        <behaviors:KeyUpBehavior Key="Left">
            <core:InvokeCommandAction Command="{Binding ShowPreviousItemCommand}"/>
        <behaviors:KeyUpBehavior Key="Right">
            <core:InvokeCommandAction Command="{Binding ShowNextItemCommand}"/>

Key Modifiers (Control, Shift)

I was using that last sample to control paging, it's much nicer to be able to use the keyboard to move between items but what about saving an item or adding a new one? 

I needed to add support for Control and Shift modifiers. I added another property for the modifier and updated the code to check if modifiers were set.

Here's the diff

To use it in your XAML:

        <behaviors:KeyUpBehavior Key="S" KeyModifier="Control,Shift">
            <core:InvokeCommandAction Command="{Binding SaveAndPublishCommand}"/>
        <behaviors:KeyUpBehavior Key="S" KeyModifier="Control">
            <core:InvokeCommandAction Command="{Binding SaveDraftCommand}"/>

As you can see, you can use one or more modifiers. In this sample I'm using CTRL+S to save a draft and CTRL+SHIFT+S to save and publish.

Now just add tooltips so users can discover your app supports shortcuts (add ToolTipService.ToolTip="Ctrl+S" to the save button for example) and you're all set.

You can actually use this KeyUpBehavior for the Enter key functionality as well.


I hope you find it useful in your apps. 

Tags: , , , ,


Using the MvvmCross PictureChooser plug-in with a Windows Phone 8.1 XAML app

by Ishai Hachlili 30. January 2015 21:23

As we're getting closer to the release of Windows 10 for both phones and PCs I figured it's time to migrate some of my apps from WP Silverlight to WP XAML.

Most of my apps use MvvmCross, which allows me to use MVVM (and binding) with Xamarin.iOS and Xamarin.Android as well as Windows Phone of course.


One of the plugins I often use in my apps is the PictureChooser plugin. This plugin makes it easy to take a picture or choose a picture from the gallery on all platforms with a couple of lines of code in your ViewModel.

Here's a sample ViewModel Code:

        private readonly IMvxPictureChooserTask _pictureChooserTask;

        private const int MaxPicturePixelDimension = 640;
        private const int PictureQuality = 100;

        public FirstViewModel(IMvxPictureChooserTask pictureChooserTask)
            _pictureChooserTask = pictureChooserTask;

        private byte[] _pictureBytes;
        public byte[] PictureBytes
            get { return _pictureBytes; }
            set { _pictureBytes = value; RaisePropertyChanged(()=>PictureBytes); }

        public ICommand SelectPictureCommand
            get { return new MvxCommand(SelectPicture); }

        private async void SelectPicture()
            var pictureStream = await _pictureChooserTask.ChoosePictureFromLibraryAsync(MaxPicturePixelDimension, PictureQuality);

            var memoryStream = new MemoryStream();
            await pictureStream.CopyToAsync(memoryStream);
            PictureBytes = memoryStream.ToArray();

The actual code to launch the picture gallery is that one line of code calling ChoosePictureFromLibrary on the PictureChooserTask. The rest of the code deals with displaying the selected picture.

The plugin also includes the TakePictureAsync method, but in Windows Phone 8.1 there is no separate TakePictureTask, instead, the gallery includes a camera button.

The PictureChooserTask worked great in Windows Phone 8, Android and iOS. With a Windows Phone 8.1 XAML app nothing was happening after I selected a picture.

As I started looking into the MvvmCross code to figure it out, I saw this comments:

            // This method requires that PickFileContinuation is implemented within the Windows Phone project and that
            // the ContinueFileOpenPicker method on the View invokes (via the ViewModel) the ContinueFileOpenPicker method
            // on this instance of the MvxPictureChooserTask

So here's what you need to actually do

  1. Add the ContinuationManager class from Microsoft's documentation to your Windows Phone app
  2. In App.xaml.cs add a ContinuationManager property
    public ContinuationManager ContinuationManager { get; private set; }
  3. Also in App.xaml.cs, override OnActivated and add the following two lines:
      ContinuationManager = new ContinuationManager();
      ContinuationManager.Continue(args as IContinuationActivatedEventArgs);
  4. In your ViewModel class add a public method
      public void ContinueFileOpenPicker(object args)
  5. In the code behind for the view, add the interface IFileOpenPickerContinuable and implement the ContinueFileOpenPicker method:

This code should complete the loop. The PictureChooser plugin's ContinueFileOpenPicker will process the image just like it does for other platforms (in my sample ViewModel above, execution will continue with the stream in the SelectPicture method, as expected)


 Here's the complete project on GitHub

Tags: ,


About Ishai

Ishai is the founder of Smart Trivia, Inc. where he builds trivia games for smartphones using MvvmCross and Xamarin. He's also running the Silicon Valley Mobile/Cross Platform .Net Meetup and helps other companies build mobile apps using Xamarin as a consultant

Recent Tweets

Twitter October 23, 05:22
@BenThePCGuy a standard where that doesn't matter is better. One more reason to get the #Lumia920, wireless charging, no need for microUSB

Twitter October 23, 05:21
@ManMadeMoon where they dance around the issues and don't really talk about them

Twitter October 23, 05:20
@BenThePCGuy are you a @wpdev ?

Twitter October 23, 04:17
@JonahLupton But if it's black it's usually better

Twitter October 23, 02:58
@jongalloway next time ask your 5 year old how to spell