I’r your host Robert Green 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, Then the second part which aired last week we talked about XAML Islands, A little bit briefly Today, we decided that You’d come back and do a bit more of a deep dive.
Into XAML Islands to get a little bit more Into some of the use cases and show how it works, We felt like we skimmed over It a little bit last episode, Let’s dive into it, a little more > > Yeah. In the previous episode, I showed some of the easy drag and drop experiences provided by the Windows Community Toolkit, which provides wrapper controls. For the media, player and web view and InkCanvas And things like that, I hinted at using the XAML Host Control to load any or I did show using the XAML Host Control.
To load any control, dynamically >, > Right, > >, What I didn’t really get into Showing was actually building a UWP UserControl to get that full dynamic, UWP XAML Experience and how to load that into your Win forms: And WPF applications > >. The idea is that, as You’re, building a UWP app this bunch of XAML that you Have that takes care of the UI? Yes, it’s pretty simple to use. A control from UWP in WPF app! What, if you have a bunch of XAML That you basically want to reuse > > As well as maybe you want To do some more in-depth, the XAML fluent design Like the transparency, the animations, that sort of thing, So what I wanted to do, Today was actually show you both how to do the hard way through the XAML Host Control and all your WPF code and you’d have To code, all that up yourself as well as doing it in easier way, By building a UWP control, > >, Okay cool, We should Mention that you’re, using the soon-to-be-here Visual Studio, 2019 for this demo, which at this point is soon > >, Yes, > >, It will launch on April, 2nd, I believe it is > >, Yes, > >, So just to level-set > > Cool.
So what I have here on my desktop right now is The XAML 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 animation interop With animation oftentimes It draws the user’s focus to an activity or something You want them to accomplish Whether it’s a transition, From one flow to another on the form or really drive the importance of something by exporting it in View and then drop it back down As the example here in the controls gallery is Just a simple blowup 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, Is what it’s called There’s another one further Low or further down on here where we’ve got connected, animations Between multiple controls and you can spring All of them together What I have essentially Done is taken the code from this sample and poured it into a WPF application.
Using the XAML Host > >, Okay, > >, So let’s take a look at that. So the first thing with My application here this is just a simple WPF app. If I go to the designer you’ll see, I’ve got a couple of Wpf buttons and textboxes, as well as this wonderful XAML Host Windows – XAML Host >, >, Okay, > >, What I’ve done here – is- > >, Just to refresh our memory? How do you get that From data reference or do Something a NuGet package, > > Generally you’ll manage Your NuGet packages, If you add a reference to The Microsoft toolkit here, the Microsoft Toolkit WPF > >, Got it > > That’ll give you that XAML Host, where you can load Any content into the form, I also have a reference to Win UI and the SDK contracts, So you can program Against the Windows APIs This example we’re not focusing On those parts as much > > Right, > >, But one of the main things Or the primary thing with using the XAML Host, is you set the Initial type name of the control Any set that to the UWP type That you want to load So I’m going to host a stack panel, Then with encode.
I Can dynamically load a whole bunch of controls? Into that stack panel right, > >, Okay, > >, Once the XAML 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 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 Host Control and then I’ll get the child Which is the stack panel, Then I’m doing a cool effect.
Here the acrylic brush. Are you familiar with Acrylic in the background, > >, No > >. 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 you can see some transparency Of both the background of my desktop and this orange thing, different things behind it: > >, Okay, > >, I’ve amped up the transparency to be able to show That a little bit better here, So I’m going to apply this background to the Everything in the stack panel, So ideally everything of that Windows XAML Host – should have A transparent or acrylic feel The next thing I’m doing here is I’m building up The additional controls – This is the hard or the leg work.
Of initializing, all of them, I have a couple of text boxes. Then I have a couple of buttons: The buttons I initialized To various sizes and hook up those spring Animations to them, 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: > > The test and the WPF text in The main window is obviously WPF > >, Yeah, >, > And inside that are UWP controls.
> > Correct. You can see it on the big screen here. Too but as I move around the transparency effect, Has applied to the entire XAML Host and even There are buttons there, > >, Nice, Okay, > >, 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 compare to the WPF, You may want to actually Pull those into your applications as needed.
One example is the infamous typos Caps lock on, But if I do, I have a misspelling here. In the Word, spell-check WPF doesn’t help me do Anything like that > >, Right, > >. Another example is emojis > >. I just saw that They want emoji 12. I’r thinking to myself did I miss one through 11; It sure that means > >. I think I missed a few In the way there too, but Windows 10 has a great built-in Support for emojis Some of that does fall three with 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 XAML Island, With a UWP control, > >, Look you get Squiggles with words, So it has a dictionary, > >, Nice > >. If I right click, I get a whole intrinsics, [, inaudible, ], > >. Is it the same dictionary That Word uses by the way. Is it a single Dictionary, do you know > >, There’s a dictionary That’s supported by XAML I’ll have to double-check and Follow up where it hooks into > > Yeah, Okay, > >, But you can fix that up If it knows some words, it’ll actually auto-correct for them.
So I misspelled goodbye and it auto corrected to goodbye >, > Cool > >, The last kind of cool little Tidbit I’ll show you is emojis and you have color support. Inside the emojis > > Very nice, and you eventually Get support for Emoji 12 > >. Whenever that comes out, > >, I don’t know, What number WPF support, but I’m pretty sure it’s not 12 > >. So this was an example. Of just showing you that yeah, I can create More complex controls build them up in my WPF code.
And essentially take all that code, that’s in the XAML’s Control gallery or Out there on the web free VPN, I can code against it in my WPF app > > Cool, > >. Let me go ahead and close This We’ve finished that Taking a look at The initialize animations is the same exact code that was In the XAML controls gallery, > >, Okay, > >, But this is really not the way. We encourage you to do this, > >. So let me ask a question: Are you using a XAML Island Because I haven’t seen Any XAML, yet necessarily I have seen you do code > > Well in WPF in the Designer you can’t mix UWP, XAML and WPF XAML.
You can’t copy and paste It. Just won’t parse right, >, >, Okay, > >! You could, if you had UWP XAML in a file or some other or Even copy pasted into code, you could use UWP XAML parser and then you could load That content into this control, > > But XAML Island – is the Technology that enables you to use the controls from Uwp inside a WPF, app > >, Correct, >, >; Okay, because they Are both XAML-based, even though you can of course create controls and code > > Right, > >, So I just wanted to make Sure that part was clear: XAML Island is the underlying Technology that lets you do that > >, It’s the host.
It’s The inter-app layer between an H, Wind and the UWP Core Window hosting technology, > > Got it: Okay, > > Yeah; those UWP controls, Are created in code, I could not assign those to The WPF window elements That would fail. I’ve got to assign Them to the XAML 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 XAMLy thing to do So, what I want to show you next Is the approach we’re working the approach that we want you developers to be able To use going forward and how to mix more complex, XAML, UI With their existing applications, > > Right, > >.
So in my second example here, I’ve got the user control that I’ve built inside of UWP right, >, >, Yeah, > >. I can view the XAML there as well. So here I can do All the rich XAML copy and paste and build A UserControl just like that > > Right, > >. I can build an object models So that people can code against This UserControl, of course, > > Yeah > >. What I do in My WPF App is now I can go through and in My XAML host control – I can set the initial type name: To that user control, 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 project system, Let me show you the project. System right now, Ideally, I’ve got this ItemGroup 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.NET Core 3 in The project system, So you have to directly reference The output of the DLL today Then, to get XAML to work. You also have to Out-Reference the XPF file, But that’s some temporary hacks.
By the time we get to Release.NET Core 3 we’ll have worked Through these solutions, > >, Okay, cool > > – So that’s some tweaks To do the project You’ll notice, I’m actually using A NET Core 3 project here, > > Yeah. Okay – Does it have to be > >? The answer is, it depends > >, Okay, > >. So if you remember last time, I mentioned that with XAML Islands, there are some challenges: mixing different types of NET Core or.
NET. You can’t bix.NET Framework to Consume a.NET Core component and so a Managed.NET Core component. So if I was writing, A native control, a C++, UWP control, then, yes, I could use it easily in my.NET Framework, apps or my.NET Core apps. If I’m writing a Managed, UWP control, those will only work. In.Net Core apps > >, So you have an existing WPF app Written full-blown Framework- > > In C-sharp, >, > C-sharp.
You have A UWP app written to the version of.NET That is part of UWP 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.NET 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++ Native it can work in.NET Framework And.
NET Core apps > >; Okay, That’s important to know > >! 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.NET Framework, > >, Assuming you know, C++ >, >, Yeah, All of Windows, Ui is written in C++, >, >, Sure, > >, So there’s some gaps to Close in the end-to-end story, but we want windows, UI To be usable through XAML, Island and.
NET Framework, Apps and.NET Core apps > >, Okay, > >, But a lot of effort’s being put into.NET Core and Carrying things forward and so for right now we were worked, focusing UWP to interlock With.NET Core > >, Okay, Good to know > >. So that’s what I have here: As a.NET Core 3 application, along with the managed 1Rt user control. The other thing I have to mention Here is the manifest file Right now, I’m An unpackaged application and XAML 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 set, the max version tested In that manifest, 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 After letter, we build Here for a second But XAML Islands, usually pops Up a dialogue that says: “ Yeah”, The new version: 18226 Or higher all right, > > Got it > >.
So let’s stop and go Back to our manifest uncomment out that code save and rerun it, Maybe I need to rebuild all > >. Where did you specify > >? I think there’s something cached > >, Okay, > >, But the version I specified is 295 > >. Okay, Then, of course, if somebody tries to run this app On a version less than that they’ll get an error: > > Yeah, the app manifesto will fail to load or Force it to not to load > >, You probably put a check In your code to check before you get that far like on the startup of the app or something > > Well, this isn’t the app manifest, So the OS will actually typically Fail at to load all right, > >, All right, > >! So it’s a similar application.
You can see that I added the acrylic Effect with the XAML Islands going dark and light depending On the background there as well In this example, I just had A pop-up menu or fly out here and I’ve got this similar The textbox here > >, Apparently we need to put Spell-Checking on button texts, > >, Very good, Good catch, >, >, Cool >, > Yeah. So what I’ve Shown you there is the hard way of adding A whole bunch of contacts to your existing Wpf applications or a simpler way by building a UWP control and adding That to your phone >, > Yeah, that seems a Good place to start You’ve built some UI in Uwp app that you want to be able to reuse in your WPF app, It 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, Then you need to be A little bit careful about using some of these Animation effects because it’s going to 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 visual effect, but the top half doesn’t So.
This is some design carefulness you need to do not make It awkward [, inaudible, ], > >, Because obviously some Reusable components as you architect, your app and you can Pick and choose which ones to replace and get some more depth. To your application, more interaction, more focus, To the close of the app, Maybe for simpler forms, replace the whole UI With the music control > > Yeah, you ultimately Decide that you just want the whole UI to be rewritten as a UWP and then just reuse, the code.
Let me get to the point where That’s asked W or demanded W. > > Yeah > > Yeah Cool > >. I did have One more surprise for you: > > Sweet. I love surprises > > Last time. Actually in The first toolbox session we imported an app to.NET Core And then I was showing you, the packaging project work On.NET Core, But when I hit F5 It failed to build and I wasn’t able to truly show it actually.NET 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 we just skipped past it, but I’ve got it up and running now: > >, All right. Let’s see > > What we’ve done! Here in the code is- > > Should, I add a note to That first episode that lets people know towards this episode, or is that like breaking into jail and highlighting the fact That we messed up, I want to think about that > >. That could be We’ll see if they notice and then we can point them.
That, like it, does work here, > > Viewers have noticed mistakes before ourselves. We Give them credit > >, But what I’ve done? Here is, just simply add a packaging projects. To this solution, and if you remember, there’s the application note, it points to my WPF Core 3 application. So if I set this as my startup, it’s 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 that’s going to launch it In debug that application, So this pipeline takes a second but cross your fingers, if I have Set up everything correctly, we will get an application launched, > > There.
It is > > Magic, So you can see from the icon down below That it’s packaged this kit time because I don’t have the right: visual assets, hooked up, >, >, Cool, > >. We have a.NET Core 3, application with XAML Islands running in a package > >, Nice > >, So I could submit This to the store or pass around the MSIX package for side-loading in My enterprise or whatnot > >, Fantastic, All right, cool, >, >, Okay, >, > Cool stuff.
All right, I 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, [, MUSIC, ]
Jimmy's Internet Marketing Business Blog 