 Hi there, welcome to another.net.con talk. My name is Dimitri Lailand and I'm really glad you're joining me today. Today, I'm going to do a session on XAML tools for WPF and UWP developers. We're going to go take a tour through XAML tools. I'm going to do a lot of demos. Hopefully, everything will work. We're going to look at existing features you can use today, features that are coming. We're going to do some roadmap and we're even going to look further out if we get time to say this is what's really coming on the pike in the future and we want your feedback on it as well. So let's get going. Before I jump into the details of my talk, I'm just going to mention that three days of content and desktop talks have been spread out across all three days. So desktop development is something you're interested in. I hope you can check out one of the other sessions. So there they are. They are also in the agenda. The agenda link is down below and everything will be available on demand if you missed it or we'll miss it in the future. All right, so my session. So we're going to start off by looking at XAML tools. XAML tools, I'm a PM of XAML tools for WPF and UWP applications and I work closely with Xamarin forums. So all the XAML teams work closely together and in my talk, I'm going to cover what's new in tooling around hard reload designer and the code editor. I'm going to talk a little bit at the end around modernization of applications using XAML islands and just touch and roadmap just a little bit and hopefully that'll be a good talk. All right, let's jump in. So this demo was going to be a code demo. I'm going to apologize and do some screenshots, but it's a cool demo. So I hope you enjoy it. Unfortunately, my VM kind of died this morning, thanks VM. But let's talk about a new feature we're working on in the XAML designer. So if you're a WPF or UWP developer and you use the XAML designer, we're adding features to that capability, right, to that space. We have been thinking for a long time what feature would be a good way to increase developer productivity. So something we're going to ship in a future Visual Studio update release as a preview flag feature, so you'll have to turn it on, is XAML suggested actions. Think about it as a light bulb on top of controls. So we're starting off with a well-defined set of controls that we're going to enable this on. And a light bulb is going to make all the common properties of those controls available. So here's stack panel, here's a label. We even have nice color pickers we're going to build into that. Here's the image control, things like source, visibility, very much common properties. So as they kind of go down this list of controls, you see that these properties are probably the ones you often have to go set. And today, if you go into the properties panel, it's kind of hard to find the most common properties. This is hopefully going to alleviate that. In the future, it will even expand to other capabilities as well. So it's a cool feature we're working on. It's going to ship in a future preview. 16.4, one of the update trains, one of the preview trains. We'll put it into release notes when it's available. It's going to support the controls up on the screen right now that are listed, but it is going to be extendable. We are going to add it to more controls in the future. And we're looking at actions, because sometimes you have a control that has properties you want to change, and that's great. Other times you have a control like a tab view. You need to add another tab. So instead of having to know how to do that XAML or have some other paradigm in the UI that lets you enable to add a new tab easily, we're going to try to see if these quick suggested actions work well for you. So check it out when we make it available. Just wanted to show you one future-facing thing and that, fortunately, my demo failed. All right. So from here on in, it's demo time. So I'm going to jump right in and talk about a story that could have been a little bit better than one, but such as life. So today, this week, yesterday, WPF Core shipped. That means WPF Core as a framework is GA. And if you install Visual Studio 16.3, that means you have the tooling. Unfortunately, the designer is off by default. We screwed up. We made a little mistake. So I'll show you how to enable it. If you have a WPF project, so this is a WPF project right here, you go to Tools, you go to Options, and you go to Preview Features. If you enable Use Preview of the .NET Core SDK and you restart it, I will do that just to kind of prove the point. So let's restart the application real quick. And I should have my little demo app. Let's get this thing open. All right. So you can see designer is loading. Totally our fault. Sorry about that. But designer is there, and we're going to service this release to make it available. But I just showed you how to enable it right away and start using it. Now, the one thing I do want to point out is that, and let's make sure I have the right, I have so many of these little applications. Sorry, just make sure that I'm looking at the right one. All right. This is the right one. All right. So we have multiple designers that my team works on. So some of our designers, one of them is for .NET Framework, WPF, one of the .NET Core, and one is for UWP. So if you really pay attention, each between those three, you're going to see some slight differences. Those are not bugs. Those are differences that we sort of made decisions on. We're here to hear your feedback on it. But for the most part, most of the features of the designer work the same across all of them. So everything you would expect in this designer to work works here. So if I go to Toolbox, and I go ahead and I drag a button, that works. And if I resize the button, that works as well. XAML is changing. One tip lots of people don't realize there's an edit template feature in here that can create a copy of a style. This is accessible through right clicking and control on the design surface or in the document outline. So it's really available anywhere. And if you right click on that and say, yes, created within my application here, you get a bunch of XAML. So designers are here. Quite a powerful feature. Some of the features that we also get asked, would you add the feature? And we say it's there, and it's our fault. You don't know about it. So we're working to fix that. But one of the cool features is regions. So I'm going to show that feature right now, region button style. So this came in through surveys. People were asking me, Dimitri, can you please add this feature? And I wanted to show that it's there. So we can add a region, and then we can collapse the region. So region begin, make sure it's right. And region, am I having my first demo fail of the day? Jesus. You know, when something just works every single time? Well, I can assure you this feature does work. I've tested it so many times. Not sure why this is misbehaving. But there you go. Sooner or later, one of your demos will fail. But basically, regions are in there. Give it a shot. If you hit a bug like this, please let us know we're here to make it better. So I just wanted to show the designers there. We have region support in XAML Editor, and we have the ability to edit default styles or templates. So from there, I'm going to jump into the meat of the demo. And we're going to talk about an application. We're going to use this application for the rest of the talk that I've been building. Using some newer bits than what you would have access to, but for the most part, all the things they show will work with some minor exceptions that I will point those out as we go. So here's my project. It's here for demonstrative purposes. There's really not a lot of code to it. It's just a basic WPF core app. I have a view model with some dummy data. It's like a fake email client that we're building. It's really, really poor. And there's an object called email, and I'm going to do some binding to it in build time. So with this application, I'm going to just reset it back to the original state and just run the app and show you that it's really bare bones. There's absolutely no code in here right now. And then we'll begin coding. And I'll talk about some of the features. So first things first, there's a bunch of tools that are related to the Hot Wheel feature that I'm about to demo. The first tool is the in-app toolbar. This is the toolbar that appears in the application itself at the top. It's collapsible. One of the new features we added is we made it movable left and right because sometimes we'll block UI. If you collapse it, it's pretty small, but still there wasn't sufficient in all scenarios. We also added this right-hand side Hot Wheel that are available because developers were not aware of this feature was working or not. There's some scenarios where the feature doesn't work. So we added the message that says unavailable or available so that it's very clear of how the reload is on. And you can collapse that away if that's not helpful to you. Clicking on the link will take you to documentation. Both the documentation says how to use the feature, in this case, or if it's unavailable, how to resolve that as well. So it's a really important tool and hopefully you find it useful. One of the things that a lot of people don't realize also is there's a button in the live visual tree that if you click the button, it completely goes away from the application. So it really doesn't have to be there if that's not something you want. In our case, we're gonna put it back in. And I wanna show how to reload. And how to reload is a feature that changes the app as the app is running. This app is running right now. I've cheated a little bit, you know, I've created a view model and I created all the placeholders because when you're running with how to reload, Visual Studio will block you from adding a new control or changing the structure of the project, right? So you're gonna have to make all that available. And while I can edit C-sharp using C-sharp edit and continue, view models don't respond very well just because of how it's architected. So I put all that in place and now I wanna show you how hard reload and some other features make this really good experience. So with that, I'm gonna show you the first feature which I'm just gonna add a button just for the sake of demonstration purposes. So I'm gonna add a button in here. The button will be 100 by 50. All right, there's the button. And if I go back to application, I see the button, it just appeared magically because of hard reload. Now this window, I'd actually love for it to be visible at all times. So I'm gonna go in here and say top most and I'm gonna say true. And now the applications will be visible all the time. These are changes that are happening to XAML and being reflected in real time. So what if let's say I wanted to learn more about the button and see the C-sharp code behind it and I didn't know where the button was in source. In this case, it's easy and most more complex applications really complicated. We have a button called enable selection. You click on that, click on the control and in our live visual tree, you can see the button. And this is where I wanna highlight a new feature that's coming soon, it's not yet available but this feature is coming soon. It's called just my XAML. If I turn just my XAML off, you get a much bigger live visual tree. We show you everything in a live visual tree and that's useful sometimes. But by default, we find that only the XAML that you've written is useful. So we're adding a feature called just my XAML. It'll be on by default. There'll be a setting to turn it off by default in case you want the old behavior. So that's pretty cool. And this is basically giving you all the flexibility here to build your app as app runs. Now actually, let's start building the app for real. I'm gonna go ahead and kill this temporary button and show you a feature that we've gotten kind of by default because other teams are doing work called IntelliCode. With IntelliCode, you get stars in IntelliSense of the most likely actions that our AI analysis shows that you might take, so RML. That means we've looked at GitHub. We looked at open source projects and we've made some decisions based on that data for XAML, C-Shop and other languages. So here it's saying to me, there's a really high type of ability that you wanna add grid column definition, grid row definition, in fact I do. So as I do that, it says, hey, there's a really good chance that now you wanna add a column definition, yes I do. And as I'm doing that, it makes writing code just so much easier. So here I am doing row definition, row definition. I'm like tap completing through this, like no tomorrow. So it's really, really performant and how do we load making all these changes come alive for us in the app itself. So as we go through, I was gonna write all the code but as they realize how little time I have, I'm just gonna cheat a little bit and cut and paste a few times. You don't really need to watch me type, that's fine, right? All right, so first of all, let's add some meat to this application. So I'm gonna paste this thing right here. All right, and as soon as I do that, my app comes alive. I just created a list box. I created, sorry, a list view and if I click on the list view, there's an area here where the details of the email should be coming up. I've also created some references to some styles that should be in my resource dictionary. Now I have a resource dictionary, so I'm gonna go ahead and create that. So I'm gonna go in here and I'm gonna go to my solution. So here's my merged in resource dictionary. So I'm gonna put some code in there, save that off, go back, so now the error went away. All of a sudden, my application slightly changed. So as you can see, it's actually working in real time. Hey, let's take it out. The application changed, put it back in. Application changed. Again, very powerful feature in that sense. We also have a cool feature in, available as part of the in-app toolbar, which lets you see exactly the alignments of things. So as you select, you can see how that selection is aligned to other things. So we draw grid lines based on enable selection. So you say enable selection, you click on something and then it enables you to show the grid lines around it and across. Very useful feature, more complex applications. Right there, you can see exactly where we remind their baby shopping ends and you can see how that aligns with those useful. So a cool little feature, display adorners available. And then with the selection, I'm able to once again click on here and then see exactly where's this border defined and click on define view, see where this thing is available in my source code. So it's very powerful in that sense. Now let's keep building this application up. I'm gonna add some more of the code that I wrote before. So I'm gonna add another piece here, which is a text block. And think about this, my app has been running the whole time. I am not having to switch around. So as soon as I added another one, let's in fact collapse this. This is where collapsing is useful. As I'm switching, it's working, right? It's displaying the kinds of the email. Now behind the scenes, this is just all in VVM. I've got bindings happening and the bindings are, you know, let's lower this so I can show you. We've got bindings to an emails collection, observable collection of email objects and we have a selected item binding two way to the selected item. And then we have the text block binding to the selected item.body. Everything just works and you can go ahead and say title so you can really change this in real time. Body works. If you misspell something, it's just not going to work until you fix it but you're getting errors inside of your output. So if you're watching that, you can see if you just have spelling errors that are coming in there. All right, so there you go. The application is being built up but that's not all this thing can do. Let's go a little bit deeper. I'm going to go back to my cut and paste window here and put in a status bar into this application. So right now, no status bar. If we were building a real client, we'd have a status bar. So I'm going to add the status bar in and now we have a status bar. It's just connected. Works great. But in reality, a lot of the way that you compose a real WPF or UWP application is by using controls to move some of the logic out. So in this case, I want to move my status bar into a control. Now, I've cheated a little bit. I've already put a control in here. So I have the status bar placeholder. If you didn't have this, you would have to stop right now and go ahead and make that happen. So in here, I will select this and I will say, well, I'm going to cut this out because I don't need that. And I am going to first add a reference to the control. So all these normal XAML things, MLNS says, oh, I did this before. I should have cleaned it up, but it's OK. We'll do it again just because I want to show that everything you basically need to do is really available in real time. So here I am and I'm typing control and I'm getting IntelliSense. IntelliSense showing me this is probably the control that I want to highlight. So I'm doing that. And as they go down, I can now put the control in here. So I'm going to go down here and I'm going to say, control, there's the control. I'm going to put it's grid row, grid column span, close that out. And right now it looks a little bit messed up because now my status bar lost the grid row and column span. So I'm going to remove it. I'm going to go and I'm going to open up the control. I'm going to paste it in there and everything is back to normal. Very powerful. You can literally be sitting here building your app, especially if you again get your view model and everything working correctly. So let's dive a little bit deeper on the tools that are available because this isn't everything. So let's say I want to play around with the status bar but now I'm shifting scenarios a little bit. I want to make changes that I don't want to commit. Right now hot reload is all about like you're changing XAML and as long as you don't delete the XAML you changed, don't undo the XAML you've changed, it's going to wind up in your application sooner or later. Now what if you want to just really try something crazy or experimental and you just want to focus on the session that you're working in now. So we have a tool for you as well and I want to explain one confusion that I've heard customers say, they're like, well, there's already a properties panel. Wouldn't they use a properties panel to change properties? You would if you want them to be again, be committed to the source code. But if you just want to play with the application as it's running and just have it be temporary, we have another tool for you. Let me go ahead and show that right now. So I'm going to select the status bar control. I'm going to open it up and I'm going to go to the status item. In fact, I'm going to go all the way down to the text block inside of it. The one that says connected. And I'm going to click this button right here called show properties. Now this will show something called the live property explorer. This is another window. It's not the properties window. It's the live properties window. So it's the one that lets you make changes that are temporary. So let's go ahead and make some temporary changes just for fun. First of all, I don't know if connected is the word I want to say because I'm like, well, connected works both connected live, right? Will that work? Will that sort of fit? So hit enter. Okay, yeah, that's fitting. The status bar is not breaking. Okay, that's good. I actually want to change font. So I'm going to go in here and I'm going to say font size. What if the font was 24? That's not going to work. Font 24 is definitely going to be too much. How about font 18? Still cuts off a little bit, right? Not really great. It's 14, 14, oh, 14 is good. So now I know which font I want to make. So I'm going to go in here and I'm going to say font size 14. So this enables you to play with the application in a way that you can kind of go crazy and then you can reset everything back to the default values or if you just stop debugging, it will reset itself. So it's very much safe to go ahead in there and make lots of changes that you want to try. So this is hard reload. I've gone through and I've built like a little application that sort of feels like a real application, right? We've got everything working and we can see clearly what our tree looks like. So some of the other features that I want to point out that might not be familiar to everybody is some of the work we've done. So I'm going to minimize the app because I want to focus on the XAML window right now. So some of the work we've done in the XAML itself. One of the things that you might want to get help on because it's not clear where something is, is for example, static resources, like Lizbox email style. Where is the Lizbox email style located? I'm not sure where the XAML is. If you right click on it and you say pig definition, you can actually look at the definition and you can see the file that it's in. And it's one of these temporary files that you can pin up. It's just like pig definition in other languages and that works. It works in a lot of places. Give it a try. If it's not working somewhere for you, let me know. If there's a scenario we didn't think of, we'd love to hear from you, but that's a cool feature. You can also right click and say, or use of 12, you can say go to definition. So you can actually just jump straight to the file and make changes there. So if I wanted to go in here and I wanted to make the fonts even bigger, there you go, the font became even bigger. Again, hard reload is still working as we're doing all of these things. Another feature that I've talked to people, they're not familiar, we have it, but it's actually really useful for really complicated applications. They might have like, let's say, a lot of resources at the top and you wanna look at something, we're looking at XAML at the bottom. We have the splitter right here. If you drag the splitter, just like in other places, you can stay at the top and the top one. You can scroll down to the bottom one and you can make changes, cut and paste values, things like that. Very useful feature and definitely worth knowing all of these little tips and tricks to make it easier for you to build your XAML application. So I'm gonna go ahead and actually move this back up so that it works and now it's back into being one single window. All right, let me make sure that I've shown you everything that I wanted to. All right, I think I did in this case. So let's look at one more feature here. So I'm gonna stop debugging. This is a feature that's available and it's best to look at it when your application gets a bit more complicated. That's why I kind of kept it today. And this is a document outline, really undervalued window in this XAML tool space. We're in fact thinking of maybe doing more with this in the future and we'll see how that goes. But basically this window enables you to see all the controls that you've written inside of your application. And you can go ahead and look at the designer and you can make things visible or hidden. So it has that ability. In my case, I don't have much to show in that sense but you get the idea. So these are temporary changes that don't apply to your running app. It's design time properties that you're changing. You can also right click on a control in here and you can edit a style and create a copy just like we saw. You can click on view source and it'll select where in the source this is. So think about document outline as the control that you can use when you're using the designer and the XAML editor, the app is not running. And then when you switch to hot reload as your app is running, that's where the live visual treat LVT as we call it is available for you and lets you do everything you need to do there. All right, I also want to point out a couple of things like we're constantly making this better. So I'll give you some examples. There was a deadlock error like we messed up. We had an error where if you said in WPF application go to definition we actually froze visual studio. Really sorry about that, we did not mean to do that. We fixed it, it's in one of the recent updates. There was also a bug where as you're typing intelligence for example in the code editor you would get static resources for let's say a list view. And we would in theory only show you the styles that apply to target of type list view. But we had a bug where we're showing everything. So things like that are being fixed. We're not making a lot of noise about it but we know these are behaviors nobody wanted to have. And if you find behaviors that you're like why is this working kind of strange? Let us know, we could miss something too but we really want to make it better. So these are investments that are going in for WPF and UWP developers. We're doing everything for every type of customer that we have. All right, in the last couple of minutes I wanna show you one more demo. So one thing I will point out is that we're switching gears quite a bit here but it's really worth knowing about. So I'm gonna switch over so these are just the hard reload docs I had open just to demonstrate like we have hard reload documentation. That's where the link goes if you click on the link but let's switch to another doc completely XAML Islands. XAML Islands is a technology that's been being worked on for a while. It's a technology that enables you as a WPF or WinForm developer to host UWP controls inside of your application. So let's jump back into my slides for just a couple of minutes here. And just an interest of time I'm gonna go quickly through it and just explain that XAML Islands think about it as if you have if you think about UWP as a whole there's a lot to it. There's an app model, there's MSAX all of these things but one of the biggest parts of it is the controls and if you want the controls in your application XAML Islands is the way we've enabled this just wasn't possible without XAML Islands. The work that my team is doing for a future release probably sometime in a 16-4 timeframe is we're making it so that implementing XAML Islands will not require you to do manual steps. Today there's some manual steps that you would need to do we're making it so you don't need to do manual steps. And the way XAML Islands work today is requires 1903 version of Windows they are looking to back port XAML Islands to older versions of Windows but for now that's the thing and it allows you to host inside of a C++ app as you know, Win32 app, WinForms or the BPF application and then you host your controls in there and there's all these wrappers that we've built I would say just look at the documentation that's the best place to get all the information but there's lots of wrapper controls that the teams built it's open source and it's pretty easy to implement it's kind of basic, there's not a lot of tooling support it doesn't give you all the niceness of hardware load designers but it does work in your application so if you block this would unblock you and just a quick demo of what that can look like I will show you something that's super simple this application literally has three list boxes but it's very significant the first list box on the very left is the one that comes with WPF this is a WPF core app with a WPF list box nothing to see here this next one is XAML Island it's a natively used, I'm doing data binding using C-sharps, I'm doing it in C-sharp just to kind of demonstrate that that's possible and then we have a third one which I've styled so it's even possible to style it as well because I'm hosting it in a custom control so I have full control over style it can feel and I'll have the sample available as part of the link so that's kind of my demo all of this is here for you I wish I had more time and I'll be back on we have community stand-ups and other things we're doing via steel box to talk more about this and thank you so much for joining me if you have questions please tweet at me or email me thanks a lot