Tool for previewing XAML – LiveXAML makes your life a little bit easier

Since Xamarin.Forms was introduced many has asked for a visual designer for building user interface like the one we have for building WPF or UWP apps. But I don’t think it is many that uses it like a designer, I think it is mostly used like a previewer of the XAML that you are writing. At least I use it that way.

Xamarin has tried with Xamarin.Forms previewer, but I have never got that work in real scenarios. But it will be great if they could get it work for real. Xamarin also has the Xamarin Live Player that makes it possible to debug iOS and Android apps on a device via WiFi. You don’t even need a Mac to debug iOS apps. The only thing you need to do is to download the Xamarin Live Player app and pair it with Visual Studio (works on both PC and Mac). With Live Player you can also live view XAML views, it makes it possible to make changes and see the result on a device without redeploy it. But I have had some problems with it, it can be complicated to pair Visual Studio with the app, especially if you’re on an enterprise network. I have also facing issues with more complex scenarios, for example if I have creating my own base views. But Live Player is still in preview, so I am looking forward to a stable product.

My favorite tool right now is LiveXAML (https://livexaml.com) that makes it possible to edit XAML when you’re debugging. You just start the app and navigate to the view you want to edit. When you save the file, you will see the changes live in the app. It works both on Visual Studio for Mac and PC and on both on simulator/emulator and on real devices. It cost $240 or $24 per month. But it’s nothing seen to the time you will save when you don’t have to redeploy your app to see small UI changes.

Gorilla Player is a similar tool to LiveXAML that are free and could be worth taking a look at. But last time I used it I think it was more complicated to get it to work if you compare to LiveXAML, but they have probably improved it since I used it.

Xamarin.Forms – MVVM BaseView and BaseViewModel

In this post, I will describe how I have created base classes for my views and ViewModels in my latest projects. It will probably break some of the MVVM rules, but I think this is a productive way to work. Please leave a comment about your thoughts about in a comment below.

First of all, I’m creating the base ViewModel. I’m adding three virtual methods, Init, OnAppearing and OnDisappering. I’m making the methods virtual so I can override them in the view models if I want.

My idea is that Init() will run after the ViewModel has been created. OnAppearing when a view appearing on the screen and disappearing when the view is disappearing. To place them in the base class for the view models makes it possible to call them from a base class for my views so I don’t have to write code for calling them in every view I’m creating.

If I using an MVVM framework (I’m used to using MvvmLight) my base ViewModel will inherit the base ViewModel from the framework I’m using. But this example will show how it will be without any framework.

public abstract class BaseViewModel : INotifyPropertyChanged
{
     public event PropertyChangedEventArgs PropertyChanged;
 
     public async virtual Task Init()
     {
     }
 
     public async virtual Task OnAppearing()
     {
     }
 
     public async virtual Task OnDisappearing()
     {
     }
}

My base view will be generic to define what ViewModel I will use for the current view. I will also say the generic type has to inherit from BaseViewModel so it not can be used with other types of object. This also makes it possible for me to call the methods I created in the BaseViewModel. In the constructor, I will use my IoC to create an instance of the ViewModel.

public abstract class BaseView<T> : ContentPage where T : BaseViewModel
{
 
     private BaseViewModel _viewModel;
 
     public BaseView()
     {
         //IoCHelper is an own defined class for resolving types that are defined in an IoC container
         _viewModel = IoCHelper.Resolve<T>();
 
         BindingContext = _viewModel;
 
         viewModel.Init();       
     }
 
     public async override void OnAppearing()
     {
           base.OnAppearing();
 
          await _viewModel.OnAppearing();
     }
 
     public async override void OnDisappearing()
     {
          base.OnDisappering();
 
          await _viewModel.OnDisappering();
     }
}

To define what ViewModel that should be used for the view in XAML you can do that by using x:TypeArguments like in the example below. This means that you don’t have to write any code in the code-behind. Don’t forget to remove that the view inherits from ContentPage in the code-behind of the view.

<local:BaseView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyApp.Views;"
             xmlns:vm="clr-namespace:MyAPp.ViewModels;"
             x:TypeArguments="vm:MainViewModel"
             x:Class="MyApp.Views.MainView">