 On today's toolbox, we'll continue modernizing classic Windows desktop apps. We'll show you how to add modern UI to them and connect to Microsoft 365 data. Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today for part two of our two-part look at modernizing desktop applications is Adam Braden. Hey, Adam. Hello. How are you? Glad to be back. I'm doing well. You're back. We didn't leave, of course. But people don't have to know that. That's right. In the previously on Visual Studio Toolbox, we looked at packaging improvements in packaging desktop apps inside Windows 10. We looked at calling Win 10 APIs in code, and we also looked at a little bit, very high level at .NET Core 3. Yeah, just an introduction. Yeah. So it was kind of on the packaging code side. Today, we're going to shift gears and we're going to talk about UI because last time, everybody checked UWP apps has some pretty cool looking UI that we could possibly take advantage of and then we're going to look at Graph which is always a fun thing to look at. Yeah. I think with the Windows platform over the last five, eight years, we've invested quite a bit in new UI and controls. The fluent design or fluent controls, you'll hear a lot of talk about that at Build and Ignite and all of our tech conferences. But one of the challenges has been is that those controls you can't use in your Win32 applications, your .NET applications. Your tool set for the .NET developer has been pretty stagnant for the last eight to 10 years. So with the new technology for XAML Islands, we've actually introduced a XAML host that you can now dynamically load UWP controls inside of and get that fluent UI look and feel. We've also introduced wrappers. So where we've actually done the plumbing work to create the wrapper controls that hook up the events and the properties and methods and look, and build the WinForms or WPF version of those UWP controls, and they talk to the platform version underneath the covers. So the on.NET show had an episode on XAML episodes, I believe back in December. So I didn't want to repeat a lot of what they talked about. But give us the high-level overview of what it is and how it works in terms of the actual mechanics and the plumbing. Then if folks want more information, they can go watch that very good episode and we'll put a link to that in the show notes. What is a XAML Island? It's code that sits alone and no one ever reaches it, right? Because it's out in the middle of the sea? Yeah. Probably not. Not right. Not quite. But essentially, WinForms and WPF, the underlying technology is an H-Wind. We all know and love that from the Win32 world. When the modern Windows platform for Windows 8 and Windows 10 was built, we tried to obfuscate or abstract that so we could take the win-doing technology to different platforms that may or may not have something called an H-Wind. And the concept underneath the covers there is a core window. What XAML Islands does is really go under the covers, gets the H-Wind that's backing a core window, allows those Win32 applications to host that content inside of an H-Wind. And so if you're doing some low-level APIs, you would say, hey, here's my parent H-Wind. Give me a child H-Wind that can host XAML content. And what we've done is we've built a hosting control that does that for you so that you as the developer don't have to do that. Is that similar concept to how back in the early WPF days, we were able to take WPF controls and host them in a Win form and Win form controls and host them in a WPF? Exactly. It's kind of the same concept. Hopefully it's a little more elegant than it was back then because that was kind of clunky. Yeah. Well, that'll be it. We're always open to feedback, but there is a similar model where you can interrupt between these different platforms. And what I have loaded here inside Visual Studio is actually a reference to the Microsoft Community Toolkit. And it creates a Windows XAML host control for you. And what I can do is, well, first let me show you, you can find these on NuGet. They're pretty easy if you search for Microsoft.toolkit. And there's a couple of versions. There's one for forms or Win forms, Microsoft.toolkit.forms. And then there's one for WPF if you have a WPF app. So you can download and install those. And you can see right now I have the XAML host. So that's just the container or the holder control. And you have to put all the content in there and manage the controls yourself or hook them up yourself to events. And so that's what I wanted to show first. It was just kind of like here's the frame and let me dynamically load some content in there. So I can drag and drop the XAML host control on my form and seem to have lost a little bit of content there. Navigation. And so what I'm doing here in this code, let me go ahead and comment it out, is that I have a reference to Windows 10 and the APIs associated with it. Remember in the last episode I managed message, we talked about adding references to either the files on your SDK or the NuGet package. You still need to have that reference so that you can access the latest UWP controls. What I have here is I'm creating a Windows XAML button. Okay. You got to create that control first. I set the various properties like height, then width and content. And I'm hooking up an event. Okay. And then lastly, I tell the host control what the child is. Right? And so you could build up more complex or dynamic content here. But when I run this you'll see that I'll get a empty container control and when I click the button we'll be able to load this XAML content into it. And so you can see the empty container control is kind of blank right now but I've created a UWP control inside of it. Okay. So you said the XAML content but I don't see any XAML yet. I see that you created the button in code. Right. It's rendering its UI. Okay. The rendering of the controls are in there. I could ask, could add any other XAML content or animations or whatever. Okay. For the purposes of this I kind of wanted to show just a simple set of controls that we could add. Yep. A stack panel, set up some transitions, that sort of thing. That would require a little bit more code to hook all that up. Okay. And what I got here is you can see that the, I can hook up events as well. So I have a hosting control, hosting a XAML button which fires an event that shows up in your WinForms code. And so that was kind of like step one. Like dynamically creating content or controls and putting them in the XAML host control. Right. Step two we talked about was the wrappers. We've created a number of wrappers for some of the high volume or high use or most requested controls. Things like the maps control, web view, if you need to host HTML5 content. Some of the media player controls as well. And so there's about six of those controls that we've created wrappers for. And what I wanted to show next was how to show next how to access those and show the differences in the web view type control. Here in my NuGet packages, I've got a few extra. Let me go ahead and close some of those. I'll look at the installed. I've got the web view control as a NuGet package as well. It also has a dependency on the host. And I've also got the Windows 10 contract so I can call various APIs there. In the form itself, you'll see on the left hand side, I have a web browser control, the good old IE web browser control. Now that thing is ancient. It hasn't really kept up to standards. And so if you have internet sites or interface with a vendor and you need richer content versus HTML5, you're kind of stuck right now with your existing applications. There's no way to put that content into your app. Enter the web browser control, or excuse me, the web view control. And so we'll see that under the toolkit forms, you have a web view control and a web view compatible. The web view compatible gives you a similar API surface area and on Windows 10, it lights up with the edge version of the web view and on lower level platforms, it can use the IE version of the control. So it allows you to have one surface and be able to work cross browser. I just got a simple button here which navigates the URL that you can see that the object model is fairly similar. And so if I run this, oops, I forgot to set my startup project. Go back and set the startup project and run this control. And if we hit HTML5 test, we'll see that both controls loaded that page. And on the left, you'll see that the IE based control is does not meet very strong HTML5 standards, whereas the web browser control is much richer for its HTML5 standard. Cool. And that's the case where all you have to do is drag and drop, place the control and navigate. Pretty simple and straightforward. In the last episode, we also talked about, or we showed the coupon application to call various Windows 10 APIs. I had a scenario there in the coupon demo where I thought it would be interesting to add a show inking. Yeah. Ink controls as the canvas is one of the great controls that provides a rich inking experience. You could foresee using those in various tablet type applications where somebody's running around a warehouse and it's maybe easier to use a pen to mark things or sign stuff off than it is to do a little keyboard on a laptop or maybe even a touch-based type device. Might be a little cumbersome. And so, content on your existing applications or maybe you want to really invest in sort of a drawing or type CAD type application. One of the things that I need to do here is enable the ink canvas for mouse to work. And so, there's input device types that it supports. Mouse, pen, touch. Okay. Cause I don't have a pen with this laptop unfortunately. So, when I run this, and all I did there was drag and drop the ink canvas control down here in the signature pane and what you'll see now is that I can easily ink with my mouse. Nice. Right. So, the ink canvas control which you got from where? That was with the toolkit. I'll show you here in a second. So, on the left here you'll see all the, there's ink canvas, various toolbars, the map control, media player element, and you just drag and drop that onto your form. Okay, so you can take existing, you can take controls that are in, that UWP folk would get automatically. Yes. And now use them in your WinForms and WPF apps pretty easily. Exactly. We've published these through the Windows Community Toolkit and so you can search for it, the source is on GitHub and for the new Git packages you generally search on Microsoft.toolkit and you'll see the forms version, the WPF version and any version there. Okay. If I have some existing UI in a UWP app that I want to, and I need to create a similar UI in a WinForm or WPF app, could be a login form, could be anything. I've got a bunch of existing XAML that I've already written in WPF that works fine. Can I take that as a XAML Island and call it from my desktop app? The, dynamically creating the XAML, I think there you'd want to create a control. Okay. To expose that functionality. There are some current challenges with XAML Islands. If you're creating a C-Sharp XAML Island and you want to use it in a C-Sharp.net application, there's some restrictions on being able to do that. Generally it works best if you have a native component and you put, and you build a native control based on it with XAML under the back in your thing and then you can use it anywhere with that net framework or either other UWP applications. So you would create a UWP user control and then use that in the application. You wouldn't just put the XAML itself necessarily inside the desktop app. Yeah, we'll have to follow up with the XAML Island spokes to get some more details there. But most of the models we've seen is where you kind of build the control around it itself. All right. Cool. Okay. So that was kind of the quick overview of using the XAML controls, the host control and some of the wrapper controls. What next I want to talk about was the Microsoft Graph. And the Graph at a high level is, your organization's representation of all of its content in Microsoft 365 and the cloud. And it provides a single entry point to be able to program against your SharePoint, your users, you can even send mail and notifications. And there's really dozens, if not hundreds of different kind of objects or entities you can program against. Right. So basically you get to treat the data inside Office as data. And then you make restful API calls to go get that data. Right. As opposed to the automation model where you actually start up the app and then make it do things, or the XAML content model where you could read what's in a Word doc as XML and then parse through that, which was doable but a lot of steps and difficult. Now this is essentially make a restful API, run a query to return me my email messages or what have you. And as you mentioned the rest APIs, the rest APIs are the most full featured aspect of the graph to access all that data up in the cloud. They also produce a graph SDK which provides a little bit easier object model to navigate and use. However, it doesn't quite cover everything that's available versus rest. And the folks over in the graph team are aware of that and they're kind of, they're always improving the SDK. From a client or desktop application perspective, it may be easier to start with the SDK and start building out until you run into a limitation and then you could drop into the rest APIs to navigate and use that. Yep. One of the challenges that people run into though, first of all, is just how do I connect to the graph? How do I even know who I am or what I am or what am I doing type of thing? And so what we've done with the Windows Community Toolkit is built a handful of helper controls that wrap some of the graph SDK functionality and provided drag drop experience to do that. What I will bring up here is the Windows Community Toolkit sample app. You can download this from the store if you just search on Windows Community Toolkit and install it. And it provides a ton of services that to help you get started with Windows applications and make it easier to program against. But one of the main ones that for this topic is the graph controls. And you can see that there's a logging control which helps you log in with your application, a people picker to see the people in the organization, various SharePoints and Power BI functionality, profile cards on the SharePoint list. We're obviously trying to figure out what people want to use and what they need help with or they think should be better encapsulated. So you can always give feedback onto the Toolkit team as to like, hey, it really seems like this functionality is missing or it'd be better to wrap this in some manner. So if I start with the Toolkit control, I'll show the app here and then I'll show some code of what it looks like. But it's a little easier to explore things this way. The login control essentially has just a client ID and then the set of permissions you're requesting from the graph. I'm not gonna go into registering your app in the cloud. That's a very Azure talk, navigating all that UI. If needed, I think we can do a follow-up talk on that or if you've already done it with someone else. But you can register your app in the cloud. Just go to dev.office.com. It's actually pretty straightforward to register the app and get the ID. Apps.dev.microsoft.com is what I was familiar with. All right. Okay. That's the other challenge. There's a few different entry points which is confusing. But you get an ID and then that says for my organization, I can use this application. Now when I click on this, it's gonna prompt me for my login information. Oh, I didn't remember who I was. At m365.321536.microsoft.com, hopefully I remembered this. I'm logging into a sample, a tenant that I've created. It's pre-populated with a few dozen users and some content. And so here I am, I've logged in as Megan. And the login control will automatically do all the plumbing and connection for you so that you don't have to write a lot of REST calls and stuff to manage this. It also provides some UI to get your information about the user and you can switch to the user and then you can go to the user. You can get your information about the user and you can switch whatever the profile is that you want. Another example control to show that we are connected to the graph and we get more than just a single user back is I can pick different people. It goes out, makes a REST call to search the organization and return me a list of people and now I can save those people to a list. And I can add them and maybe send an email or something like that to them, cool? So we're constantly building and augmenting these controls. We have a few SharePoint ones as well. Unfortunately my tenant doesn't have a lot of SharePoint stuff so I won't be able to demo that. But what I did wanna do is show you how to use this from an application. Currently these controls are only available in UWP. We're working on what the model is or the right way to expose them to win32.net. Okay. If you recall in the last episode or earlier I mentioned that there's some challenges with managed UWP code and managed.net code working together and that's kind of the limitation we're working with right here whereas Windows platform controls like your buttons and your stack panels and whatnot are written in native code and those work fine on top of .net. These graph controls are written in managed code and so there's some technical challenges we have to figure out in order to get them to work inside of .net framework. Okay. So I will close this and I will bring up my sample projects here. Set the graph as the startup and let's go explore the graph one here. First of all I want to show you the NuGet packages as well. If I look at the installed one what I'm showing right here is just a .net application and while we've created UWP controls we did create one small WinForms component that wraps the authentication aspect of it. So you can at least log in and then get a hold of the graph service object and be able to make graph SDK calls at that point. Okay. So if you install the toolkit services it includes a few different services but the main one is graph and when I bring up the form you'll see that there's a graph login component. I've already dragged and dropped it onto the panel here and as I mentioned we don't have in WinForms or Win32 we don't have the controls so I kind of built my own little profile card. Here's a picture and a couple of labels and then a login button that says login. The component itself just takes two input parameters, the ID, this is the same ID as I used to log in with the sample purposes of the community toolkit and the rights or scopes that I'm requesting. And once it returns then I can set up some values for the return. So I run that and we choose log in. It's gonna ask me for these things. This time I remembered on this app that I've logged in with Megan B, sign in and now we can see I've got Megan's information logged in. Cool, cool. So that's kind of a small component that we at least allow you to easily log in to the application. One of the things that you might want to do in your code at that point though is get access to the graph SDK client. And we provide, once you've logged in, let's go graph login component one dot graph service client. So that's the property that gets you access to the SDK and so now you can say GSE client and you can start exploring the different parts of the graph, like you have your contracts here, devices, a lot of these you may have to request additional scopes to actually access them or you'll get some sort of permission denied error. But it really does a lot of the device and user. Drive that you get at and read what's in OneDrive. Yep. You got mail in there. Groups, SharePoint information, planning information reports by SharePoint sites, that sort of thing and users, right? That's how the people picker was working was querying based on the users and workbooks. So we do have a few couple of websites and some additional content you can access. Take one moment, if I search on the graph, yeah.microsoft.com, we can go to the Graph Explorer and that allows you to query all the content that's in the graph. Yep. You've probably already covered something like this but I also like the Getting Started docs. And you can search down here, if you search on UWP, it provides you some quick starts on how to build an application, download the SDK, and then a little bit lower is the repositories. Here's one repository that uses those graph controls that we showed you so you can really analyze the code. Yep. And then you can take the, even though it's in a UWP app, you can take that code and then put it in your WinForm app once you get access to the graph. Yeah, that would probably be more on the SDK samples. Right. Yeah, the SDK samples you could easily copy over and once you've got that client, you can access them inside WinForms and WPF. Yep. Cool. Yeah, it's a very big and very interesting topic. The graph, it's like, we've been doing office development for a while, you know, whether it was VBA or VSTO, and it's kind of like the, finally the promise of just being able to query for the data in a fairly straightforward manner. Yeah, one entry point to get access to all these different services. Yeah, it's very, very cool stuff. Yep. Okay. Awesome. So yeah, we've covered the five areas we think of in terms of modernization and we'll continue to expand on these concepts and build more. If there's any functionality that you think is missing, customers out there, let us know. We're definitely open for feedback and I guess, happy modernizing. Yeah, and the cool thing that the key takeaway is that in order to modernize, you don't have to redo the UI. Right. We've done all of these things from a existing old school WinForms app and you can certainly do it from UWP as well. Mm-hmm, mm-hmm. Awesome, thanks so much. Cool. Hope you enjoyed that and we will see you next time on Visual Studio Toolbox.