Kim Tapia St. Amant

Interactive Space & Design, LLC

Project 5 of 6

WPF Explorer

image
We used the same colors and styles as in F12 where we could.
Product:
Microsoft Visual Studio
Job title:
UX Designer II
Roles:
UX design, front-end dev, visual design, illustration

I love working in WPF. I’ve bounced in and out of it over the years and always after spending time in WPF, then returning to HTML, I always miss the ease of the WPF layout features. It’s taken HTML a long time to incorporate good compatible layout grids. WPF’s big downfall however, was it didn’t have a good code explorer like IE or Chrome’s F12 and it was hard to drill down into components.

I was assigned to work with the team as the UX designer to create an F12 like feature for WPF. During our user studies we saw that WPF developers who also worked as web devs, instantly saw the F12 patterns and used the tool as expected. WPF developers were able to grasp the concepts fairly quickly as well. We presented the feature for the first time at a /Build conference and customers were really really happy.

image
The Live Visual Tree view reflected whatever was selected in the code window.
image
The Live Properties panel reflected whatever was selected in the code window.