Skip to content
Xamarin.Forms XAML hot reload, live reload, live xaml
Branch: master
Clone or download
Latest commit 5d58960 May 11, 2019

README.md

logo

HotReload

Xamarin.Forms XAML hot reload, live reload, live xaml

Sample Video you can find here: https://twitter.com/i/status/1124314311151607809

Sample GIF

Setup

  • Available on NuGet: Xamarin.HotReload NuGet
  • Add nuget package to your Xamarin.Forms NETSTANDARD/PCL project and to all platform-specific projects iOS, Android etc. just in case (but adding to portable project should be enough)
  • Setup Reloader
using Xamarin.Forms;

namespace YourNamespace
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
#if DEBUG
            HotReloader.Current.Start(this);     
#endif
            MainPage = new NavigationPage(new MainPage());
        }
    }
}

IMPORTANT: don't use [Xaml.XamlCompilation(Xaml.XamlCompilationOptions.Compile)] with HotReload. It can cause errors. So, don't enable it for Debug or disable please.

Mac

  • Visual Studio for Mac extension is available for downloading here http://addins.monodevelop.com/Project/Index/376 Or by searching in Visual Studio's extension manager alt text
  • Header of "HotReload for Xamarin.Forms" extension will appear in Visual Studio's "Tools" dropdown menu. "Enable extension" menu item will appear as soon as solution is opened. alt text
WINDOWS
Other IDE e.g. (like Rider etc.)
  • Build observer project yourself (Release mode) and find exe file in bin/release folder https://github.com/AndreiMisiukevich/HotReload/tree/master/Observer/Xamarin.Forms.HotReload.Observer and put it in the root folder of your Xamarin.Forms NETSTANDARD/PCL project.
  • Start Xamarin.Forms.HotReload.Observer.exe via terminal (for MAC) mono Xamarin.Forms.HotReload.Observer.exe or via command line (Windows) Xamarin.Forms.HotReload.Observer.exe etc.
  • Optionaly you can set specific folder for observing files (if you didn't put observer.exe to the root folder) and specific device url for sending changes. mono Xamarin.Forms.HotReload.Observer.exe p=/Users/yourUser/SpecificFolder/ u=http://192.168.0.3

Run your app and start developing with HotReload!

  1. IMPORTANT:
  • Make sure you use proper device IP in Extension. Check application output for more info about device IP.
  • Also keep in mind, that your PC/Mac and device/emulator must be in the same local network.
  1. If you want to make any initialization of your element after reloading, you should implement IReloadable interface. OnLoaded will be called each time when element is created (constructor called) AND element's Xaml updated. So, you needn't duplicate code in constructor and in OnLoaded method. Just use OnLoaded then.
public partial class MainPage : ContentPage, IReloadable
{
    public MainPage()
    {
        InitializeComponent();
    }

    public void OnLoaded() // Add logic here
    {
        //
    }
}
  1. ViewCell reloading: before starting app you MUST determine type of root view (e.g. StackLayout). It cannot be changed during app work (I mean, you still can change StackLayout props (e.g. BackgroundColor etc.), but you CANNOT change StackLayout to AbsoluteLayout e.g.).
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
          x:Class="Xamarin.Forms.HotReload.Sample.Pages.Cells.ItemCell">
    <StackLayout>
    </StackLayout>
</ViewCell>

Android Emulator

In case VS Extension detects xaml changes but doesn't update in the emulator, you may need to forward the port to your 127.0.0.1:

adb forward tcp:8000 tcp:8000

Android device

If you are using a real device you'll have to connect to it through its IP in HotReload extension. To get your device's IP follow this :

  • Open adb command prompt
  • Run adb shell command
  • Run command ip -f inet addr show wlan0
  • Copy IP from command result to HotReload extension window

What is Device IP ?

You can easily find it in Application Output if run application with installed HotReaload. Use AVAILABLE DEVICE's IP as search text

Collaborators

Are there any questions? 🇧🇾 just ask us =) 🇧🇾

License

The MIT License (MIT) see License file

Contribution

Feel free to create issues and PRs 😃

You can’t perform that action at this time.