Xamarin.Forms XAML hot reload, live reload, live xaml
- Available on NuGet: Xamarin.HotReload
- Add nuget package to your Xamarin.Forms NETSTANDARD/PCL project and to all platform-specific projects iOS, Android etc.
- 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());
}
}
}
- 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
- 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.
- You may use official HotReload's Visual Studio Extension https://marketplace.visualstudio.com/items?itemName=StanislavBavtovich.hotreloadxamarinforms. Also can be downloaded via extension manager
NOTE: Restart Visual Studio after installation.
- To make "HotReload for Xamarin.Forms" extension's toolbar visible turn it on in "Tools/Customize" window.
- As soon as solution is opened "Enable extension" button will appear on "Tabs panel".
- 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
- 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.
- If you want to initialize 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.
public partial class MainPage : ContentPage, IReloadable
{
public MainPage()
{
InitializeComponent();
}
public void OnLoaded() // Add logic here
{
//
}
}
- ViewCell reloading: before starting app you MUST determine type of root view (e.g. StackLayout). It cannot be changed during app work (I mean 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>
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
:
- Set http://127.0.0.1:8000 in VS extension
- You also need to forward the port to your pc/mac using
adb
adb forward tcp:8000 tcp:8000
Are there any questions? 🇧🇾 just ask us =) 🇧🇾
The MIT License (MIT) see License file
Feel free to create issues and PRs 😃