Xamarin.Forms XAML/CSS hot reload / live reload Sample Video you can find here: https://twitter.com/i/status/1124314311151607809
NOTE: Restart Visual Studio after installation (in case of menu didn't appear in toolbar).
NOTE: Restart Visual Studio after installation.
mono Xamarin.Forms.HotReload.Observer.exe
or via command line (Windows) Xamarin.Forms.HotReload.Observer.exe
etc.mono Xamarin.Forms.HotReload.Observer.exe p=/Users/yourUser/SpecificFolder/ u=http://192.168.0.3
using Xamarin.Forms;
namespace YourNamespace
{
public partial class App : Application
{
public App()
{
InitializeComponent();
#if DEBUG
HotReloader.Current.Run(this);
#endif
MainPage = new NavigationPage(new MainPage());
}
}
}
IMPORTANT: i suggest to NOT use [Xaml.XamlCompilation(Xaml.XamlCompilationOptions.Compile)]
with HotReload. It can cause errors. So, don't enable it for Debug or disable.
AVAILABLE ON ANDROID AND IOS SIMULATORS.
First of All add --enable-repl
to iOS additional mtouch arguments for iPhone Simulator:
NOTE: BindingContext will be copied automaticaly, but if your view constructor has any parameters, you will have to define a property object[] HotReloadCtorParams => new object[] { }:
[HotReloader.CSharpVisual]
public class CodeContentPage : ContentPage
{
private Color _backColor;
public CodeContentPage(Color backColor)
{
_backColor = backColor;
BackgroundColor = backColor;
}
object[] HotReloadCtorParams => new object[] { _backColor }; //These arguments will be passed in case of reloading
}
If you want to disable HotReload for Release mode, follow instructions here https://github.com/AndreiMisiukevich/HotReload/issues/115#issuecomment-524545788
Your device/simulator/emulator will be discovered automatically. (IMPORTANT: Make sure your PC/Mac and device/emulator are in the same local network.)
If your device and PC/Laptop are in different subnets (or extension doesn't discover device), you should specify your Extension's IP during reloader setup
HotReloader.Current.Run(this, new HotReloader.Configuration
{
//optionaly you may specify EXTENSION's IP (ExtensionIpAddress)
//in case your PC/laptop and device are in different subnets
//e.g. Laptop - 10.10.102.16 AND Device - 10.10.9.12
ExtensionIpAddress = IPAddress.Parse("10.10.102.16") // use your PC/Laptop IP
});
BY DEFAULT EXTENSION TRIES TO FORWARD PORTS ITSELF (and you should skip this step) BUT in case it is not working you should forward the port yourself (here is example with DEVICE port 8000 (DeviceUrlPort default value).
adb forward tcp:8000 tcp:8000
keep in mind that HotReload may change your DEVICE's port (it's edge case and shouldn't happen, but just keep in mind that it's possible).
So if adb forward doesn't help, open APPLICATION OUTPUT and look for $"### HOTRELOAD STARTED ON DEVICE's PORT: {devicePort} ###"
And execute adb forward with that value. Also you can get selected port and device IP's there:
var info = HotReloader.Current.Run();
var port = info.SelectedDevicePort;
var addresses = info.IPAddresses;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
void OnHotReloaded() // Add logic here
{
label.Text = "I'm loaded again";
}
}
<?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>
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
during your work with HotReload, you can achieve it by two approachesHotReloader.Current.Run(this, new HotReloader.Configuration
{
PreviewerDefaultMode = HotReloader.PreviewerMode.On
});
<?xml version="1.0" encoding="UTF-8"?>
<?hotReload preview.on?>
<ContentPage>
...
</ContentPage>
Use <?hotReload preview.on?>
to allow design properties and <?hotReload preview.off?>
to forbid them.
If you wish to enter device's IP mannualy, you may use these extensions (Make sure you disabled extensions autoupdate) https://github.com/AndreiMisiukevich/HotReload/tree/master/old_extension_packages
Are there any questions? just ask us =)
The MIT License (MIT) see License file
Feel free to create issues and PRs 😃