All right, all right, let's get this started. Good morning, everybody. How's it going out there out in Twitch and YouTube land? My name is Jeff Fritz, and I'm joined today by Demetrile Allen and Daniel Jacobson. Hey, good morning, guys. How's it going? Good morning. Good morning, Jeff. Hey, hey, Jeff. Oh my gosh, I am so looking forward to today. This is one of those days where we're doing a workshop. I love that you guys are in Channel 9. We're going coast to coast. Channel 9 over there, we got Seattle covered. I'm over here in Philadelphia. We're going to talk about Windows development, Windows application development. Oh my gosh. Guys, I cut my teeth building Windows applications, but I understand new things are happening. There's cool stuff happening for Windows developers, right? Yeah, always. Definitely. Well, we're super excited. I mean, this workshop is something we've been talking about for a while on the team. Maybe some introductions are in order. So my name is Demetrile Allen. I'm one of the PMs working on the tools for .NET developers building for Windows, and this is my colleague Daniel. Hey, my name is Daniel. I'm also a senior program manager working on the same team. Really excited to show you some of the work we've been doing in Visual Studio 2017 and in upcoming 2019. And really hoping to teach everyone something that they can use to be more productive and obviously be a better Windows developer. Awesome. Awesome stuff. All right. So we've got some content. We've got some slides to go in here to get started, to introduce the topic, don't we? Yeah. All right, let me cut over to your slides. You can get off, OK? Sure. All righty, there we go. Look at that. It's like we planned this. Almost like we planned this. So just to start it off, we're beginning with today's full agenda. As you can see, we have a full day packed with content around .NET desktop development, beginning with some tools that you can use today that are already available to empower you and your sample development primarily, and then focusing heavily on modernizing existing desktop applications with Windows 10, and especially with .NET Core. If you haven't heard the news as a Windows developer, WPF and Windows Forms are coming to .NET Core and are doing so in the open on GitHub. So we've got lots of really exciting content. Later on in the day, we've got some MVPs coming in to talk about building applications using Prism or even using Reactive MVVM on .NET. So it's kind of a different paradigm for building Windows desktop applications. And then like I mentioned before, the modernization aspect with .NET Core, XAML Islands, Windows 10 functionality, and then finally, introduction to Xamarin Forms.  Last but not least, an often neglected topic in the client or the Windows development world, which is DevOps. So how do you create a CI, CD distribution system and automate pretty much everything so that when you check in code, you have a new package ready to go. Oh man, okay, that's a ton. I'm not a normal XAML developer. So some of those things that we're going to get into there, I'm really interested to learn more about because I'm typically a Windows Forms developer. So I love seeing that we can do XAML now in all of these cool places. Yeah, and I think this really brings us greatly into the next slide that we have here, which talks about, you know, what is desktop development like today for a developer? And the way that we see this ecosystem is that wind forms and WPF are very important and very productive frameworks. We see lots of developers, in fact, millions of developers building against these frameworks, including UWP as well. And we really believe in empowering those developers to be really effective and have access to all the APIs and all the controls and also all of the modern things that are coming to the .NET framework. And this is what the day is all about. It's to go through the tooling developers can use today to talk about what's coming for developers with things like .NET Core 3s, ML Islands and lots of other technologies, much more Windows 10 goodness coming to these folks. And also to highlight our open source efforts because we've really pushed heavily, as you know, Microsoft for open source and in this particular case, we finally have goodness to share, which we couldn't have shared a year ago, which is wind forms and WPF is open source and we're committed to building that in the open. The Windows UI, Wind UI is as well being built in open. So lots of good news there to talk throughout the whole day. Cool. I'm noticing a couple of comments saying that there's audio issues or that audio is too low. If I sit closer to the microphone, does it improve? We will hug the microphone. We can hug the microphone so you can hear it. No, no, I'm trying to cut some of that little bit of clipping that we're getting in your audio. So I see one comment, make UWP open source as well. We're actually doing that with the controls. So if you can see at the bottom of the slide, when UI is open source, if you go to the website aka.ms slash when UI, that is essentially the Windows 10 UWP platform controls. AKA.ms, when UI, you said? Yeah. All right, we'll put that into the chat room there. Cool. There you go. So not all of UWP is open source, but at least the XAML part. Yeah, there we go. Cool. I think the reality is there's a lot of things we could be open sourcing. It's gonna take Microsoft time to figure out what are the right pieces and we never wanna do open source without ensuring that our team can try to make it sort of a productive repo that's actually been worked on open as opposed to just putting code out there. It's easier for a code and open. It's much harder to really do open source. So keep the feedback coming. I think the community has driven a lot of the decisions Microsoft has made and without you, we wouldn't know the right things to do. So keep telling us what you think the right things should be. Very cool. I'm wondering if we might be able to get colonized to sneak in there and check some of the levels on your microphones just because they're a little bit hot and they're clipping. All right, sounds good. Give me just one second. I'll be right back. Okay. Oh, Jeff's idea is always first class. He is the master of audio. Yeah, I'm sitting here. I'm trying to pull.  I'm like, all right, let me cut the bass a little bit and ah, no. Well, this is the joy of Twitch streams.  We have a great hour of content. We really appreciate all the people that are already watching and we will check what's going on right now. We've got Gomez in the studio. Oh my gosh. And in the meantime, since I think Jeff is the one you can hear the best, he can find a way to entertain you all. Hey, I'm just doing a thing. We're gonna write some code. We're gonna... So Jeff, maybe go back to the agenda and show people what the day is gonna be about. We're gonna kick back there so maybe you can... There it is. So... Okay. XAML tolling for WPF and UWP. This is really where we need to get in for those folks that are just getting on the bandwagon. You haven't built Windows applications in a while. You're not used to seeing XAML. You haven't done WPF yet. You wanna get in, you wanna get a little bit more familiar with these topics. That's what we're gonna cover in this first hour. Prism and what Brian Lagunas is gonna bring us in the next hour after that is it's a great framework that you can use to standardize the way that you build and lay out your applications. It's... Right, it's... How would you guys explain Prism? Well, Prism is all about enabling MVVM, which is the pattern that a lot of developers building desktop applications finds suits that sort of application really well allows for a lot of testability, code reuse, and really enables the kind of clean separation of code that makes moving fast possible as a team as long as you have the kind of the baseline where everyone's coding at the same level. I've done many projects around MVVM where it really did take about a week or so for the team to get oriented, make sure everyone's following the right patterns, but after that, we were usually golden. Yeah. I see one question. Will there be any talk about DirectX? Do you have any specific questions? I don't have any content planned specifically about DirectX, but I'll try to answer a question. Yeah. Yeah, absolutely. And guys, your audio sounds a lot better now. All right, cool. Big thanks to Golnaz out there for putting that in. Yeah. Awesome, and we're getting some comments as well. Oh, that's much better. Yeah, look at that. That's much better. Great, thank you Golnaz. Thank you so much. All right, fantastic. Yeah, Ancient Coder says audio is fine now. I trust Ancient Coder. Cool. That is great. All right. All right, so how about we restart from the beginning because I feel like those people coming in later on demand will appreciate a clean cut and then we have plenty of time to get the session done. Welcome. Hi there, my name's Jeff. Welcome back. Welcome back, attempt number two for those watching when we cut the other stuff out. Yeah, absolutely. So really, this is a full day to show folks how cool Windows development is now, how much there is that we can do with these things so that you can get, not just, I mean, it's okay to build a website, but when you actually need to build an application that has to attach to sensors, that has to do things richer on the desktop, you've got a lot of options. Yeah, definitely. So we've got a great day for you here. You know, then you'll take the first shot of the agenda, I'll take a second shot. It's, today's all about desktop developers. Today is a day where here's the agenda. We've got seven hours of content, both from Microsoft product teams where Daniel and I work from our MVPs, which are, if anybody doesn't know, is the community at Microsoft, the people that we saw nominate as champions of our technology that don't work for Microsoft.  We're gonna start with what desktop, like WPF and UWP developers can do today in Visual Studio to make them very productive. We're gonna jump into Prism and reactive NVVM frameworks to talk about the right patterns to implement for your desktop applications. We're gonna jump into the future. We're gonna look at .NET Core 3, which is coming to WinForm and WPF. We're gonna look at modernizing UIs, XAML islands, and things like the Windows 10 APIs. And we're gonna close the day with an introduction to XAML Informs, which, you know, lots of people still love to see because lots of people haven't really started. And XAML Informs keeps evolving. So if you haven't looked at XAML Informs in a while, I think you'll be surprised just how much easier it is nowadays to get started there. And we're gonna end with my favorite topic, DevOps, CI CD for desktop applications, something that, honestly, we should have been talking more about the whole time, but we weren't. And now we are trying to fix that and bring that to a forefront because, you know, it's one thing to invest into technology. It's another to actually talk about it and make sure people know so much is going on. Absolutely. Yeah. Some of the themes of today is just trying to make you, as Windows developers, more productive and show you some tools that you might not be familiar with. Absolutely. Now, go ahead, Jeff. I was gonna say, there's a comment here in the chat room about even being able to put UWP apps on things like a Raspberry Pi. Yeah. Yeah, one of my first demos at Microsoft was building like a shop analytics thing that had a couple IR beam sensors so that when something went through it, like a person walking through a shop, it connected to an Azure server and sent a notification and recorded it in a database all on a Raspberry Pi. It was pretty amazing. Oh, very cool. That would make sense if you wanted to track things like how many times people walk into, into the changing room at a store. Oh my gosh, that's, okay. Yeah, so some highlights that Dimitri covered before and now we're kind of switching roles since we restarted. There are so many developers that still use Windows Forms and WPF to build desktop applications today and we constantly hear that they're just super productive. They're familiar, they're powerful and they're easy to get started. So we're kind of re-energizing that community and re-investing in that community with modern tools, with .NET Core, with bringing everything open source and this is kind of just one way to talk to the community and make sure that we have an open channel of communication. One of the beauties of open source is that this isn't the end. We want you to engage with us kind of throughout this process. Tell us what works. Tell us what doesn't, give us feedback, engage in those repositories on GitHub and ultimately we want to build the best solutions for you. So I'm really excited to be a part of this community and I hope you are too. Daniel, you make a really great point there. Being open source isn't about dumping source code. It isn't about saying, oh, here's the code, you go figure it out. It's about becoming part of a community, getting that feedback, getting that rich interaction so that when we do build things folks say, this doesn't make sense, what the heck are you doing? And or being able to say, you know what? This really helps another scenario that's really cool and valuable to my organization. Here's an issue for it and here's a pull request that maybe it's not 100% best code but it gets Microsoft, gets the project maintainers in the right direction. Really a lot to say about opening the community for Windows development. Yeah, and that's what we're doing. So we kind of already belabored this point with our previous conversation but just to drive the point home, Windows Forms, WPF and Windows UI XAML Library, the Windows 10 controls are all available today on GitHub and we're constantly adding more code to those repositories as we just kind of build up that infrastructure and working with the community to make them awesome. Finally, just talking about some desktop improvements we are making that are kind of new and modern for desktop developers is XAML Islands and XAML Controls. We've got a full talk on it today and later on in this actual hour, we'll do kind of an introduction to that. And we're also making it really easy to access all of the Windows 10 APIs in your existing.net desktop applications or in desktop applications targeting.net core. Last but not least, one of the things we've been doing since kind of the very beginning of supporting desktop applications in.net core is we're working with real customers building large-scale applications to understand what it is they're most looking forward to and understand how we can migrate their applications. And some of the things we hear time and time again is just deployment flexibility. If you've been building.net applications for a long time, you are probably familiar with the pain that is.net framework updates and deploying.net framework updates to a large community of devices and that prevented kind of agility in our ability to innovate. So customers couldn't take advantages of updates because they had to do.net framework updates. We had to be really, really extreme about compatibility guarantees so that they could actually take those updates without breaking the world. And that's made it difficult, but with.net core and the ability to deploy side-by-side machine-wide frameworks or even an app local framework, you can innovate at your own pace and we can deliver new value to you with every new.net core release. In addition, we have some core runtime and API improvements. And if your application has heavy file dependencies, heavy networking dependencies or SQL IO dependencies, you may also notice a runtime performance benefit. So it's another good advantage of.net core. And with that, we're gonna start getting into demos. Today is gonna be a huge demo heavy day. It's all about demos. Yep, so just some takeaways at the start so you can kind of keep the theme in mind as we go on. But I wanna make sure, hang on, I wanna make sure that we make it clear, this isn't just demos, right? We wanna make sure we hear from our friends there in the chat room. As we're going along and we're showing things, interrupt us. Tell us what it is that you want to see or if there's somewhere that we need to jump off and we didn't explain something quite well enough for you. That's okay, let us know. We'll back up, take a look and dig a little bit further into it if it's not clear for the chat room. This is about teaching you, the folks and friends that are watching out there. We give these presentations all the time. We wanna make sure that you get the content you need. All right, go ahead, I'm sorry. Cool, yeah, so from this first hour, some of the takeaways we hope you get is just becoming a more productive XAML developer. So you can see lots of XAML in our little bulleted list there. And one of the things that we're gonna do is go through each of these tools and show use cases of why they're valuable or why they may be productive for you. And then we also have a distribution list that you can all reach out to and send us feedback on XAML tools specifically. And this will actually reach to metering myself as well as the engineers building the XAML tools. So if you want a direct line to the product group working on a lot of this stuff you're about to see, send us your feedback. We definitely wanna work with you to make things better. But Daniel, we mentioned that Windows UI GitHub repository out there. Can we open issues there? Is that someplace that we know we've got engineers and program managers checking things out? Yes, so we look regularly on the GitHub repositories. If you file tools specific issues, you might get a redirect to file it in Visual Studio feedback, mostly because the engineering teams operate a little bit differently. So from a XAML tools filing issues, you can report a problem in Visual Studio using the little feedback icon in the top right. But if there's an issue with the platform or the runtime or any feedback or suggestions just to make WPF better, that would be encouraged on GitHub. We would love that. Yeah, yeah, right, this is the difference between Visual Studio is being still developed in the close, it's behind scenes here at Microsoft. But the frameworks, you can impact, you can make a change in out there on GitHub and watch what they're building. That's really cool. Yep, yeah, so let's get started. And for those XAML enthusiasts out there, I'm actually gonna start today with Blend. And one of the reasons I like to start with Blend is just it gets me into that design-focused view. And just for prototyping the UI, I think it's a little bit cleaner for me. So I'm gonna create a new project. We're starting from scratch today. And I'm actually gonna create a .NET framework WPF app. And let me set a little bit of context before I make too much progress. Right now, our desktop support for .NET Core is still in preview. We don't yet have all of our tools built up and ready to go. And so the XAML tools talk wouldn't be super useful. That said, most of today's content is going to be focused on .NET Core. And our goal with .NET Core is to make sure that you have a fairly similar and familiar experience if you're already coming from .NET framework. So while we're doing framework, most of what I talk about will also apply to .NET Core. And I'll call out several exceptions if there are any. I mean, to be clear, Daniel, you're right. It's been 15 years that we've built up WPF and all the frameworks that are going on around WPF in Windows to be able to announce .NET Core 3 and have something available as a preview in less than a year. That's pretty amazing. Yep, so we're going to create a project. I'm going to call it the map game because we're going to have a little bit of fun today. And it's going to be a really simple lap. So my goal is to build the entire thing in just about 15 minutes. So Dimitri has plenty of time to show off some other really cool tools. We're writing code in real time. What can go wrong? Chat room. Exactly. Guys, guys, we can make it better. All right. So here you can see I have a blend open and some of the default settings in the XAML designer and blend are with design focus in mind. I've got this toolbar on the left. I've got the grid lines enabled by default. And the way I view my controls is a little bit different. Instead of the toolbox, I have the assets pane to manage my controls and break them up into different categories and things like that. So just thinking about the layout of my application to get started, I'm going to want to kind of break up my UI into four quadrants. I'm going to have a big title at the top and then I'm going to have a column on the left side that allows me my user to do input. So in this case, all I really need is the longitude and the latitude, the coordinates of where I want my map to zoom. And then the majority of the content, so this entire section is just going to be a big map. And so to start, I'm going to build my layout. And fortunately with the XAML designer, I can go ahead and just add in some layout controls by clicking here. I can add a new column separator and here I can add a new row separator. So that's the gist of the layout, but I'm going to go in and edit the row definitions to be a little bit cleaner. So let's make that one star and make this five stars. And that way I've got a big enough column to host a couple buttons and a couple text boxes. And then I'll do the same thing on the left. So let me zoom out just a little bit and again one star and let's do this about four stars. The last thing I'm going to want to do is I'm going to want to put the button on the bottom left just for some styling. So I'll add one more column. And actually let me adjust my column settings once more. So I'll make this two stars. I'll make the bottom one, one and a half star. And then I'll make the majority of the content 15 star. I'm eyeballing it. This is what I like to blend for is it kind of gets me into that design mode and I can just visualize exactly how I'm creating this. Maybe 10 stars is ready. That looks pretty good. Cool. Last but not least, I'm nitpicky today. So the button's going to go here, which is going to search. I've got a couple of fields that are going to go on the left side and then I'm going to have a title on the top and then the map is going to take up the rest. So let's go ahead. Now you've been using this star here. Is star just a way to say this is a percentage of a... It's proportion. A proportion, thank you. That's a great question. So if you think about it in context, one plus five is six stars. So this column should be one sixth of the total width and this is five sixth, or this is 20% of the size of this basically. It's much easier to do than using Bootstrap with 12 columns and I've got to divide by... Okay, got it. So the first thing I want to add is just a text block for my title and I can drag it and drop it onto the designer. And then if I click on it, I can actually have it span across both grid columns. So it's automatically setting the XAML behind the scenes. And with snapping, I can actually get reasonable margins relative to the layout control. So I'm going to just put it there. One of the pieces of feedback we've gotten fairly regularly using the XAML designer is that the XAML that it generates behind the scenes is a little messy. We haven't fixed that yet, but we're working to make that better. And this is one area in particular we would love your feedback. So again, that XAML designer feedback at Microsoft.com. This is something you're interested in. Let us know. That's it, I'm going to go ahead and change the text to say, where is Windows Dev Day? And let me make it a little bit bigger. 40 pixels.  So let me actually make this three stars. And make this big to account for that. There we go. Cool. So now on the left side, I'm going to add in my other field. So what I'm going to need is two labels so that I can label longitude and latitude. So those are going to be more text blocks. And then I'm also going to need text oops. I almost forgot one thing. Text oops is my favorite. Text oops is my favorite. So when I'm thinking about the layout, I could do another grid layout here and position everything relatively with margins or things like that. But again, if I'm just thinking about it from a layout standpoint, all I want to do is vertically align all of the controls in this column. And fortunately there's a panel for that. There's a stack panel. So I'm going to go ahead and drag in my stack panel into that section of the grid and just make it take up the entire column so that every control placed in the column will automatically be vertically aligned and just on top of one another. So now let's add in my control. So I can add in a text block and a text box. And this will allow me to label longitude or latitude and then have someone enter that. And then I can just go ahead and select both of these by pressing shift and click and holding down the alt key to duplicate them. So I'm going to need two, one for longitude and one for latitude. Just trying to make things go a little bit quicker. Some of the other things that I really like in the XAML designer as well is if I select all four controls by holding control or holding shift, I can go ahead and modify any shared properties. So all of these controls, text box and text blocks have a margin property. And let's go ahead and set that now using the property editor. So now they're a little bit more spaced out. I think that's a little nice. But I think I want these two to be a little bit further down from the ones above it just to separate the fields. So in this one in particular, I'm going to add a little bit more margin to the top. Now in the text boxes, I'm going to clear out the text because the user's going to enter the text or when we're running the app, we'll enter the text. And then I'll add longitude and latitude here. Longitude. Last but not least, I need that button that I was talking about. And so I can search for it in my assets pane and drag it to the bottom of my grid. And again, just using the margins and things like that, I can make it take up a little bit extra space. And what this button is going to do is it's going to search for those coordinates on the map and zoom the map into those coordinates. So let me change the content of the button to search. So Daniel, you put labels next to the text boxes. A lot of folks when they're building web pages, they like to put the label actually in the text box as a placeholder. Is that something you can do with these controls as well?  Like if you search for stack overflow, there's definitely ways that you can do that. But for now, I kind of prefer this way. I like the old school style. Sure, this is the in the box controls. Yes, and when you think about it from the scenario standpoint, if I enter in just like a random number here and then that shadow text disappears, I might not know what that means anymore. Like, okay, why did I, which one is longitude? Which one's latitude and things like that. But yes, there are ways to do it so that you can replace shadow text in a text box. Cool, great question. One of the other things that I like about Blend is just styles and resources management. This is one feature that is not yet available for the UWP designer. And this is also an experience we kind of wanna rethink and make it better in the future. But that's just resources management. So I can right click on any control in the designer and select edit style, edit a copy. And in this case, I'll call this label style. And I'm actually gonna place it at the application level. So one of the great things about using the designers, you can create these styles, put them in your app.xaml file. So if I click okay, it places it there. And now I'm in the process of editing that style. So I can edit it here, or I can actually go to app.xaml and I can see it here in the xaml itself. So when you say it's at application level, it's got global scope across the entire application that we can access and reuse the same style. Yes, so if I have multiple views, I can apply resources for my app.xaml, global resource dictionary to pretty much any control. So here you can see the style as soon as I created it, it's here. And right now it's just the default text block template style. But if I right click edit, it takes me into this edit view. And this is something that is exclusive to blend. So if you wanna see the types of styles that you're creating, you can go ahead and do that here. The other thing you can do, and I just wanna add that this is super useful. Like a lot of people have really complex applications. I mean, this app is really simple, but when you have an app with a lot of styles you'd be able to go in and preview you to make sure it's the style that you expect. That really works well. We talked to one customer that was even having really complicated styles that were actually hidden by default. So even if you try to preview them, you couldn't. But what he would do is he would go in and just make him visible temporarily, just to check them. We're always looking to learn from examples like that. Maybe in the future we can make it even better. But the point is that there are paths forward to make you successful even when you're doing something very complicated there and keep the feedback coming. We're here to answer questions. Yep. Yeah, and so obviously when I first do that it's difficult to see the text block but there's fortunately a little toggle button. So when you're working with styles that may be difficult to see on a dark background you can just toggle it and switch it. And so here I am editing the style of the text block. So what I can do is change the fonts and then let's make it a little bit bigger. Hang on, let me hide your camera there so we can see it since it's in the lower corner there. There you go. Now we can see it. So all I did was change the text. So Sego UI Lite and I made it 16 pixels. And if I return to my main window I can see that the update has been made and I can toggle the art background. So I like the dark background a little more. And you can see it applied to that text block. One of the other great things about Blend is you can just drag and drop styles onto controls. So if I get rid of this selection mode and select the text block and drag the style onto the text block I can edit the style and apply them that way. So obviously this is kind of a simple example but fortunately I prepared a couple added styles beforehand. And since Blend is now in the Visual Studio shell we do have the XAML editor which is one of the benefits of having the two together. So if I go ahead and make the XAML full screen and paste in a few more styles what you'll see on the right hand pane before I do this all of the styles are gonna populate there immediately just like that. And you can see the target that they apply to. So here's the button, here's another text block, here's a text box. And now let's go ahead and style the rest of my application really quickly. So I've got rounded buttons which should apply to the button. That looks pretty nice. I might need to add a margin there. Rounded text box. Style, okay. Oops, the wrong thing. Ah, as you can see if you double click the resource it takes you into the resource editor which is a misclick. But again, that's one of the benefits of Blend is you can see the changes you're making to that style.  We didn't really have this with CSS for web developers but to be able to do it naturally like this feels like something that a designer, somebody who's focused on user interface they don't have to think about what property do I need to set or wherever. This is the style I want, just put it on this thing. Gosh, I think there's a lot that we could learn from that in normal, in full visual studio and not just Blend to make it a little bit easier experience for folks that are building applications. Yeah, absolutely. And that's really the goal here and that's kind of why some people really, really love Blend, myself included. It's just, if you think about it from like a cognitive context switching exercise too it's, this is my design tool. Like when I'm in design mode or art mode I use Blend, when I'm in coding mode I use Visual Studio. So just thinking about it that way is interesting. So I've got my layout pretty good. One of the other benefits of Blend being in Visual Studio is you can run your application directly from Blend. So I will hit F5 and I can at least take a look to make sure that it doesn't look crazy. So that looks pretty good. My button's a little wonky. But let's go ahead and take a look at why and I'm jumping the gun here just to make something. For some reason it put it in the wrong row. So I'm going to fix the row and remove the margin and actually just make the margin five. And that still looks kind of weird. Let me make this. Oh, some of the layout got messed up. That's why a good row span is two. I don't want that. You know, one of the things I'm going to do just to get this right the first time is let's remove this button and try again and make sure that it ends up in the right place. I think earlier when I was messing around with all the grid row sizes, I was messing things up with it. So let's try to make sure it lands in the right spot only in this grid row and column. There we go. So now the margin seemed a little bit more reasonable which means I think I'm in the right spot. Now let's go ahead and apply that style one more time. There we go. And now I can make it a little bit bigger. There we go. That looks good. Last but not least, I need to edit that content one more time to search. And this is just kind of like when you're thinking about your application, it's good to figure out the layout first and then build the experience. There we go. So now I've got my search button and that looks pretty nice. I can hover over it and think. So there's no code. All that you've done is literally build the facade. This is what it looks like. And then we can go wire that up to code later, right? This is that division of responsibilities. Yes. And one of the things that's nice too is I even have like tab targeting because these two controls exist in a stack panel, one on top of the other. So I can tab between them, which is great. But now we're gonna go into code. So now I'm gonna do that context switch. And fortunately, I can just right click on a file and select edit in visual studio. And now I have visual studio 2019 launching. Adam, were you, so there's some feedback in the Twitch chat that I wanna call out that saying, when I'm looking at the grid lines and the road lines, although the colors are different, it isn't so easy to differentiate them to my eye. Is there a way to adjust that color difference? Can you please send us that in an email? I definitely wanna make that better for you. And I think that's an easy win that we could do. So they would do that, Adam would do that by clicking the feedback button at the top of blend? You could click it in the feedback button at the top of blend or visual studio or just send it to XAML designer feedback at Microsoft.com. Cool, I'm gonna drop that email address in the chat room so that folks can get that XAML designer feedback. Thank you, thanks Adam, that's awesome. So this is visual studio. As you can see, if you're familiar with the blue theme, things are a little bit different. This is 2019, we updated the theming just a little bit. But it's still your familiar IDE that you're probably already used to. Here you can see I have my full XAML view but I'm going to switch it to be half and half. And now I'm gonna start adding some features. So the thing that I wanna do is I wanna get the data from the longitude and latitude box when I hit the button and search for that on the map.  This is currently available as an extension to visual studio and it's called IntelliCode. And I can see, I think Jeff's face is covering it so I'm moving it higher up on the screen. Hang on, hang on, I can hide my face here. That's easy for me to do. Yeah, yeah, Jeff, can you please like, poof, is there like a smoke effect did you do? So let me, let me explain this next feature with an example. So in the button control, if I hit space at the very beginning of the control, my intelligence shows a starred recommended list of properties that I probably wanna set given the context of where I'm making that edit. No, wait, those stars aren't part of the name. That's, it's saying these are suggestions. Yes, these are recommended suggestions that are driven from a machine learning model sampled off of tons and tons of GitHub repository data. So open source projects. So it kind of enforces the most popular patterns but it typically makes sense if you wanna find the name of your control that's what a lot of people do first. So I'm not gonna enter that just yet. I'm gonna just change the context within the same control. So I'm still editing the button but I'm at the end of the button. If I hit space, it recommends a different set of properties because those are maybe more likely to be at the end of the control. So if you think about patterns in an organization or things like that, everyone starts putting these properties in kind of a similar order. It makes the code a little bit more legible and easy to read. Wait, hang on, hang on. In telecode isn't just telling you these are the important ones that a lot of people use but at this position, this is the one that, oh man, all right. I've already been sold on this. Amazing. For example, it is so cool because of just the declarative nature of the language. It just makes it so like you pretty much just hit tab to code. So there's my name. I'll call this search button and then I'll hit space again in this context and click is the third one. That's what I wanna do. I'm not gonna do MVVM because we're going quick. That's the next talk. So then I need a couple of names for my text blocks as well. So I'll call this, whoops, not text blocks, the text box. I need to get the text property later. So again, name comes up first. I'll call this long box or my longitude box, not because it is a long box. And then again, same here, lat box. And then I will actually go into the click event handler. So let me go ahead and here, I can right click to go to the definition of this event or just press F12 and it takes me to the C sharp definition. Now, the last thing I wanna do is I don't even have the map control yet. So now I'm gonna add my first external reference. I'm gonna go into manage new get packages and I'm gonna search for one that's called the Microsoft tool kit for WPF development. And you'll hear more about this later in the XAML islands talk, but in this toolkit, which is produced by a team at Microsoft, we've made some of the more popular controls that you might wanna use that are UWP controls in WPF available. So let me show you how easy it is to actually just add in a map control that is the UWP map control. So I added that reference and we're getting to one of my next favorite features that we added in Visual Studio, I think it was early 2017. So some of these things have been around for a couple updates, but they're still relatively new. So I type map control and I'm getting this quickly because I'm missing that namespace reference. When I first started XAML development and I was just learning, oftentimes I would refer to websites or sources and I would add in a control and it wouldn't work and I wouldn't know why. For those of you that know why it's because of the missing namespace, we have a control.experience or the light bulb experience to go in and just add missing namespaces automatically. So here you can see, I put the map in the top left, I don't wanna do that. So let me put it in the right row. In this case, I'm gonna put it in row one, column one, and I'm gonna make it span across two rows. One thing you'll notice because this isn't a first party control or it's not super popular on GitHub, you don't get the IntelliCode suggestions. We can only make those suggestions on data that we know about and this is the one that we don't have that data. So no stars for stuff like this. But I will give this a name, I'll call it geo map so you don't get it confused with like the object type map and then I will go back into my click event handler. And ultimately what I wanna do is I want to figure out the location. So the way I'm gonna code is I'm gonna just use the Visual Studio tooling to look at the properties and the methods so that I can figure out how to write this. You could also just go to the documentation which is surprisingly great for this toolkit, it's really, really good and they show you exactly when it's going to work, how it's going to work, all of the properties, all of the methods and what they do. So if I go back, I can hit my dot, filter to just methods and I'm probably gonna wanna set the view or something like that. I'll just sort to set. So I see a couple of different methods, try set view async sounds about right and that takes in a geo point object that they call center and I can also give it a double zoom level. So I'm gonna work backwards, I know the objects I need, I need a geo point and I need a double. So I'm gonna comment that out for now. Using a keyboard shortcut for those of you that don't know, control K, control C, comments out a single line of code and then I need a geo point. So geo point and again, I can use control dot. So I'm trying to create a geo point object. I don't have the reference but the visual studio can get that for me and I'll give it a name geo point equals new geo point and this has a constructor that takes in a geo position. So again, working backwards, I can get my basic geo position. Again, I'll use the recommended name equals new basic geo position and this does not have a constructor but it does have a couple properties. So I'm gonna just go ahead and use C sharp to create those properties in line. So latitude is going to be equal to, I've got my lat box, don't forget that I created earlier. And again, I have in telecode and C sharp. So I think one of the, this might be an obvious example when you're trying to call an object that is a text block or text box, sorry. The first thing that shows up as text totally makes sense. But this is actually a double. If I hover over it, I can see this is a double field. So I need to do convert dot to double and then I need the same for longitude equals converts dot to double and then long box dot again, text. And then last one at least. So now I have my geo position. I can construct my geo point just like I can comment out with a keyboard shortcut. I can also uncomment with control K, control you. Can you do me a favor real quick? Can you increase the font size there to about 16 point? Is that better? Yeah, that works. So I've got my basic geo position objects. I've got my new geo points. I can create that. Last but not least, I can try to set the view of my map based off that data. So let me go ahead and make that geo points and then I'll zoom into a zoom level of about 14. And now why would you choose 14? Where'd that number come from? So I came from here. You've done this before. You've seen the example. Even in the docs, they kind of give you a hint. So when you see the tricep view async that they use, they use 12 and that gets you to about this zoom level. That's also in the documentation. And I want to go a little bit more zoomed in than that. Okay, so 12 is like at the city level. Yes. Gotcha. Yeah, that's about right. And we're going to go, you're going to see exactly where we are in the channel nine studios when I run this application. So I'm going to try to run the application. There's a comment unrelated to this. Well, Visual Studio changed the keyboard shortcut for commenting to match that of VS Code. I thought VS Code uses the same keyboard shortcuts on Windows for commenting and uncommenting. Well, it's all customizable too. So I'm actually not sure. I've never paid attention to that detail. But if it's not matching today by default, when you install both, I would be a little bit surprised, but it doesn't mean it's not true. So I am f5ing the application and. You're f5ing. You're starting it. You're starting it in debug mode. Yes. And I have an exception. And this is by design. I want to make a point there. So one of the things that you need to host XAML Island content is a package identity. And what that does, again, we're getting more technical here. So for those of you who really want to know the details of why, one of the things Windows 10 does is it can change the behavior of your application based off of some of the properties in the package manifest or the identity of that application. And this is so that if you test your application on a version of Windows, there's an update of Windows that might change the behavior. Well, because there's a max version tested property of your application, your application will behave just as you expected. So fortunately, one of the other new things in Visual Studio from Visual Studio 2017 is a new project template called the Windows Application Packaging Project.  So if you just think of like the Windows 10 packaging concept, that's what you get. So I can see Windows Application Packaging Project. I'll call this package. And then it gives you the option to set your target version and your minimum version. I can just leave the defaults. This is an insider preview SDK. So it's again, bleeding edge. And now what I'm going to do is just change the context of how my application is going to run. Now, if I'm building this and I'm not using an insider build of Windows 10, I don't need to go into some of that depth, right? Do I need to set that? So for the XAML Islands controls, you will need a Windows Application Packaging Project. Okay. And what that does, it gives you other things too, especially when you think about the DevOps talk at the end of today, you'll see some of the value of using the Windows packaging concepts. We can do automatic incremental behind the scenes updates for your applications, which is really cool. Okay, so it's the only reason that you had to choose an insider's build is because on your machine, you're using an insider's build of Windows 10. XAML Islands, some of the features in XAML Islands are still preview. The features are coming up and they'll be released. So like this is bleeding edge stuff. So you need it for the island. Very cool, okay. So now I changed my startup project to be the package and all that's going to do is make it run with the Windows package context. And so you'll see a slightly different taskbar icon and things like that. All of those are configurable by editing the package at the Xmanifest, but this is XAML Talk, so we're not gonna go there yet. And once this runs, I think this computer running Skype and PowerPoint and DS and all sorts of stuff is. Run all the things. Yep, but it should be just about done. And so now what I can do is, there it's loading. So while this is loading, just to respond to the chat room, there's been some talk about XAML Studio and what I would say is we build that project. There's an experimental project here at Microsoft. It's not built by the primary tools team that Daniel and I work on. So we were very transparent about things like this to say that Microsoft has a lot of people coming up with a lot of cool things. And if you really think that XAML Studio is really solving a particular problem for you, please let us know. That's what we're here to hear about. And we hope to take good things and bring into future products. We just can't obviously guarantee anything, but XAML Studio as a thing is not, a primary tool that we work on. So we really would love to extract the things that work there really well and bring you to the real products. The real developers are using Visual Studio and Blend to keep that coming. So here you can see now I have my map. This is the Windows 10 built-in platform map control. And this is new. So this is something that is kind of coming up that you'll be able to do. And it's really just that simple for a certain set of controls that we're building. So let's go ahead. I think it's important to kind of note why that's so special, right? We've had a map control in the past. The point is that we're bringing some of the UWP controls, including giving you a lot more flexibility which ones you can use back to WinForm and for WPF developers. There's a question that I can address immediately as well in the chat. Is it possible to remove this black bar? Demetri is gonna go into details about the functionality of that. But yes, if you select this button here in the top left in the live visual tree pane, that black bar goes away. So I've entered in a longitude and a latitude. Let's see if the application works. So I'm gonna search. It's zooming, it's zooming. And there we go. So this is actually where we are right now hosting this live stream content. And just for some fun today, I've got one other coordinate because it's a special day. At least we're celebrating here in the U.S. Don't tell me you're finding my house. Don't tell me you're finding my house. We would never do that. We would never show your house. Maybe your state. Maybe. This is the middle of New Mexico, Pytown. I just looked this up before the stream though, so maybe not. It's still rendering. Yes, it is still rendering. There we go. Let's zoom in on it. Let's see if it says Pytown for Pytown. Drum roll. There we go. Yeah. So happy Pytown and there's our Where's Windows Dev Day, pretty simple. There we go, look at that. Pytown with Pytown, nice. Some of the tools to get up and running quickly to style your UI, to build the simple layout, things like that. And now I'm gonna hand it over to Demetri to show you some more advanced tools for really diagnosing and troubleshooting those tricky issues. All right, so I'm gonna go ahead and share my screen with you guys. Hopefully you can see it. There we go, we got it. Awesome. All right, so let's talk about some more tools in Visual Studio. So I'm gonna go ahead and introduce an app that I'm gonna use as my demonstration. This app is open source, so everything you see me touch today will be available. The link is already kind of in the show notes, so make sure that's easy for folks to find. So this is an MSIX catalog app. One of my teammates built it because he wanted a tool that could easily demonstrate some of the things we were working on, quite frankly, so this tool is used for us internally by the team to test certain things we were working on. But it's also a cool tool that lets you see all the side loaded applications, all the ones that are installed under developer mode, all the ones installed by framework. So it's a great little app. Let's see the manifest, let's you open the folder where you can find the application itself, things that are actually not super easy to do on Windows. So it's a cool little application. And I'm gonna use this to basically demo all the things I wanna show today. So let me just interrupt you just to make sure everybody's on the same page. An MSIX, right, an MSIX, that's the application package distribution format. Yes, yes, that is the way, one of the ways you can install things on Windows and this application lets you see various things that were installed using MSIX or... There it comes, there we go. Okay, all right, let's hope this stays stable. There we are, all right. All right, awesome. So I'm just gonna have to point my laptop at the microphone. I mean, the camera is gonna be really awkward. Yeah. All right, so let's talk about the tooling inside of Visual Studio for working with XAML. I'm gonna take you folks on a little bit of a journey through the various tools that we have built and hopefully show you something that you've never seen before or maybe show you a part of a feature that you've never seen before on one of these panels. So I'm gonna start with the very, very basic thing. When you open a XAML page, so let me go ahead and open, let's say, main page that XAML. Doesn't really matter what this XAML page even does, I just wanna demonstrate what the tool does in regards to this page.  One of the things that I wanna point out is this app, if I didn't change the background color of my designer, wouldn't have been super great. So I wanna point out the stuff that is customizable. Like if you are seeing that your app is not rendering super well in the preview of the designer, because of the theme of Visual Studio you selected, I like the dark theme and that was causing me some problems. You can actually go ahead and change that in settings. Pretty simple to go ahead and do. So if you really want the hot dog theme for your application, you can do that and you can adjust the way Visual Studio presents it so that it's visible. Yes, yes, there you go. Because sometimes, while you're in dev mode, it's something that could be a little more painful than the real app itself. So just wanted to point that out. So coming back here, I wanna point out a tool that we've had for quite a while called the document outline. This is this window here on the left. This tool actually lets you see how your XAML is put together in a hierarchical view. So you can go ahead and expand, let's say, the stack panel and see what's hosted inside the stack panel. In this case, this right here MSIX catalog, this icon, this is all part of the stack panel. So if you're new to XAML and you're looking at some sample app where you're working with a complex application, sometimes it's just really useful to be able to jump in here and see how it's composed from kind of visual hierarchical view. But you can also do some other cool stuff. People don't realize, I say people don't realize only because I've talked to customers, I've asked them questions and they didn't realize this feature was here. So one of the features is this hide icon. If you click the little I, you can actually make things go away. Now this is not changing your code at runtime. If you run the app, these things will still be visible, but if you're just kind of designing, that's really cool because you can preview what it would look like if something was or wasn't visible. You can also do something that some folks don't realize inside of designers as well, which is you can hide the grid or you can show the grid. Some people think that the grid's only available, for example, inside of Blend, but it's actually available here as well.  Coming back to the document outline though, it is another cool feature, which is the lock. So you can lock an element. So let's go ahead and lock this icon. That means that I can drag other things around it. So I can actually go ahead and make other changes. See they're kind of draggable, but this is not going to be draggable. This is going to be locked. So this lets you lock sometimes a very fine element when they're really close together so that you don't accidentally drag the wrong thing around. And it's just a little useful tool to know about. And you can really easily see how the page is composed. In fact, in preparing for this demonstration, we're working with this app, actually found a bug by using the document outline. So I was looking at the document outline and I was clicking around and then I clicked over here. And I realized that this stack panel had three text blocks. So that made me go to XAML and I took a look at this and I said, okay, well, in my opinion, and there's more than one way to get this done, but in my opinion, this isn't the best way to do it. You should use one text blocks with three runs inside of it to make this composed a little bit cleaner. So I'm going to save you folks the typing, but basically I went ahead and I created that XAML to replace it. And I was able to go ahead easily come in here and change that out. And now there's one text block, three runs. This is a bit cleaner. In my opinion, it lets you control things better. So there you go. This tool can already help you find something by inspecting things in a hierarchy versus just sometimes looking at a lot of XAML which can get a bit confusing. And there's one question from the chat. Can you reorder them by drag and drop if you want to try to do that and then undo it real quick just to show you. Yes, you can. There you go. You can definitely do that. This is a place where you can see what something is named. Like if you give it a next name, you can see that. You can see what type of control it is. You can move things around. You can make them hidden, unhidden. And sometimes you can find a bug. So it's a really useful tool. This is the visual in visual studio. Yeah, this is all visual studio and the document outline is there for you as you're building your XAML. When you run your app though, the document outline is read only. So you cannot interact with it while your app is running. But we're going to show you other tools that you can use. So let's go ahead and start the application and talk about the end-to-end experience of debugging your running app. Because I find that a lot of folks don't realize we have some really great capabilities here. And all of this is available in VS 2017 and even before. So definitely should be available. If you don't see the window, just go into the quick search at the top. VS has a little quick search thing and you can type document outline and there you go. There's a document outline control. All T I guess is the default keyboard shortcut. All right, so the app runs. We have inside of the app something that we put automatically there. This is there for WPF and UWP. This is this bar right here at the top, this collapsible bar. You can click to collapse it or to not collapse it. You can't move it unfortunately, but it's always here at the top of the application.  Really awesome ones. I'm going to show them in a second. But first let me once again answer the question that was asked before. What if you don't want to see it? Two ways you can get rid of it. You can actually go into settings and turn this off. I don't fully recommend that because turning it off means if you ever do need it to debug something, it won't be there for you. You'll have to stop Visual Studio from running the app, go enable it and go use it again. So that's not a great experience. But what you can do is click this button here in the visual, live visual tree. But let's assume that you don't even have a live visual tree. There you go. I collapsed it. You don't know what a live visual tree is. You don't understand how it's connected. Let me explain all of that. There's a button inside of this in app toolbar again, the app bar right here at the top. If you click on this, it actually opens the live visual tree. Just to show exactly what happened here, I clicked this button right here and it opened up this panel right here. You can also, once again, use the quick search at the top to type live visual, so there you go, live visual tree. So you can open it that way as well. But just wanted to point out that this is a really nifty shortcut to get this thing open. Once it's open, as in once the live visual tree is open, you can click this very first button called show runtime tools in application.  I have had to do that for real applications because sometimes it's not useful for me to have this is blocking something I'm actually trying to look at in the app. So there you have it. So I'm going to turn it back on and I'm going to show you the first feature that I want to kind of demonstrate, which is right here, it's called enable selection is the second button in. Hang on Demetri before you get too much further here. You've been using Visual Studio 2019 to show some of the features here. Yes. Are the features you've been showing, are they exclusive to Visual Studio 2019 or some of these also work in Visual Studio 2017? So this works in 2017, 2018 and 2019. We are actively working in some of these. So if you get into the latest version of VS and stay there with all the updates that are going to come out throughout the year, you're going to have the best experience, but a lot of the things I'm showing here have been in VS since like VS 2016 actually or even before that in 2015. 2015 with the updates. Got it. Yeah, so it's been quite a long journey. Try it if you don't see it there. Well, it might be in the future version that you're not using. You can install VS and give that a try to see if the features there. You can ask us questions on Twitter over here to help you. Yeah, Brian's asking about Visual Studio 2018. No, there was no Visual Studio 2018, just 2017's patches. Yeah, I always think about VS 2018 as VS 2017 with a lot of patches on it. So I'm just as confused as everybody else, but there you have it. It's all out there. All right, so now I'm going to show some features. We only have less than 10 minutes. I want to try to get to at least a few of the things here. So one of the really cool features is this enable selection button. When you click this button and you start moving around your applications, it actually lets you highlight different elements that are in your running apps. So in this case, if I click on that MSX catalog, it will actually expand the live visual tree in the left if folks noticed what happened there. So Jeff, we're going to need you to maybe vanish. Come on, poof. Seriously, I got to get out of here.  Come on, man. Love you, man. Oh, God, all right. So let me show that one more time. I'm going to unclick it so it goes back to where it was. I'm going to click it again and click on MSX and show how that expanded. The reason why we needed Jeff to move was because he was right there covering the button that I wanted to press. So you see this text block here? If I click on the little button next to the text block, it will actually take me to where in your XAML, the code is defined. It's a really great way to do that. So I'm going to do something first. This will just help me because of my resolution and because of the screen. So I'm going to go to my solution. I'm going to go to main page.xaml. And I'm going to make my app topmost. This will enable me to still have it visible while I'm making XAML changes because that will be important. So I'm going to set topmost to true. This forces my app. There you go. My app just appeared. This forces it to be always on top. So let's do this. We're going to move the app slightly to the bottom and we're going to go for this example. Again, we're going to click on here. We're going to click on here. So now we're actually looking at the XAML. My app is running. There's my app. You can see it. But you can see also the XAML that's making MSX catalog, say MSX catalog. But then I can do this. And in real time, it will update the UI to add whatever I'm typing. This is something that we have in the past called XAML editing continue. We don't think that was the best decision necessarily. In retrospect, a lot of things are clear. So we're going to call it going forward XAML hard reload because that's really what it is. It allows you to change the XAML while your app is running. This works with WPF and UWP. And there are a few small things that don't work for WPF that we are going to include in future releases. Hopefully we're doing our best. We're working on making this even better. So XAML hard reload is a feature that basically says that as long as your app is running and as long as you attach by hitting F5 because you can't, this doesn't work if you like attach debugger later. But if you hit a five, your app is running, you see the in-app toolbar, that's a good sign that means most likely this feature will work, then XAML hard reload is going to start working. So I'm going to show you another feature that's part of the family of the tools.  I'm going to go in and I'm actually going to look at something deeper. So let's go click on framework. Hey, Demetri, there's a comment here. I think it's a pretty good one about the reload, the hot reload feature. That's not hot reload. Jerome says that's live editing. It is live editing. So we spent a lot of time thinking about how to name this feature well. And we came to this because if you look at what people are defining as hard reload and other frameworks, this matches quite a bit and why create another way of talking about something if a developer from another space comes in and they look at the feature and it looks like something that they're familiar with. So we're just trying to bring familiarity at the end of the day. Police talk about it however you want. It's really does live editing, 100%. That's true. It's a hot reload feature. That's just what we're calling it. I don't want to get too caught up on the name, but it's really good feedback. If folks really hate the name, we can always change it. We're pretty agile around here. Naming is hard. Yes, naming is hard. But if you think about all the other UI frameworks out there, everyone has a hot reload. So it's kind of a familiar experience to developers and we don't want to be the odd one out from a developer experience standpoint. It's similar. You're right. It's better in that it is live, but it also serves a similar purpose. Yeah. So let's go ahead and look at a few more things here. So in this case, I'm going to show you yet the third panel that is in Visual Studio. It's really cool. This panel allows you to do something unique. So let's work for what we did so far. We use the- I'll disappear again for you, Dmitry. Go away. We love you, Jeff. First, we use the enough tool bar to select an element. We showed you that. We showed you how the live visual tree shows you the tree that the element is part of. It lets you find the code where that code is defined for the element and we change the element and we got the app to change with hot reload. So we showed that end to end. But that's sometimes not the experience you actually want. Sometimes you want to experiment and sometimes you want to experiment with a comparison. This is a scenario that's come up many times in the real world for me. And unfortunately, sometimes it's hard to demo these things, but I can assure you I've been a XAML developer for a long time. This really is a useful feature and that's to change something temporarily and very specifically. So in this case, as you can see, there's three icons. All the icons are generated by the same styles. In other words, any changes I make to XAML are going to change all of these icons. But what if I want to experiment and I want to compare icon one to icon two to see how to make this a little bit better? So what I can do is- A little AB testing there between the two. There you go, AB testing. So you can click on this icon. I can then click inside of my live visual tree and then I can go up here to this button called show properties. Now this is not going to show the normal property view. This is actually going to show something called the live property explorer. This is a way to make changes that are completely temporary. It doesn't apply to XAML.  If you just reload the view, it'll go away. In other words, it's really temporary but it lets you experiment with how to make something better. So in this case, I'm thinking, man, this button seems a little bit too much close to the borders on both sides. It's maybe cutting off some of the icons and some of the cases. So sorry, some of this is just me moving the app around so that I can show you everything that I want to show you. So let's make that slightly smaller. All right, so I'm going to go ahead again, click on the button and now I'm looking at the live visual tree. So visual tree showing me that this button is actually composed in code. So things above grid don't have the icon next to them because this is just part of items control, things that you didn't write. But starting from grid is code you've written. So if you click on grid and you click on the button, you will actually go to the grid that defines it. And in this case, I can already spot a problem and I'm going to go ahead and change that for everything because I realized right away when I was testing this earlier that this should have been a bit better. So we're going to make this slightly bigger and I like to be pretty verbose even though this is the default. So I'm just going to be verbose that the right side of this right column here should take up the rest of the space but the left should have a little more space. So that's already great. But now I'm going to play with the icon specifically. So I'm going to click back in, click on the first icon and now I'm going to look at the border and this is where I'm actually not sure what changes to make. So I can go ahead and explore. I can say, well, what happens if the border was like half or really small? Okay, that's not going to work. What if it was bigger? Okay, that's maybe something interesting. What if I added a margin to it? Actually, margin is here.  All right, so you can see how this button is now starting to change and it's different than the next button down. So we're running out of time. So I don't want to be kind of be this point. I already messaged Brian that we're running a few minutes late. So we don't need to rush too much. Awesome, but I do have an after. So this was me writing the code in using this tool to experiment. Once I was done experimenting, I knew the final values I wanted and I went ahead and I implemented this as my final implementation. So this set of tools allowed me to kind of go throughout the whole app, go from where is this visual inside of my tree? Where is this element from the tree inside of my code? Can I experiment? Can I make changes to the XAML? So you can go ahead and use these tools to really go all over the place. So that's kind of cool. Another thing that we can do with hard reload is not just fixed bugs, but we can add features. So this is probably the last thing I'm going to show. So I'm going to go ahead and make some changes. So once again, to save a bunch of typing, I've made some handy clip nodes here. I'm going to go ahead into my view model and I'm going to go into package view model. And this is using an MVVM light pattern. So inside of my view model, and I had to stop my app to really do this super effectively. We're looking at that too, but it's harder. So we've got some fields that we need to add in order to add another feature to the application. So I wanted to add a feature to copy the clipboard. So I'm going to go ahead and populate parts of this MVVM view model with all the code that's necessary to make this work. So I'm going to go ahead and add this and add that. And this is not part of the main demos. Don't worry about it. There you go. I basically added the code that will now make it work. I'm just going to fix the using statements, which is the last thing. And I'm actually going to commit these changes if you can believe it or not to the real app. So we're making real improvements here. All right, so what did I do in recap? I added the command. This command can be bind to from the XAML. This is the clean way in MVVM to build this kind of application. I instantiated the command and set up my constructor and I provided a method that actually is some very basic code that use a string builder to build a string and then allows you to copy the string to the clipboard. So I'm going to go ahead and run my application now that my view model is in place.  So as soon as the app runs, we're going to see that even though I've added all this code to the view model, this code is not actionable. There's nothing in here. So let's click on some random view here. Nothing in here allows me to copy the clipboard yet. So how would I do this now that I realized that this Visual Studio tooling experience allows you XAML hard reload. I could do this. I could stop the app and I could make changes. But I can actually make these changes in real time. I do not have to stop the app. That's a really cool thing. So I'm going to go back in here and in fact, I'm going to let's use the tools, right? I'm going to click on this. I'm going to click on open folder and I'm going to think about, all right, so where is this open folder code? Okay, so it's right here. So I was able to find out where the button was, find out where it was in the tree, find the code behind it. And now I see what style composes these three buttons. So now I'm going to go ahead and I'm going to copy one of these buttons. Yeah, I think you can use Control-D to duplicate the line immediately below. Oh, there you go. Something new. Sure, so copy to clipboard. So you're getting that same hot reloading of your XAML code, the code that's doing the layout, the user interface, the design that Daniel was showing us earlier and it's going to still use the same C-sharp code that you've built and is compiled. Yes, exactly. We can't change the C-sharp on the fly but we can change the XAML on the fly. Yeah, you can pause, you can hit pause right here and you could change some C-sharp. But when you're creating a brand new view model, you're making substantial changes. You do have to stop today. That is the one limitation. But once you're done with that, a lot of my real world work in the past has been then tweaking the UI to get the view model to show up. Like it's easy to pull data from a database. It's really hard sometimes to make the UI represent that data beautifully in my application. XAML hot reload is what makes this possible. So let's go back in here. I made a copy of the button so it's still not doing what I want. It still has the wrong command binding. So I'm going to go into the command binding and I'm going to say using IntelliSense. We can move this down a little bit. So IntelliSense, look at that. It says copy to clipboard, which is what I added early as a command. So the view model binding is working. And now we have a button that says copy. So I'm going to disable the hot selection. So enable selections off now and now I can interact with the app. I'm going to hit copy and I'm going to start notepad. And in notepad I'm going to be able to paste. So there you go. We've created a full UI. I mean, this was a really, really simple example, but you can imagine how complicated this could have been. So this shows you the power of hot reload and the ability to keep editing and we're looking for all the feedback you can give us on making this feature even better. Another thing we were going to demonstrate but I want to give Brian the time that he needs was LiveShare. So we purposefully left some bugs in here and Daniel was going to join me on LiveShare and fix them. LiveShare does work more or less. We have one limitation today where if I use LiveShare and navigate to a class file that works, Daniel sees me navigating to it or opens for him. If I navigate to a XAML file that doesn't work, but we're going to see if maybe we can make improvements to that. So we know about this limitation. We're working on it. But no matter which file I was in, if Daniel did open it, he could see my cursor, he could do a code review and he could have helped me fix the fact that my tooltip was wrong and the fact that my copy had a duplicate on one of the lines, you know, little phone bugs we added but there you have it. The all the stuff is super possible. For the sake of time, I added the LiveShare documentation in the chat. So definitely go take a look. It's pretty awesome. All right, so with that, Jeff, I'd love to give Brian all the time that he needs. He has a really great session and folks, we're so thankful that you're here with me and Daniel this morning kicking off the event. Please stay on the whole day if you can or jump back in or come back and watch live on demand. All this stuff is going to be available for you. We're excited about desktop development. We hope you're also excited about desktop development and if there's anything that we can make better for you, please let us know how it's affecting your real world working with the certifications. I'm also going to add our Twitter handles in the chat as well. So you have again a direct line to us. Ultimately, as Jeff alluded to earlier on, this is about community and building community. And we definitely want you to be a part of our community as we build up the .NET Core platform, the new tools, all of that. Very cool stuff. Thanks so much guys. That was a great way to start and show the basics of what the tools are capable of. Yeah, you needed to learn a little bit of XAML to really get in and know what's going on here. But to see what it's capable of, even simple samples like we saw and how quickly you can build an application that does mapping and zooming in on things. Really neat stuff. Thanks so much for sharing. Great to be here. All right, I'm going to, where did it go? There it is. All right, now we got it back. All right, oh my gosh. You can read, sorry about that. My apologies. Let's get Brian on the phone here and see if we can start working with him. Hey, there's Brian. And we should get my video coming back to you. No, of course it's not going to right away. How's it going, Brian? Let me bring up the, let me bring up the, that's not right. It's still the other one. Hang on, hang on. I'm running a little slow. There we go. I've done this before. Thanks so much for joining us today. And let's put up some name plates so folks know who we are. There we go. Hey, Brian, how's it going? It's going, I'm not seeing you. I know, I don't know what happened there.  I'm gone. It's all blacked out there. I'll see what I can do to get that to come back here. Thanks so much for joining us and you work on, well, why don't you give folks an introduction, who you are, what you work on, where you're from? Yeah, well, my name's Brian Lagunas and I'm known as the Prism Guy, if you will. I work out of a, my home office here in Boise, Idaho. Are my audio levels okay? I'm looking at the chat here and it says, something about audio. Yeah, I'm bringing up your audio level right now. You know, I'm using my little, my headset here, but I can switch to my big mic if I need to. I was trying to keep it easy so I can walk around, but no, no, you're good, you're good. All right, sweet. But yeah, so I work out of my home office in Boise, Idaho, and I work for a company called Infragistics. We're a control UI vendor and we create all kinds of kick-ass controls for just about every platform you could imagine. So if you're looking for some UI controls, of course I would highly recommend looking at Infragistics. But yeah, but today I'm looking at showing off some prism stuff. Okay, terrific. Now, what is prism? We touched on it briefly when we did the rundown at the top here. What would you say prism is? Yeah, actually, prism's kind of morphed as definition. Historically, prism's never been really an MVVM framework. It's always had this reputation for being this real big, heavy MVVM framework. Well, technically, prism for WPF doesn't really care if you use MVVM or not. I will always recommend you use it, and every code sample I show will use it, but you don't have to use it. But I mean, you know what, we'll say, just we're not gonna play the semantic game. We'll say, sure, it's an MVVM framework, but essentially it's an architectural framework that provides guidance on how to build modular, loosely coupled applications. Basically, it shows you how to use patterns that you should really be using anyways and really helps you enforce those patterns more consistently. Okay, so we fall into that pit of success. We get a better maintainable application. Exactly, it's all about guiding you down a path to success. It doesn't mean you can't write some really, you know, not so great code, but it's a lot harder to do in a prism map because it really sets you up for success. Cool. Do you wanna share your screen so we can take a look at some code? Yeah, sure. I think it should be this one. Let me know if you see that. Yeah, there we go. All right, let's go over to your screen. There we go. Should be Visual Studio, right? Oh yeah, we can see it up there. And actually it's cut off a little bit. I'll fix the trim there, but go ahead. All right, so yeah, so I just saw a comment. Just now, it's overkill for smaller projects but great for large ones. That's another myth. That's a huge myth. Okay. Prism is great for any size project and as we start kind of playing around in here, you'll see that you can use it for anything. It just makes development easier. It'll get to a point where you won't be able to tell the difference between what's prism and what's WPF. It's gonna be so natural to me. Okay, and when you say that, that makes me think the line that's blurred between ASPNet and MVC. Exactly, you've got this very popular pattern but it's kind of baked into ASP.net now. So you really like, where's that line of separation? Okay, cool. So what do you wanna show us today about prism? Well, we're gonna start from File New and we're just gonna kind of make it organic. We'll just talk and we'll just write some code. I don't have anything planned. So I just figured we'd have more fun with it. This is Twitch. We're doing live coding friends, look out. Stand back. So I do wanna note, I am using the preview. We will be using .NET Core 3. So, as with any preview, don't be surprised if we get some type of bug or something that pops up but I am using the latest and greatest. And I will also mention if we are using ASP, ASP, you got me on ASP. .NET Core 3, you have to use Visual Studio 2019 preview or RC. So you can't use this in 2017 for this demo. Okay. Okay, so first I wanna start off, the biggest questions I get about .NET Core 3 in general, not even prism is, man, what's the big benefit about it? Well, one thing I like the most about it, I'm gonna go ahead and open up a .NET Framework application here and I'm just gonna unload this .NET Framework project and I'm gonna show you the project file and this is just for file new, right? That's crazy. Oh my gosh, yeah, right? As somebody who has to maintain source code and you're looking at that, there's a lot of chances for stupid collisions when I'm trying to merge and manage things and I'm accidentally overwriting something. Oh yeah, adding projects and references and oh my God, it's a nightmare. However, I'm just gonna close this because I don't wanna look at that mess again. I actually threw up in my mouth a little bit. Oh, let's go ahead and create a new .NET Core 3 prism app and I'll show you the difference.  This is gonna get you set up to create new projects, new items, this is gonna have project templates, item templates, code snippets, just to help you be a little more productive in creating any type of prism application. Okay, so let's go ahead and create a new .NET Core 3 prism app by saying new project. We're gonna get the new dialogue experience which I personally am not a fan of but since I know what I'm looking for, I'm just gonna search for prism and I'm gonna see this prism blank app .NET Core 3. Okay, so I'm just gonna hit next. Sheryl, I don't care what it's called and we're gonna create this. Now the first thing we're gonna see is that we are prompted with a wizard called select your container. Oh man, what the heck is this Brian? What's a container? So one of the patterns that prism enforces is basically inversion of control, okay?  I'm not gonna create it. I'm gonna let something else create it and give those dependencies to me. That's all it says. There's many ways to create those dependencies and in this case, I'm gonna use what's called a container, a dependency injection container. Oh, I know about this from ASP.NET. We've seen it over there. If we're web developers. Exactly. And so out of the box we have Unity, dry IOC and actually AutoFax is gonna go away because it's now a immutable container and that's not supported anymore. But I'm just gonna pick dry OC. I used to use Unity but Unity has some breaking changes that I haven't fixed yet. So I'm gonna use dry IOC. And it really doesn't matter what container you use. As you'll see, there's some abstractions around containers where you really won't know what you're using. Okay, so here is a blank prism application file new. Now let's just start. I wanna show this comparison on the project file. So we're just gonna hit edit. All right, hang on. Let me hide my, wait a sec. I didn't have to hide my screen. My camera there. You don't have to hide anything. That's it. All right, hang on. Can you zoom in a little bit there? I don't think we can actually write it. We need at least a font size 16. That's too small. That can't be all of this. That's it. That's all it takes. That's including my NuGet package reference here. Okay, so, hang on, hang on. This is, it says Windows desktop. Is that a Windows Forms application? This is a WPF application. The Windows desktop is SDK for .NET Core 3 we're using to provide all the tooling and the building for actually creating this project. Okay, so if I wasn't using the prism dry IOC package, I wouldn't even have that, those lines eight through 10. No, it would look more like, oh, the great Control-X dialogue. But yeah, it would look like that. Technically, you see this is simply named? Technically, that's not even needed. So it would really be this. Wow, okay. I'm a little more verbose in my templates. So, but that's it. That's one of my favorite parts. Like you said, with get and merge conflicts and just adding new projects and new references and like this is, it's a no-brainer. Okay, all right. All right, so because this is a preview, the first thing we're gonna wanna do is update our NuGet packages. And I'm going to use the my get feed for prism. So prism provides a my get feed for our CI builds. My get is that private location where you can manage things outside of the public NuGet repository. Yes, exactly. It's like NuGet, but it's not. It just allows us to, you know, ship more continuously without cluttering our NuGet list on the actual NuGet site. So we have our prism.dryoC, we're at .639 and I need to upgrade to 1137. So I'm gonna go ahead and update that real quick. Yeah, that's fine. Yeah, I guess we'll accept some licenses. Does anybody read those? Yeah. What, you don't? Never. Okay, so we should be good. I'm gonna build right quick just to make sure, because you never know, because what happens is when prism, when prism's nightly build kicks off, we actually grab the latest version of the .NET Core 3 preview SDK and compile against that. So you never know what's gonna break. And then I'm gonna run the app just to verify we're all working before we start typing any code. And what monitor is this gonna launch on? I've got like four monitors, I'm looking for it. Oh, there it is. I'll drag it over here. Okay, so our app runs, we can safely start coding. Now I do wanna mention, if you're curious in getting started with .NET Core 3, getting everything set up, go to my YouTube channel, youtube.com slash Brian Lagunas. If you scroll down towards the bottom, I have a ton of videos on .NET Core 3, most of them are about breaking changes. It's the very first one is hey, this is how it used to work, but things change, you know, that was done four months ago, but things change every day. And now you get to the point where, oh, it doesn't even work in Visual Studio 2019. So if you're curious about that, go ahead and check out those videos. All right, so let's go ahead. I've shared a link to those videos in the chat room for anybody who's looking for it. Perfect. Okay, so let's go ahead and see kind of what the difference is out of the box WPF in a Prism app. First, we'll start by looking at the app class itself. Now, we'll take a quick look at the XAML. The XAML will derive from a Prism application instead of WPF application. Okay, and you'll also notice there's no startup URI here. We don't do that in Prism, okay? So when we hop into our code behind, we'll have two methods here. These are abstract methods.  One is create shell and the other is register types. First, let's talk about create shell. Create shell is where you're going to resolve an instance of your, we call this shell, but it's like the host of your application, right? It's like a master page, if you will. It's basically gonna contain the area of the app where you're gonna start just throwing stuff in, okay? In this case, we have a class called main window and you'll see that I'm not returning, I'm not saying like return new main window, right? I'm not doing that. I'm saying return container.resolve main window. Now, the reason I'm doing that is because I want to use our dependency injection container to resolve our objects. Everything we create, I wanna use the container because if we have to add any type of dependency to this class, we'll get injected automatically and we'll see how that works. It's actually pretty freaking cool. Okay, the next method is called register types. Because we're using a container, we have to register various objects, classes or views or whatever with the container so it knows how to resolve them or create them for you. We'll see how this works later, we'll come back to this. Okay, next, we have a main window and a main window view model. Now, let's talk a little bit about MVVM because Prism does MVVM differently than you would expect or that you've probably seen in any other framework. And in honor of Pi Day, because I've been watching my Twitter feed and everyone's doing this Pi stuff, I have to provide a Pi, okay? So, my Pi is showing off, does that use MVVM, the percentage of people who complicate it versus the percentage of people who keep it simple? Yeah. And you can guess who keeps it simple, right? Prism users, they keep it simple, right? Everyone else just complicate it. That's a joke. Don't take that seriously, please. Thank you, thank you. Yeah, yeah, very good. Okay, so our main window, I'm actually gonna, I don't wanna talk about regions just yet, we'll get to that. Our main window is acting as our host, right? So in our at.zaml.cs, we said, yeah, this is gonna act as our shell, perfect. So we know that the main window is our host that's gonna host our application. It also has a view model, but if you look at our XAML, you'll see no instance of a data context. And if you jump into the code behind of the main window, there's no data context. Yeah. So how in the heck is that getting set? Well, if you look right here on this line, line five, we are using an attached property called view model locator. And we say view model locator, auto wire view model equals true. Now what this does is it uses a naming convention. And this convention says, take the name of your view that has to be in a views namespace and then look in a view model's namespace for a class with the view name plus view model. Once you find that, create an instance of it and boom, you're done. And so it will go and resolve that, automatically set the binding context and you're ready to go. That simple. Now this is different than most of view model locators you are probably expecting. Like I'm just gonna jump into the code behind here. A lot of times what you see is you'll have some type of like static class, right? View model locator. And in here, you'll have a property. What's the, I think it's just prop, is it? Yeah, it's prop. You'll have a prop. Oh yeah, the snooker. The VM, you know, and it's my VM.  Then you go into your main XAML and then you set the context to an instance of that static member. And that's just, not only is that a ton of work, not only are you breaking so many development rules out there, the open close principles, one that comes to mind. But that's just a ton of work and I'm pretty lazy. If you see my shirt here, it says code like a boss. It's because I'm lazy. I like to keep things simple. Can you do me a favor? Can you push up the font size there to about 16? Yeah, you want me to just zoom in or do you want me to? Nah, we're gonna need to get it in the other windows also. All right, let's go options, fonts, and we'll go 16. How's that? Yeah, there we go. It's a little bit harder to see when you're on Twitch. Oh, okay. All right, so now that we know how the view model's being set, and I think I mentioned that we do use the container to resolve this view model and that's gonna be important later on. Let's talk about a little bit about commanding. How about commanding? Cause that's another popular thing we do in view models, right? So I'm gonna have to add some stuff here. Let's do a grid. I think we need some row definitions. And then let's throw a button in the first one. And how about a, I don't know, a checkbox? So let's start with commanding. I'm gonna go into my view model here. And a lot of times you have, everyone knows I'm assuming a command, right? An I command. We just saw an example of that in the last session that you had with Dimitri. Well, a person provides what's called a delegate command. So I'm just gonna type cmd. Actually, I don't wanna do that. I don't wanna confuse everyone. We'll say delegate command, my command, and we'll just provide a simple getter setter. And I'm gonna include my namespace here. And it will say my command equals new delegate command. And I don't know, we'll say execute. Look at you. Yeah, that seems pretty simple, pretty straightforward. Okay, and then so I call that my command. So let's bind this button to my command. Now I guess we'll give it some content. Click me. All right, that looks good. We're gonna probably wanna put this checkbox in the grid.row2, right? Our one. So I'm gonna hit a break point there. Let's just make sure I got everything hooked up right. Man, my machine is really struggling to keep up. I got too much stuff running. Where's this? Oh, here it is. Okay, so we have this click me. If I click this button, I'm hoping that I hit my break point, my output window. Did it go hide somewhere else? Control Alt O, right? Let's see. Control Alt, Control Alt O. Oh, now it's behind me. All right, I'll go away. Fine, fine, I see how this is. There it is. Well, let's see. Ah, my command. Did I misspell something?  Why didn't you tell me I didn't make that public? I didn't. Come on, guys. Oh, there, yeah. Come on, guys. Geez. I thought that's what switches for. Oh no, look at that. Niketsu in chat is calling that out, public. Yeah. Oh, thank you. I need my real-time debuggers. All right, there we go. We hit the break point, beautiful. So it works. Now, one of the things about commands is managing state, right? So I have this checkbox. One of the popular things for commands is having what's called a can execute. Can execute. Oh my gosh, can you spell today? Right, you're talking about some sort of a check that says, can you actually press this button? Can you actually do this thing? Exactly. And normally we have a property to control that. So I'm gonna use this prism snippet. Is enabled. Is enabled. And we're gonna return is enabled here. And this is gonna tell us if we're allowed to enable this command or not, right? So Vigil Studio 2019 is really slow for debugging for some reason. It's taking forever to pull these windows up. Okay, so we're returning false. The default value of a bool is false. So it's false, we can't click the button. So what I wanna do is I wanna be able to control that is enabled state by binding it to that property. Binding is enabled. So the idea is when I check this button I want to enable the command, right? I mean, our state has changed and I want my command to be able to be invoked. So when we check this check box, oh my gosh, this is really slow. Live video does that. Yeah, when we check this check box, this button should enable, but it's not what's going on. I mean, I don't get it, we're changing the value. Well, the problem is we have to notify this command to re-query the state of the can execute. And it doesn't matter if you're using delet command or not. This is just commanding in general, okay? So what we have to do is we need to find a way to raise the can execute of this method. Now there's a couple of ways to do this. One way to do this is let's just go into the setter of the isEnabled property and we're gonna say my command.raiseCanExecuteChanged. Okay, let's try that. Let's see if that works. Basically we're manually forcing the raising of this command to recheck the state or the value of the can execute method. So hopefully I click this and there we go. So as I toggle this button, we can see the state of that command or that button change. Well, that's pretty cool, but you know what?  I mean, if I can avoid putting code in a setter, I avoid it because I don't like it. I like my setters nice and clean. So what's unique to delegate command is we have an option here called .observes. Oh, I'm on another line. Oh, there it is. Observe property. What I'm telling this command is we want to observe the isEnabled property for state changes. And that the value of this property changes, we're going to automatically raise the can execute changed and check the result of the can execute for you. You don't have to do anything, it just does it. So we are observing state changes in that property. So this is one of those things Prism does for us to allow and enable that enabling and disabling and binding of the command. Exactly. So now I'm clicking the button, it's the same functionality.  Now, you guys might be asking, I don't see a question yet. There is a question about I property notify. Okay, where is it? I don't see it. Isn't there, Stelzi79 asks, isn't there an I property notify? There is an I notify property changed and you see this bindable base. This was, this is a class provided by Prism that implements that interface. So if I hit F12, we'll see that it does in fact implement I notify property change. And when I call this method set property that exists on bindable base, it is calling I notify property change for you behind the scenes. So you're not gonna have that on property change called like this manually. That's not gonna happen. It's done for you. Fantastic. I need all of that stuff, all of that goo that yak shaving behind the scenes. Let me focus on writing my code instead of wiring up plumbing. Exactly. Now, another interesting thing about this is you can observe more than one property. You can just keep tacking these bad boys on to your heart's content. Obviously, if you have like 12 properties you're reserving you might have some code smell there and might wanna reevaluate that but you can observe multiple properties. Another thing you can too, you can do is let's say you have like a person class. You can say, yeah, person.address.zip, right? So you can actually observe nested properties if you need to. Okay, well, something else that's pretty cool about the prism delegate command is, we're looking at this and we're saying, you know what, all our can execute is doing is just returning a boolean. That's all it's doing. I'm not doing any complex logic. It's pretty simple. It'd be great if I could just remove that somehow. Well, you can. Instead of observing the property, we're gonna hit our IntelliSense. We have an observes can execute. And what observes can execute does is it will use this property. Not only will it observe it for state changes but it will use the result or the return value of that property as the can execute method as that delegate. So I can actually remove an entire method and just say observes can execute. So if I go ahead and run the application and go make some coffee while I wait for my app to run. That wasn't coffee, that was water, come on now. I don't drink coffee, I gotta have water. All right. So, and it works the exact same. To the end user, there's no difference but to the code, there's a huge difference. It's a lot cleaner, okay? So, commanding is a lot different than a lot of the other frameworks that are available out there and it's all about just making you a little more productive and your code a little cleaner. Things just easier to do. The next thing I wanna talk about is about navigation. Cause navigation in Prism is pretty freaking badass if I don't say so myself. Remember I had this region in here? I removed it. So let's go ahead, I'm gonna leave that button there and I'm gonna add a content control and I'm probably gonna wanna wrap this in a stack panel cause I already know, probably gonna add more than one and we'll set the orientation to horizontal here and I'll need to make sure that this, no, hey, what happened to that great intelligence I'm supposed to have? It's there, it's there. Okay, so in Prism, we have this concept of regions and all the region is, it's a placeholder for you're gonna stick some content. That's all it is, okay?  You're basically gonna say, hey, this element right here, this is a placeholder and I'm gonna stick stuff in here and the only thing I need to do to specify an element as a region is I'm gonna use the prism, region manager, region name, let me scroll over so everyone can see here and I'm gonna call this content region. Cool, now we can start doing some navigation. All right. Okay, how much time do I got? Okay, I'm gonna- Oh, plenty of time. 20 minutes, we're good. I'm gonna introduce a new concept right quick at the same time. I'm gonna implement a module. So one of the things about prism is we talk about loosely coupled apps. You know, we want our clean separation of concerns and this includes modularity where we have major functional areas of our app separated into smaller chunks where it's easier to maintain, it's easier to extend, we're not stepping on other people's toes. Oh, sure. This is the promise of namespacing things. You put stuff so that it's isolated and it doesn't have, it has the same name but it doesn't step on toes, yeah. Yep, so I'm gonna go ahead and I'm gonna add a prism module. Prism module.net core three. And we'll call it module, I don't know, A. My go-to, module A is my go-to module name. Naming is hard. And then I'm gonna right click because I need to update our packages here. Now I wanna make sure I'm going against our CI builds. Let's update this very quick. And notice that this module here, if we look at what's installed, we don't have prism, we don't have a container installed in this module. Keep that in mind. We are not referencing any container in the module. So just remember that. Sure. Okay, so we have a view called view A and it's very simple. Looks like we have a view model that we're bound to, it has a message property and we're saying view A from your prism module. Great. Now the first thing we have to do is let our main application know about our module. So we're gonna go into our app class and we're gonna override, configure module catalog. Configure module catalog. Okay. So you're inside your app and you're saying there's modules here that you need to be aware of. Yes. Got it. Add module and we'll say what I call that module. Module A. A module. And then we're gonna add a reference and there we go. Okay, so there's a couple of different module catalogs in prism. I'm doing it in code right now but you can do it via an app config file. You can do it via XAML resource file. You can even scan directories on disk if you wanted to but we're keeping it simple and we're just gonna just hard-code it in there. It's fine. Okay. Okay, so now what we wanna do is let's go, I'm gonna close that. I only want that available. Let's come into our module class and see what makes up a module. A module is just a class that implements iModule which has two methods, initialize and register types. So register types is where you're going to register any of your views or classes with your container. So in this case, I'm gonna say container registry.register for navigation, view A. Okay. So because I want this view to participate in navigation, I'm gonna say, you know what? I have to specifically register this view for navigation. So my container or the prism app knows about this view and knows that it's gonna participate in navigation. Gotcha. All right, all right. Now let's go ahead and go back to our view model because there's two types of navigation inside of prism. You have view discovery, right? So view discovery basically says that I'm going to go ahead and let the region discover the view when it's ready. Whenever this region is initialized, it's gonna automatically just show it and I don't control it. I have no control over it, okay? And then you have view injection. View injection saying I'm going to manually do this. Mm, okay. So you're literally taking the contents out of this library, this module, separate projects, separate assembly and you're gonna spot weld it into your application so it's available where you need it. Exactly. So what happens here is when you registered this for navigation, you are assigning a key to the navigation system because prism doesn't navigate based on view models or views, that whole view first, view model first, it's really not a thing, okay? It doesn't matter and prism, it's a key. And in this case, the key is view A. However, I can just say my cool view and now that's the key. Make sense? Oh, yeah, okay, so I'm not a fan of having I'm not a fan of having these magic strings like that floating around. Yeah, well in that case, you can use constants, right? I mean, there's lots of ways to get rid of magic strings. You can do resources. I could do a name of. Well, you could, but I personally don't do that and the reason I don't do that because that is creating a coupling. Even if you're doing view model first, right? So if I'm inside main window view model and let's assume that I'm not referencing, you know what, let's just go ahead and implement this. Let's go ahead and I'm gonna ask for the I region manager because that's what we need to navigate. So I need to using prism.regions and I wanna create a initialize a field back here. Now remember when I said I use a container for all my stuff, this is why. Yeah. All I did was ask for this region manager. You didn't see me knew it up. You didn't see me have to go and do anything special. I just asked for it. And it's just available for you. Nice. It's just gonna give it to me. So when I execute, I'm gonna say regionmanager.requestNavigate the region name, I think we called it content region. See, this is where your constants come in handy but I'm live coding. Yep, I call the content region, right? So where I want it to go and then the key of the view, which is viewA in this case. Pretty straightforward. Let me see if I can shrink this just to fit a little more code in here. All right, makes sense. So in the module, we registered this view for navigation but in the main window or the main window in the main application, we're gonna navigate to that view, keeping in mind that it's possible that we don't even have a direct reference. Like if we're using an app config or an app config or if we're loading this from a directory, this project has no hard knowledge that that even exists but I can still navigate and communicate with it. So let's go ahead and see this my command click me. Okay, let's go ahead and run the application. Oh, come on, these build times are killing me. No, no, we're good. We're all right, we're all right. This is when it gives you time to think, to contemplate, did you build things properly? Is the code written properly? Why did I forget to write those unit tests? There it is. Oh, yeah, and. That region is taking up a little bit more space. Yeah, well, and I also forgot we have this little enabled or checking returned false and let's check this here. Yeah, that's right. Okay, so our button should be good now because remember we had that checkbox there where we were controlling it and I removed the checkbox so it defaulted back to false. Maybe I should do that hot reload. Hot reload, love the hot reload. Yeah, so theoretically if we did everything right, I can just click this button and then we'll see there's the view that got injected into that region. I mean, that's pretty freaking cool. Right, so you're bringing content outside of, you took a direct reference here because you hard coded it, but I like what you were saying about, you could move that reference into an app config and as long as that DLL, that output, content, that output assembly is somewhere where you can recognize it. You can swap that in and load it on the fly. Exactly, think of how MEPH, the extensibility model kind of works where you can just kind of drop an assembly into a folder and then functionality just appears in your app. Yeah, just like that. Here you go, you can do something similar with user interface.  So you can release, like, look at Outlook for example. Outlook has the mail, the calendar, the contacts, those, think of those as modules and at any time I can release a new module and it just magically appears to your user. Maybe they paid a premium price and they get to have a calendar and boom, you load a calendar for them when no one else gets it. Sure, sure, a resource scheduling module. Oh, okay, well, you know, to add only the folks that have a paid subscription and it loads that module on demand because they have it. Oh yeah, I get it, okay. Okay, now let's talk about view model participation. Or not view model, but navigation participation for your view model. So navigation is one thing, but an important aspect of navigation is being able to know when you're navigating and getting parameters and information from that navigation process. So in WPF, Prism provides an iNavigationAware interface. iNavigationAware, I'm gonna add my using statement and I'm gonna implement the interface. Now, this comes with three methods. It comes with an onNavigatedTo, an isNavigationTarget and an onNavigatedFrom. Here, we're gonna just return true. So these two onNavigatedFrom and two are pretty self-explanatory, right? When you say onNavigatedFrom, we're navigating away from this view or this view model. When you're navigating to, of course you're navigating to the view of ring model. Now, this isNavigationTarget is actually pretty cool. And if I had time, I could show you how this works with tabs, but essentially, isNavigationTarget controls the instance of this view. So for example, let's say you're doing customer details and you say, hey, if the cust ID equals two, you know, then return true, otherwise return a new instance of this view because we're dealing with a different customer. Does that make sense? Yeah, it does. Go ahead, I'll let you go. Okay, so let's go back to our main window here. And what I wanna do is I wanna pass some parameters. So I'm gonna create some parameters and I'm gonna create some navigation parameters. And there are a couple of ways we can do this. First, we're gonna do it all in code here. It looks like I need it. New, did I misspell that? Navigation parameter, are you? Oh, I didn't do new. Right. There we go. Okay, so we can do an object based. So we'll say, you know, p.add, we'll give it a key, like ID, and then an object of value. In this case, it'd be a stream because I'm gonna put it in quotes and I'll just say, you know, hello. And then I can pass those parameters along with my navigation call. So when I come into my view model, when I navigate to this, I can say, you know, var p equals navigation context.parameters.getValue and I'm gonna cast it to a string. And what was, I think I called it ID. Okay, so now I'm gonna get that parameter I passed and let's set our message to that value. That looks good. Okay, so let's go ahead and run this real quick. We go back, close that and run the application. And now we contemplate life again. Here we go. Yes. Why, you know, when you use multiple monitors, one thing that really bothers me is if I'm using multiple monitors, why don't we just open up the app on the same monitor my VS is running? I don't know. Okay, so I'm gonna hit the click me, the page loads, but now we see that our hello message that we pass as a parameter to that view model. And no longer it says the original message, it's what we pass to it. Okay. Now, one thing I wanna mention is, you know, we're talking about strings, like I don't like these magic strings. Why do you use a string? Well, technically navigation as prism is URI based. It uses a URI, like an HTTP URI. And that gives us a lot of flexibility with how we handle parameters. For example, instead of saying hello in here, I could go ID, I need my little ID equals hello. Well, that's pretty cool. Well, what's even cooler is I can come to my view, question mark ID equals hello, and not even pass in that P or it gets even better. We can pass in different parameters differently. They're all combined into one. So if I come into here, we'll hit a break point around the application, and we're gonna see all of those parameters that were created in different approaches, all consolidated into one parameters object, and you'll see all three options in there, even though they were created differently. And it's interesting to me as a web developer, because I'm seeing query string pairs coming through here, very easy for me to pick up and pull that apart. Exactly. And then there's three, and here's our parameters, ID, name, and our car. And then you can handle those parameters. Now, what's really cool about this is let's go to our view, because sometimes you need a little code behind. Like it's okay, but you still need access to those parameters. Well, you can do that. You can have your view and your view model. Come on, here we go. Implement these interfaces, and it will be called on both the view and the view model of your target navigation. So I'm gonna hit unnavigated to, we'll run this again, just to prove that we are hitting the view and the view model. All right, I get it. Loading, loading. You know what, you need a compiling song to play. Yeah. You're gonna add that to your repertoire. So here we are, we're in the view code behind, and we hit the unnavigated to, and then of course we hit the view model because we have our logic that just ran. Now, another common scenario, how much time do I got? Oh, I got a few minutes. Another common scenario is preventing navigation, right? We wanna prevent navigation. Well, let me just move up. We have a way to do that too, as long as I stop my debugging session. I confirm navigation request. Oh, okay, okay. So this basically says, oh, and just so you know, the reason you get these methods is because if we look at it, and I don't like the way this was first written, because this was way before I took over, it actually implements iNavigationAware. I personally don't think that should have been the case, but it is what it is. So that means I gotta come through here and delete all these so we don't get any. Exceptions. So I confirm navigation request will tell us if we're allowed to navigate in the first place. And the way we do that is by calling this continuation callback, right? So we'll get the parameters. We can handle any parameters, show any dialogues, and then we'll have this callback, and we'll say false. Just, I'm just gonna hard code it to false. There's no fancy logic here. It's just like you did with the command where you said, can execute. You're doing the same thing here. Can I navigate into this thing? Exactly, and this invokes before the navigation process even begins. See, this is where we need that little sound bite of it. We need that music. Maybe it's like the Jeopardy theme. I do have the Jeopardy theme, but copyright. But so yeah, when you're navigating away, and in this case, it won't work because I'm actually navigating from the main view model. But essentially, all we're saying is, hey, we want to cancel navigation. If we want to allow it, we say true, and then it will continue on. I got like two minutes. Yep, we are right up against. Okay, well, it'd be something cool. Is there anything, I haven't been monitoring the comments here. Is there anything someone wants to see that I could show real quick? Prisma is great, says one, one F Blanco. Prisma is great, I wish modules, dynamic loading regions could be portable to UWP, Xamarin forms, et cetera. Yeah, unfortunately, UWP doesn't allow the dynamic loading of assemblies, though I think that might be changing. If Jerry Nixon's still online, he could probably comment on that. I thought I heard a rumor that that was gonna be supported, but I'm not 100% sure. So do not quote me on that. Jerry would go to answer that question. Sinclair Nader's asking about passing complex objects between view models and views. Well, yeah, let's say, where's my parameter here? So let's say your ID was a person and you passed your person object, no problem. You need to create the person object, but... Yeah, you would have to create it, of course. This is assuming you have a person object to pass around. But yeah, you could totally do that. You see, you know what? I'm gonna show one thing. Let me open up a project that's already built and it's a project everyone can play with. If you go to the Prism website, where is my... And while you're looking for that, there's a question from the chat room asking if the code that you've gone through here today will be downloadable if you have a GitHub repository you can share it from. Yes, I do, and what I'm trying to do is tear off this freaking tab. Here we go. So I can show you where to find all these samples. So if you go to the Prism repo on GitHub, github.com.prismlibrary, and scroll down till you see prism-stampals-wpf, and you'll see there's 30-something samples in here that cover just about every single feature that Prism has. And it really simplifies all the concepts and very modular, very focused samples and they all build in each other. For example, composite commands are pretty freaking cool. You know what, let's show a composite command in the last few minutes I have. I'm gonna go to the GitHub samples because composite commands are unique to Prism. I haven't seen anyone else do these before. I sure will say that. So a composite command is essentially a parent command that invokes child delegate commands, okay? So essentially you register any number of delegate commands or I command implementations doesn't have to be a delegate command, but you register any number of commands with a composite command and it will invoke all of those commands at once. So think save all, right? So in this sample, we have a tab control with multiple tabs and I can save each one of these individually right? And these can execute control one each individually but I have a composite command where if I click this it saves all of them simultaneously because they've all registered to this composite command. Now things to keep in mind when using composite commands is that the logic flows of, okay, I have all these child commands registered. So if just one of the can't executes of those child commands returns false then it's false for the composite command. So you can see tab A we're returning false but composite command is disabled, okay? So they all like I can't click that composite command because it's just one of them returns false. But if all of them return true being they're all dirty for example so save only the dirty ones then you can invoke the command. You could also have what's called an active command. So commands are pretty cool because they're extremely flexible and Prism you could have your delegate commands can actually be monitored for activeness. Like is this active? So when I select this tab B, this tab is active I can set this command as active. And what that does is that allows me to save just the selected tab from this global composite command because I tell it, hey I only want you to worry about the active commands and only the commands you marked as active those will be invoked. So it's really, really cool and really flexible. I wish I had more time because as you can see that I closed it, I did close it. Let me just open this up. We actually have a documentation as well that we're working on. Let's go to prismlibrary.com and just click on the documentation here. We do have some docs. We're trying to add videos to all the topics just to kind of make it easier. So if you scroll down through commanding, you can see delegate command. There's a video that explains it with code and just kind of explaining how things work. Composite commands are the same thing. Explaining how they work. We have a accompanying video and we're trying to do that for every topic and just very time consuming. Sure, but you've already got a good bit of documentation here. Yeah, so we have commanding composite commands in the model locator. All these things are documented fairly well. There we go, yeah. And then for WPF, we are rewriting the documentation. So under the legacy is where you'll find all the docs for WPF, but we're rewriting the docs to make it a little easier to follow because honestly, when you look at stuff like this, it's just a big wall of text and it could be very confusing to really understand what's going on. A little daunting to navigate. So this is great. Thanks so much for sharing all the stuff about Prism. So prismlibrarygithub.io and you also went to prismlibrary.com to get there, right? Yeah, so prismlibrary.com, it just redirects to prismlibrary.github.io. So either way, we'll get you there and then it has a link to get you to GitHub. So if you click on that, it'll take you to the source code because it is open source and you can download it and fork it and do whatever you want. Yeah, find those samples because the samples are actually in the main org. So when you get to the source code, just click back a level to the main org and then you'll see the samples for WPF there. Terrific. And yeah, there's tons of them for every single concept that prism has. All right, well, thanks so much for sharing. I learned a lot about prism here with you, Brian. Thank you very much for joining us today as part of the workshop. That was fun. Cool, all right. And we had a lot of great questions there from chat and they're asking for, if you could share that little application you mocked up with us here today, if you could share that out to your GitHub or somewhere, we'll attach it to this video later so that folks can find it. But I think the samples are a little bit better here. Yeah, the samples are much better. They're more cohesive. What I was doing was just very random off the top of my head. Everything I showed is here, like regions, custom regions, right? Create your own region for maybe you're using some inferences controls and you want to use its docking manager as a region. So when you inject a view it actually injects a whole docking pane like that type of stuff. That shows you how to do that. Very cool, very cool. All right, thanks so much, Brian. We'll catch you later. Thank you so much for joining us. Yeah, thanks for having, I appreciate it. Alrighty, and we're going to, let's see if I can do this right this time. There we go. And we're out. All right, that was great. I learned a lot about Prism there. I like how we have tools, how we have features. We have capabilities that we can bring in from these libraries and extend and make our projects a whole lot easier to manage, right? And that's really kind of the key here. It's one thing to build a one-off quick application. You just need to write some code real quick. But when you need to manage a project for a long period of time, that's when it becomes important to invest your time in a framework so that you can have good testing. You can have good ways that you can extend. And I think Brian really showed us that nicely. All right, we're going to get, we're going to get our friends from the Channel 9 studios back up and running here. Oh, let's see. We can get them dialed in. All right, here we go. All right, let me give them a call. Let's get them added into the mix here. There's the Skype music. All right, hey, next up, look at that. It is Jeffrey Huntley joining us. Give me one second here just to get that connection turned over. Hello, Jeff. How's it going? Doing well. Oh my gosh, it's so great to, gosh, we've swapped messages on Twitter for a long, long time here. And it's great to finally have a chance for us to talk in person, face-to-face kind of over Twitch. But gosh, why don't you introduce yourself and let folks know who you are real quick. Sure. Oh, and I asked that right as you're drinking coffee. My apologies. Hi, everyone. My name is Jeffrey Huntley. I'm a Microsoft MVP and an open source maintainer of quite a lot of projects in the .NET ecosystem. And here today to talk about reactive extensions and looking at programming in a reactive manner with desktop applications. It's so good to see you, Jeff. Like if you're here next week for the MVP Summit, I'm in town for it, we'll go for beers. It'll be really good. Absolutely, we'll definitely have to do that. Using late night FM radio voice. Who are you referring to there, Jerry Nixon in chat? So reactive extensions, let's talk about that a little bit. So we saw MVVM with Prism. What's reactive extensions? Yeah, sure. So the reactive extensions were made here at Microsoft. Around about 2009, 2010, I forget the exact timing. So MVVM is a way of basically separating your business logic away from UI layer. It's a design pattern. It's model, view, view model. Now, reactive extensions has nothing to do with MVVM. But what we'll be talking today is how to use the reactive extensions with the MVVM design pattern. Okay. And so the question was like, what is the reactive extensions? So, yeah, so reactive extensions is a way of programming in a declarative manner. When you look at the way that we typically program with objects or collections, well, typically we either have an object. Sure. We have a collection. And both those two things are synchronous. And then we start moving into the world of tasks. And that's a single value over time. And then we start moving into the top right, which is the observable collection. Oh, sorry, no, observable collection, apologies. That's how observable. Okay. Do not get observable collection and observable confused. I'm so sorry. And that is multiple values over time. So reactive extensions is a way of handling events over time in a declarative manner. I'll be showing a whole bunch of examples of what this means and how this can be used to actually simplify your view models. Okay. So let's do this. Let's join your machine so that we can share your screen. Why don't we join your machine into the Skype call? Let me... That's great. Yeah, yeah. Let's do that with... Oh, good. I need to add another person. Actually, on your machine, you just added me on Skype.  Right, I'm assuming that's what you're doing. Hey, look, there you are. Excellent. All right, and you're gonna wanna mute that microphone on your laptop. Okay, I'm muted. Fantastic. And then you can share your screen from over there. There we go. All right. Beautiful,