{"id":46121,"date":"2020-01-10T10:04:20","date_gmt":"2020-01-10T18:04:20","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=46121"},"modified":"2022-04-26T09:20:40","modified_gmt":"2022-04-26T16:20:40","slug":"tips-tricks-xaml-hot-reload","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/tips-tricks-xaml-hot-reload\/","title":{"rendered":"Tips and Tricks for XAML Hot Reload"},"content":{"rendered":"

Happy 2020, Xamarin community! To kick start your productive new year, we want to share some favorite tips for XAML Hot Reload for Xamarin.Forms<\/a>. With XAML Hot Reload, you can make changes to your XAML files, hit save, and immediately see those changes reflected in your running app!<\/p>\n

Tips and Tricks for XAML Hot Reload \u00a0<\/h2>\n

Getting Set Up<\/strong> XAML Hot Reload is built-in to Visual Studio 16.3 and Visual Studio for Mac 8.3. To turn it on, go to Tools > Options > Xamarin > Hot Reload, or Visual Studio > Preferences > Projects > Xamarin Hot Reload. In the latest releases, 16.4 and 8.4, XAML Hot Reload is turned on for you by default! For new projects, the templates are set up to start using XAML Hot Reload immediately. If you\u2019re working on an older project, make sure you have at least Xamarin.Forms 4.1. Then, follow this flow chart to double check your build settings. For more details, you can look at the<\/h3>\n

XAML Hot Reload Documentation<\/a>. \"XAML<\/p>\n

Making the Most of MVVM<\/strong> XAML Hot Reload works by reloading the entire XAML view you edited and its children elements. In a future release, we want it to just reload what you changed, but for now a good rule of thumb is to set your Binding Context in your code behind. If you set the Binding Context in C#, it won\u2019t get recreated every time you make a change to your XAML and save. However, in some cases, XAML needs that Binding Context for IntelliSense related to your bindings. If you set it only in the code behind, you\u2019d lose that IntelliSense. If you set it in XAML and code behind, you create that Binding Context twice, which doesn\u2019t work! The best way to handle this is with<\/h3>\n

Design Time Data<\/a>. With that, you set the Binding Context in your code behind, and use the \u201cd:\u201d prefix (meaning, use at design time only) in XAML. This way, it\u2019s only set it up once at runtime, so XAML Hot Reload won\u2019t refresh your Binding Context and you\u2019ll still get IntelliSense as you edit your XAML bindings. This is what that looks like in code: Code behind:<\/p>\n

public DetailsPage(Monkey monkey)\n{\n \u00a0\u00a0 InitializeComponent();\n \u00a0\u00a0 BindingContext = new DetailsViewModel(monkey);\n}<\/pre>\n
\u00a0 Add to XAML Page headers:<\/p>\n
xmlns:d=\"http:\/\/xamarin.com\/schemas\/2014\/forms\/design\"\nxmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\nmc:Ignorable=\"d\"\nxmlns:vm=\"clr-namespace:Monkeys.ViewModels\"<\/pre>\n
\u00a0 XAML:<\/p>\n
<d:ContentPage.BindingContext>\n \u00a0\u00a0 <vm:DetailsViewModel \/>\n<\/d:ContentPage.BindingContext><\/pre>\n
Also, XAML Hot Reload currently calls the OnAppearing() method with every refresh, so be mindful of what you load there.<\/p>\n
Yes, You Can Reload That!<\/strong> XAML Hot Reload isn\u2019t limited to just your views and controls. You can also reload resources in App.xaml or in global resource dictionaries. Additionally, you can reload changes to your AppShell.xaml, which is where you set up the structure of a<\/h3>\n
Xamarin.Forms Shell application<\/a>. In the latest releases of Visual Studio and Visual Studio for Mac, you can even reload CSS changes both inline in your XAML and in a separate CSS file in your Xamarin.Forms project.<\/p>\n
What\u2019s Next?<\/strong> We have a lot of new features coming in 2020! If you have a suggestion or find a bug, please send them to us using Help > Send Feedback > Report a Problem (or Suggest a Feature). Some popular suggestions that you can vote on are:<\/h3>\n