XAML Edit and Continue

Keyboard Shortcuts

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 featurein Visual Studio called Edit and Continue,where I can be debugging an applicationin 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 applicationinstead of having to stop the debugging session,rebuild, and restart.Edit and Continue has been addedto the XAML editor in 2017,and this works for WPF applicationsand 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 upin Visual Studio 2015.The new feature is this one here,Enable XAML, Edit and Continue.This is a Universal Windows Applicationthat 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 keyand press the left arrowto snap to the left side of the screen,and then I'll snap Visual Studioto the right side of the screen.This toolbar that's showing up hereinside my Universal Windows Appis 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 Treeand 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 havebeen around since previous versions of Visual Studio.There's also another feature called Live Property Explorer,where I can modify this to seewhat 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 modifyingthis 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 changeto see how that's affecting your UI,but it's not a permanent change.In 2015, I couldn't go over to the XAMLand 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 hereon 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 addanother 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 aelement 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 toedit your XAML while you're working on the application,and you can play around with itwith 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.

Resume Transcript Auto-Scroll

Author

Released

3/8/2017

Explore the new features and updates available in Visual Studio 2017. In this course, Walt Ritscher walks through the key new features in this release, starting with a look at the integrated development environment enhancements like new support for EditorConfig. Next, he explores debugging improvements such as Chrome debugging support, and dives into navigation and IntelliSense improvements in the code editors. Plus, Walt investigates the Docker container support for ASP.NET core projects and goes over the behavior of the Visual Studio 2017 Installer.