Earlier this year I shared a post, Visual Designer, Hot Reload and Beyond, where I talked about how I thought the future of designers would evolve. Looks like I preempted a new feature that’s coming to Visual Studio 2022 called XAML Live Preview. Currently this is in preview for WPF applications but you can imagine that this will come to all XAML platforms over time.
Essentially, the XAML Live Preview feature mirrors your running application into a tool window within Visual Studio, as you can see in the following image.
As this is a regular Visual Studio tool window, you can undock and reposition the window as you see fit. The nice part of this feature is that if you’re building out the design of your application you don’t need to continually be switching between Visual Studio and the running application. You can make changes to the XAML which will be reflected in both the running application and the XAML Live Preview window.
As the announcement of this feature points out, this is the first time we’re seeing this feature and it’s very early days. I’ve already noticed a number of occasions when the rendering isn’t correct or that the hover/selection borders don’t align with the actual controls. However, I’m already excited about what this feature will mean for XAML developers
Some interesting things that you can do already with the XAML Live Preview feature:
- Zoom – Ctrl+Wheel on mouse (or Ctrl +/-) will zoom the preview window in and out. This is useful to check alignment, or focus on specific parts of a large window.
- Vertical/Horizontal Lines – You can place vertical and horizontal lines across the preview, allowing you to check alignment of controls. These lines aren’t part of the XAML, so are purely to assist with the design process.
- Hover – If you toggle the “Show element info during selection” button you can see some summary information about the control. This is shown in the above image where the layout information for the StackPanel is shown.
Whilst it is indeed early days, the XAML Live Preview window is looking to capitalise on one of the underlying benefits of XAML, the ability to round trip a designer. Other platforms, such as Flutter, have discarded the need to separate layout from logic, which will make it much harder to implement this type of design capability.