On. Today's toolbox we're going to dig deeper, into zamel islands and we'll see what treasure we can find. Hi. Welcome to visual studio toolbox I'm your host Robert Greene and joining me today is Adam Braden hey Adam hello, robert welcome back in the show thank, you thank you for having me we did a two-parter. On modernizing. Existing. Windows, desktop apps and. In the second part which aired last week we, talked, about zamel, Islands a little bit briefly and. Today we decided that that you come back and do a bit more of a deep dive into zamel, islands to get a little bit more into some, of the use cases and, show, how it works we we kind of felt like we kind of skimmed over it a little bit last episode, so let's dive into it a little more yeah. In. The previous episode, I showed. You. Know some. Of the. Easy. Drag-and-drop, experiences. Provided by the Windows community tool kit which, provides wrapper controls for the media player and, webview. And ink canvas, and things like that and. I hinted at using the zamel, host control, to load any or I did show, using. The zamel host control to load, any kind of control dynamically. Right what. I didn't really get into is showing was actually, building, a uwp user control, to. Get. That full dynamic. UWP zamel experience, and how to load that into your, win. Forms and WPF applications. Is that the idea is that as. You're, building au WPF, there's a bunch of zamel, that you have right, that takes, care of the UI, and. Yes. It's, pretty simple, to use a control. From UW P in a WPF, app but what if you have a bunch, of zamel then you basically want, to reuse. As. Well, as maybe. You want to do some more in-depth, zamel, fluent. Design, like, the transparency. Yet the animations. That sort of thing and so what I wanted to do today was actually show you both how to do the hard way through. The sam'l host control, and all your WPF, code and you'd have to like code all that up yourself okay. As well, as doing it an easier, way by. Building the uwp control okay cool, okay, and we should mention that you're using the. Soon, to be here Visual Studio 2019. For this demo correct, okay which at, this point is. Soon. Yes, a the. Launch of an April 2nd I believe it is yes. And so, alright just, still just a level set cool. So, what I have here on my desktop right now is the. Sam'l controls gallery I showed a little bit of this in our previous, episode, and. Just. Wanted to highlight some things that I'll be showing. One. Of the examples, is the anime, animation, Interop, with. Animation, oftentimes, it draws the users focus to an activity or something. You want them to accomplish whether. It's a transition, from one flow to another, on the forum or. Really. Drive, the. Importance, of something by exploding. It in view and then dropping it back down and, so the example here in, the controls. Gallery is just, a simple blow-up of a button, I'll, show you how we can do that as well there's, a little bit of code to create this spring animation, effect those guy it's called. There's. Another one, further, low or further. Down on here, where, we've got connected, animations. Between multiple, controls, right. And you can spring all of them together and what. I've essentially done is taken. The. Code from this sample and poured. It into a WPF. Application. Using the zamel host ok so, let's take a look at that. So. The first thing. With. My application, here this, is just a simple WPF, app and. If. I go to the designer, you'll. See I've got a couple of WPF, buttons, and text boxes okay as well. As this wonderful, zamel, host, windows. Ml host okay and, what. I've done here is I fresh. Our. Memory how do you get that oh you've, got a reference or, do something a new get package, generally you'll manage your NuGet packages.
And If, you add. A reference to, the, Microsoft. Dot. You toolkit. Here the Microsoft toolkit WPF, got it and that'll give you that sam'l host where you can load any content, into the form okay I, also, have a reference to. Win. UI and. The SDK contracts. Okay, so. You can program against, the, Windows api's this, example we're not focusing, on those parts as much right, but. One of the main things or the the primary thing with using the sam'l host is you set the initial type name of the control, and. You set that to the you WP type that you want to load okay so. I'm going to host a stackpanel. And. Then within code, I can dynamically, load a whole bunch of controls into that stack panel okay. And, once. The zamel, host is ready for you to start manipulating those, controls, it fires, the child changed event. So. If i go back to my control, or my code. You'll. See here at the top that i've declared a number of controls. Uwp. Based controls, that. I'll be manipulating. In my code and. Down. Here in the child changed, event is where. I start initializing, those controls. First. Thing I typically, do is get, the, sender tells me which for. The the host control, and then I'll get the child which is the stack panel okay, then. I'm. Doing a cool effect here the acrylic brush are you familiar with acrylic, in the background, now oh well, let me switch back to, the. Controls gallery real quick and we'll show you a. Quick. Example of that so. Acrylic is that transparency, effect a little. Hard to see on the board here. But. You can see as I move around it you can see some transparency, of both the background of my desktop. And. The or thing different things behind it okay. And. I've. Amped. Up the transparency. To. To, be able to show that a little bit better here. I'm going to apply this background to that everything in the stack panel and so ideally everything. In that zamel. Windows. Amal host should, have a kind of a transparent, or acrylic. Feel mm-hmm. The. Next thing I'm doing here is I'm building. Up the additional controls, this is kind of the the heart, or the legwork of initializing, all them. Have. A couple of text boxes and. Then. I have a couple of buttons okay, the. Buttons I initialize, to various sizes, and hook, up those spring of spring animations.
To Them, and. Lastly I just add them to the stack panel and, go. So. We can take a look at that code. But. First let's take a look and run and see, what happens. And so, that look the, test in the WPF, text, and the main window is obviously, all WPF, then, inside, that are, is UWP. Controls. Correct. And you can cut you can see it on, the big screen here too but as I move around the transparency. Effect has applied to the entire zamel host and even the buttons they're nice you can see I get the animation, effect on these buttons as well driving. My focus, and my interaction, to those I also. Wanted to highlight a couple of things about the uwp intrinsic, controls, that we've made improvements to compared, to the WPF, and you may want to actually pull those into your applications. As needed. One. Example is the. Infamous typos, right. Caps. Lock on. But. If I do. Right. Mm-hmm. I have a misspelling, here in the word spellcheck. WPF. Doesn't help me do anything like that right another. Example is, emojis. I. Just. Saw today they were on ammo g12. Thinking. To myself did, I miss one through eleven, that. Means I. Think I missed a few in the way away there too but, Windows 10 has a great, built-in. Support from Reggie's some. Of that does fall through with UTF cepe utf-8. Support for. The WPF, textbox. But. One thing you'll notice here, WPF. It's only black and white right all. Right now. I created, a text. Box down here, in. The. Zamel, island with. The uwp control. And. Look you get squiggles, with words, so it has a dictionary, nice and if I right click I get. A whole intrinsic. Sit the same area. That word uses, by the way a, single. Dictionary you, know there's, a dictionary that's supported. By zamel, I'll have to double check on follow-up in one day where it hooks into yeah. But. You can fix, that up mm-hmm, even. If you spell if it, knows some words it'll actually autocorrect, for them so I misspelled, goodbye and. It autocorrected to goodbye well and the last kind of cool little tidbit I'll show you is emojis. And. You. Have color, support, inside the eyes so. And. You eventually, get support for emoji 12. Sometimes. I don't know what number WPF, supports, but I'm pretty sure it's not 12 yeah. So. This was an example of just. Showing. You that yeah, I can create more complex, controls. Mhm build them up in my WPF, to code. And. Essentially. Take all that code, that's in the, Zambos control gallery or you know out there on the web for UW P and I can code against it in my WPF, app, so. Cool. Go. Ahead and close this or finish that and yeah. Taking a look at the initialize and animations. That's the, same exact code that was in the sample, controls gallery came, but. This is really not the way we encourage, you so, let me ask a question. Is this is. This is using, as ammo Island because. I haven't seen any zamel yet, necessarily. I've seen you do code. Well. In WPF, in the designer you can't, mix UWP, zamel in WPF sample you can't copy and Greist it just won't parse okay right you. Could if you had you. WP samo in a file, or some other or even copy. Pasted it into code you. Could use UWP zamel, parser okay, and then you could load that content, into. This control, but you are you, are using. Zam.
Zam Oh Island is the technology, that enables you to use. The. Controls, from uwp inside, a WPF, app correct, okay because they are both saml-based, even. Though you can, of course create controls, in code right, so I just wanted a to. Make. Sure that bottom is clear, yeah, um Oh Island is the underlying. Technology. That lets you do that it's the host its writes the Interop, layer between an H wind and the UW peak or window host, and technology. Yeah, like it those canoe, WP controls are created in code, I could not assign those to the WPF, window element, that would fail right. I've got to assign them to the sam'l, host. Control, right okay. But. As you, noticed I had to write a whole bunch of code to, initialize just, my UI and that's not a very. WPF. Or as a Mele thing to do and. So what I want to show you next is the approach. Were working. The. Approach that we want you to developers. To be able to use going forward and how to mix more complex, as ml UI with their existing applications. And. So. In my second, example here I got. The user control, that, I've built inside, of, UWP. Okay. All, right yeah, and I've. Got I. Can. View the sam'l there as well and so. Here I can do all the rich sam'l. Copy and paste and build a user control just like the right, and. I can build an object model, so that people, can code against this user control of course oh yeah and, what, I do in my WPF, app is now I can, go through and in my zamel. Host control, I can. Set the initial type name to that user control, cool, so. It's pretty, straightforward once you build that there, are a couple of things, you need to do in order to hook it up into the projects, system, let. Me show you. The. Project system right now. Ideally. I've got, I've. Got this item. Group commented, out right now ideally. We want a project reference, to just work there's a couple of bugs we're still working through with dotnet, core three and the project, system. So, you have to directly reference, the output, of the DLL today. Okay, and then. To get zamel, to work you also have to out reference, the xbf, file. But. That's some temporary hacks by the time we get, to release, Det core three I will have work through these solutions yep okay, cool so that's. Some tweaks to do the project, you'll. Don't notice I am actually using a net core 3 project, here yeah, ok and the. Reason it have to be. It. All the, question the answer is it depends okay, so, if, you remember last time I mentioned, that with zamel islands there's, some challenges mixing. Different types, of net core Burnette, you, can't mix dotnet, framework to. Consume, a dotnet core applicate, a component. Mm-hmm, and so. A. Managed. Dotnet core component, so. If I was writing a native. Control. A C++. Uwp, control then yes I could use it easily and dump my not dotnet, framework apps or my dotnet core apps if I'm. Writing a managed, uwp, control those, will only work in dotnet core apps oh. So. You have an existing WPF. A Briton full-blown. Framework, in c-sharp. Yep, c-sharp you, have a you, WPF, written. To. The. Version of.net that, is part of Uwe. You. You're, saying that you can't create that user control, and use it in the WPF, app unless, the WPF, app is migrated. To dotnet core 3, let. Me clarify okay the. Uwp. Control, if, it. Is written in c-sharp. Can. Only work on net, core 3 applications. Okay, if the, uwp, control is written, in C++ I'm, NATIVE it can work in dotnet framework and, net, core okay okay, so if you are building a lot of components, that you want to reuse in these scenarios, you'll, probably want to use C++, if. Your customers, are dotnet framework assuming. You know C++ yeah. Okay. All of Windows UI, is.
Written, In C++ and, so. We. Are working to make sure there's some gaps, to close in the indents story but we want Windows UI to be usable through zamel islands in don''t framework apps and net core apps okay. But. A lot of efforts being put into dotnet, core and carrying things forward and so for right now we're, focusing, UWPD Interop what net core okay good. To know so. So. That's what I have here is a dotnet core three application. Along. With the. Managed. When. RT user, control mm-hmm, the. Other. Thing I have to mention, here is, the. Manifest, file. Right. Now I'm an unpackaged, application. And. Zamel. Islands has a check. In it that says I, can. Only work on certain builds, of Windows and the. Way you tell. That in an unpackaged, application. Is that the max version tested, in that meadow asked if, I took this out I would get an error I could. Comment. That out and we could save. And we'll see what kind of error we get at runtime. I. Have. To let her rebuild here for a second. But. Sam. Olens usually, pops up a dialogue that says. Yeah. Hmm. Now. I need version, 18, 2. To 6 or higher got it all right. So. Let's stop, and. Go. Back to our, manifest. Uncomment. Out that code save. And. Rerun. It Oh. They've. Been into rebuild all. Where. Did you specify, I. Think. There's something cached. Okay. But. The version I specified, is 295. Okay and then, of course if. You, if. Somebody, tries. To run this app on, a version, less, than that they'll get an error, yeah, the app manifest will failed fail. To load force. It to not to probably put a check in your code to check. Before you get that far like I'm a start-up of the app or something well this isn't the app manifest, so, the OS, will actually optically, fail it to load okay all right all right and so. It's a similar application. You. Can see that I added, a the acrylic. Effect with the sam'l Islands kind of going dark and light with depending, on the background there as well yeah and. I've. Got in. This example I just had a pop-up menu. For. A flyout here and I've, got this similar the text, box here. Apparently. We need to put spell checking on button, text yeah, oh. Very. Good good catch. Cool, and so yeah, so. What I've shown you there is, the. Hard way of adding a whole bunch of contents, to your existing, WPF, applications. Or, a simpler, way by building a uwp, control, yeah, I think that adding that to your phone yeah that that seems. The. The right place a good place to start you've built some UI in, you. WPF, that you want to be able to reuse. In. Your WPF, app could, be login screen it could be a particular functionality. Because you have multiple versions of the app you, just want to be able to have that UI in the WPF, app you, just create a user control out of it and use it and then, you need to be. A little bit careful about. Using. Some, of these animation. Effects because, it's gonna be in parts. Of the app but not others you, don't want to have a form where the buttons on the top don't do anything but the buttons on the bottom do the bottom half of the form has, the. The. Visual effect but the top half doesn't, so this InDesign, carefulness, you need to yeah there's. Obviously some reusable components, as you architect your app and you can pick and choose which ones to replace and, get some more. You. Know depth, to your application. More interaction. More focus, to. The flows of the app, maybe. Replace, the for simpler forms replace the whole UI yeah. With the you might no control you might ultimately decide. That you just want the whole UI to be rewritten as you WP and then just reuse, the code get. To the point where that's, asked. Of you or demanded, of you yeah yeah cool. I. Did, have one more surprise for you sweet I love surprises. Last. Time actually, in the first, toolbox. Session we, had ported an app to, dotnet. Core and then, I was showing you the packaging, project, work net, core but, when I hit f5 it failed to build, right. And I wasn't able to truly show it actually, running as a dotnet, core, app running as a package, okay I've. Built, that here in this solution, fixed. The problem it was actually a UX issue and I misinterpreted. The error message and so I'm just kind of skipped past it, but. I I've got it up and running now let's see. What. We've done here in the. Code is add, notes, I. Should. I add a note, to that first episode, that. What's people know, as. Much this episode is, that like breaking, into jail and highlighting, the fact that we, messed up. Think. About that that. Could be let's. See if they notice and then we can point them that like it does work here but, you have noticed, mistakes, viewers. Have noticed mistakes before so yes we'll give them credit. But, what I've done here is just simply add a packaging, project, to this solution and. If, you remember there's the application, note it points to my WPF.
Core, 3 application. And, so. If I set this as my. Startup. Is. Going to have to rebuild. That application. And then. It's going to package, that application. And then. It's going to deploy that application to. The windows and it's, going to launch and debug that application, right, so this pipeline takes a second, yeah but. Cross your fingers if I have set up everything correctly, we. Will get an application launched. Oh. There. It is that's right yeah. And so you can see from the icon down below that, I have it's, packaged, this cut time because I don't have the right visual assets hooked, up cool cool cool that we. Have a dotnet core three application, with zamel Islands running, in a package nice, so I could submit this to the store or yep. Pass. Around the MSX package, for side loading in my enterprise or whatnot, fantastic. All. Right cool, okay cool cool stuff all, right all right I'll hope you enjoyed this part, three, of our two-parter. Modernizing. Your, existing desktop apps any. Questions, you know where to reach us and we, will see you next time on visual, studio toolbox.
2019-03-29