The XAML Edit and Continue feature lets you change your XAML while running and debugging an app. Learn how this works for WPF and UWA projects and provides immediate feedback for each change. Changes are persisted to the project when the debug session ends.
- [Voiceover] I've always enjoyed the feature in Visual Studio called Edit and Continue, where I can be debugging an application in C# or Visual Basic, hit a break point, look at my code, decide that I need to make some changes, and after I've made the changes, I can continue to run the application instead of having to stop the debugging session, rebuild, and restart. Edit and Continue has been added to the XAML editor in 2017, and this works for WPF applications and for Universal Windows Applications.
It's enabled by default. We'll see it in Tools Options, in Debugging General, then it's this section here: Enable UI Debugging Tools for XAML. So make sure you have that checked, and all three of these check boxes here. Now to be clear, these first two items, these are features that first showed up in Visual Studio 2015. The new feature is this one here, Enable XAML, Edit and Continue. This is a Universal Windows Application that I wrote for my Xbox course called Art Center, and I want to debug it on my local machine, so I would choose x86, I choose from this list, I would choose the Local Machine, and click on this green triangle to debug the application.
And then I will hold down the Window key and press the left arrow to snap to the left side of the screen, and then I'll snap Visual Studio to the right side of the screen. This toolbar that's showing up here inside my Universal Windows App is enabled because of the settings in Visual Studio. And this has been around since 2015, and the feature here called Go to Visual Tree, when I click on that, will open up Visual Studio if it's not already open, and show the Visual Tree. So I will pin this to the side.
And then there's a feature here called Enable Selection. So I can click on it here in the running application, or I can also click on it here in the live Visual Tree. They both are connected. So Enable Selection lets me select my elements, and then there's a Track Focused Element, we'll turn that on too. Now I can click on an item, and it'll open up the Live Visual Tree and show me, that's the text block, or this is an image.
And it'll also take me to the XAML, so I will un-pin this for a minute, and I can click here, and you can see that it's showing me the text block, the image in the text block, in the XAML editor. Once again, these are all features that have been around since previous versions of Visual Studio. There's also another feature called Live Property Explorer, where I can modify this to see what the UI would look like with these changes. So let's say I want to change the font size, and see what that would look like, I select it, and go over to the Live Property Editor, look up the font size, type in a new value here, and you'll see that it's modifying this single element in the Visual Tree.
None of the other elements. You'll also notice that if I look at my XAML, it didn't change the XAML here. So this is a way of looking at a temporary change to see how that's affecting your UI, but it's not a permanent change. In 2015, I couldn't go over to the XAML and actually make a change here. But in 2017, I can. So I can change this font size to 15, and now you see, if you look at the application running, that it's changed the font here on all my text boxes.
I can also do things like change other properties, so I'll go up here to this element, which is this text block, and I'll change the foreground to light blue. And I can also insert, make other bigger changes to my XAML. For instance, what if I want to add another text block to this area of the screen, or I want to add an icon as well? Click here to select the text block, then I'll add a element called Symbol Icon, and you see that I added this new element to the XAML, made my changes, and it now appears over here in the running application.
Here's another great thing about this feature, is I'll shut down the application, return back to Visual Studio, and those changes are persisted. So we'll go back over here, and you'll see that the value's still light blue, the font is still 15 points in size, and that new element is part of my Tree. The takeaway from this is that you get to edit your XAML while you're working on the application, and you can play around with it with the Live Property Editor to see if you like it, then you can modify the real XAML Tree, make your changes, and continue running the application.
And those changes are persisted in your project.
- Installing Visual Studio 2017
- Using debugging features
- Reviewing document navigation enhancements
- Examining IntelliSense Improvements
- Using XAML tools
- Reviewing the tooling added to support Docker containers
- Debugging without the hosting process
- Using the Visual Studio 2017 Installer