Learn about useful XAML tools to enhance XAML productivity, including XAML UI debugging and XAML edit and continue.
- [Instructor] Have you ever started building the UI of your app and noticed alignment issues that were really hard to figure out? You likely solved it by making small adjustments, testing the app, and repeating over and over until it was fixed. Before we get too deep into building the app, I want to show you some of my favorite tools to speed up XAML development. So far, you have implemented one simple view, the login view, which allows the users of your app to sign in with Facebook. Let's see how we can use XAML UI Debugging and XAML Edit and Continue to make it look a little better.
With our app already running and debugging, let's return to Visual Studio. On the left, you should see a Live Visual Tree pane, and on the right, you should see a closed Live Property Explorer. Open the Live Property Explorer and make sure it's pinned. The Live Visual Tree is essentially the runtime document outline of your app. It shows all of the visual elements in your app. Not only that, but it shows the controls that you have implemented, as well as those which are inherited. Controls that you have created are designated with a Defined In button, as you see here.
Select the Login button in the Live Visual Tree by clicking on it. As soon as you click on it, you should see the Live Property Explorer update with all of the properties of that control. In the Live Property Explorer, you can edit existing properties or add new properties. Go ahead and add a new horizontal alignment property that is local, and set it to center. Do this again for vertical alignment. Now, take a look at the application. Now we can see the button is centered.
That looks a little bit better, doesn't it? So, go ahead and stop the application, and then press F5 to start it again. You can see the button return to the left. That's no good. Let's use a tool called XAML Edit and Continue to fix this. Return to the Live Visual Tree and select Login Button. Click on the Defined In button to navigate to it in the XAML. In the XAML for the button, go ahead and find the last line on line 13 and start typing horizontal alignment equals center and vertical alignment equals center.
Just to get a little bit more room in the UI, I'm going to move my Live Property Explorer to the right. Now I can see all of these properties defined. If I return to my app, I see the button in the middle again. Now, go ahead and stop and restart the application one more time. This time, the location of the button is still in the center of the app. The changes persist, and you actually edited your XAML as the application continues to run. These two tools are known as XAML UI Debugging, which makes up the Live Visual Tree and the Live Property Explorer, and XAML Edit and Continue, where you can edit your XAML as the application runs.
When used together, they greatly improve XAML authoring productivity. My typical workflow is to get the app functionality correct, and then use XAML UI Debugging, or just XAML Edit and Continue to tweak the UI until it looks just right. I can then save my code and everything persists. Note, XAML UI Debugging is available in Visual Studio 2015, but XAML Edit and Continue is only available in Visual Studio 2017.
- Working with .NET for UWP app development
- Establishing application architecture
- Configuring Azure services
- Configuring the mobile app service backend
- Testing and publishing the service backend
- Using Facebook authentication
- Using XAML
- Client server abstraction API
- Using the UWP community toolkit
- Styling app views
- Creating adaptive views
- Testing an app for multiple user accounts
- Publishing to the Windows Store
- Sideloading app packages