{"id":6251,"date":"2016-04-06T09:00:24","date_gmt":"2016-04-06T16:00:24","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=6251"},"modified":"2019-03-20T00:04:25","modified_gmt":"2019-03-20T07:04:25","slug":"ui-development-made-easier-with-xaml-edit-continue","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/ui-development-made-easier-with-xaml-edit-continue\/","title":{"rendered":"UI development made easier with XAML Edit & Continue"},"content":{"rendered":"

Making UI is easy. Making GREAT UI can be a bit trickier. Visual Studio wants to be the best in class tool for designing good user experiences. We have been spending a lot of our time looking at the challenges you face, learning from them, and being inspired by watching you try to solve UI problems. As a result, we have made some improvements to Visual Studio tools in both Visual Studio 2015 Update 2<\/a> and Visual Studio \u201c15\u201d Preview<\/a>, and we are excited to see what you think of them.<\/p>\n

XAML Edit & Continue<\/h2>\n

The biggest improvement for runtime debugging is Edit & Continue for XAML apps<\/a>. This feature now lets you change your XAML while an app is running and get immediate feedback. On its own, Edit & Continue is amazingly powerful. When combined with the UI Debugging tools, developers can fix problems faster than ever before.<\/p>\n

Take a look at this app:<\/p>\n

\"Base<\/a><\/p>\n

You\u2019ll see that I\u2019ve got a little text box that says \u201cUrgent\u201d, but that color looks more like a Warm and Fuzzy pink instead of a deep Red that conveys urgency. I need to fix that. Well, in reality, that color is a resource that\u2019s being consumed by a TextBlock that\u2019s defined in the datatemplate for the Listbox. If I weren\u2019t already familiar with this code, figuring that whole chain out can be a bit daunting. But, with the UI Debugging tools, it\u2019s easy.<\/p>\n

    \n
  1. I need to enable In-App selection. At the top of my app, there\u2019s a new In-App tool menu that lets me turn In-App selection on. I could do it from VS too, but this is quicker. Once it\u2019s on, I can simply click on the Urgent element in my running app.\"Turn<\/a><\/li>\n
  2. Click the Go To Live Visual Tree button in the Runtime tools, Visual Studio jumps to the foreground and I can see my element. The small icon next to the element says that I have source for that particular element and I can click it to go to that element.<\/li>\n
  3. When I go to source, you can see that this particular element is in a control template. That\u2019s not a problem for Edit & Continue. I just slide over and see that I\u2019ve got a Style defined here. I just click that and hit F12 to jump into my Style.<\/li>\n
  4. Well, it looks like this style is using a resource, so I can dive into that too. I can put the cursor into the string that says \u201cUrgentBackgroundColor\u201d and hit F12 again. Finally, this finds the value. You can imagine how finding this manually might be tricky, but F12 makes it really easy.<\/li>\n
  5. Now I can just change the value of the resource and the change is immediately reflected in the running app.<\/li>\n<\/ol>\n

    \"Change<\/a><\/p><\/blockquote>\n

    XAML Edit & Continue is available for both WPF projects as well as apps that target the Universal Windows Platform. If you want to work with Universal Windows Platform apps, you\u2019ll need to have the latest insider build<\/a> (version 14295 or later) installed and make sure you\u2019ve got the latest SDK (also version 14295). Additionally, you can make more kinds of edits in a WPF project today, but we\u2019re committed to making sure that Universal Windows app developers will have the same great experience.<\/p>\n

    Solving Accessibility Bugs<\/h2>\n

    If you\u2019re like most developers, when you start developing the UX of your app, you look at your elements in a visual way. You ask yourself how to make a visually understandable app that has flow and cues that help your users interact. But if you want to make a truly great app, you need to be accessible to users who interact with your app from a different perspective. This means that you need to be able to work with AutomationPeers. Unfortunately, AutomationPeers are runtime concepts and working with them can be difficult. For more details on AutomationPeers, take a look at http:\/\/microsoft.com\/enable<\/a>.<\/p>\n\n\n\n
    \"Live<\/a><\/td>\nWe recognize the challenge here and with Visual Studio 2015 Update 2, the Live Property Explorer now exposes the AutomationPeers on your UIElements. In a new scope at the top, the patterns declared by your controls as well as the properties exposed by the AutomationPeers are displayed. These are the properties and behaviors that your controls expose to assistive technologies like Narrator and represent the view that everyone has access to.<\/p>\n

    The properties in your AutomationPeers are databound to properties in your elements. This means that if you want the AutomationPeer to expose the correct value, in most cases, you need to make sure the AutomationProperties attached DependencyProperty has the right value. For instance, HelpText is a property that\u2019s exposed by the AutomationPeer to give additional information about your control to the user. When that property is queried from Narrator, UWP will check the AutomationProperties.HelpText DependencyProperty and pass its value back to Narrator. So, if you don\u2019t like the HelpText that\u2019s showing in the LivePropertyExplorer, you can fix it by setting AutomationProperties.HelpText on the element.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    Summary<\/h2>\n

    We\u2019re very proud of the UI Debugging tools that we delivered in Visual Studio 2015, and with these changes, we feel like we\u2019re making big strides toward the best UI debugging workflow on any platform. If you\u2019d like to see these features in action, check out my Channel 9 video I recorded for the \/\/build conference that gives a good overview of what you can do.<\/p>\n