 Yeah, that's right. Thank you, James. Hello, everybody. Thank you all for joining me today. Let me introduce myself. My name is Athanas Popotanasov, and I'm currently working as a software engineer for the Lyric Progress, a company that is well-known among the developers for the beautiful and future-rich controls you can use for building your.NET or JavaScript application. Currently, I'm part of the Xamarin and Universal Windows Platform team, and previously I worked for the Windows Presentation Foundation team. Today, we have a lot of stuff to talk about, so should we switch to my PowerPoint presentation and start with the real work? Okay. Today, I'm going to talk about how you can easily enhance your existing DAO-PF or reinforcement application using features provided by the Universal Windows Platform. Yeah. Just a second. Should I press the close button? Okay. Everything is good now, I believe. Okay. I'm going to talk about how you can easily enhance your DAO-PF or reinforcement application using features provided by the Windows 10. For all my demonstrations, only Visual Studio 2017 is needed, and of course, some basic knowledge of DAO-PF and UDAO-P. Then I'm going to present today it's only the DAO-PF application that I'm going to enhance with UDAO-P feature, but you can easily take all the stuff I'm going to show you and use it for your web-forms application as well. I'm going to talk about the options nowadays you have as a .NET developer for enhancing your existing code base. I'm going to mention some stuff about the desktop bridge and how you can call an API from your existing DAO-PF app. Next, I'm going to talk about a few things that UDAO-P gives you more than DAO-PF, some features that UDAO-P only has comparing it to DAO-PF. Next, I'm going to show you a demo, how you can easily call an API from within a DAO-PF application. After that, I'm going to share you some stuff about the desktop bridge and how it is connected with the API that you need to call from DAO-PF. Of course, desktop bridge provides some more functionality, but I'll talk in a few minutes about this. Next, I'm going to show how can you easily extend your DAO-PF application. Here, I will call a pure UDAO-P app from the DAO-PF application, and after that, I'm going to make a connection between them so they can share information. Finally, I'm going to talk about the demo islands that were introduced a few months ago at Google and I hope you will join everything I'm going to show you today. Nowadays, it's very exciting to be a desktop developer. You have many options for building desktop applications like DAO-PF, WinForms, and UDAO-P. UDAO-P, however, has some APIs and features that are specific for that framework. They could easily be called, let's say, that from the DAO-PF or WinForms application. The simplest way is by adding a simple reference and just calling your API. However, sometimes you might need to have some notion of identity for your app. That identity is provided by the desktop bridge. The desktop bridge also provides the ability to easily distribute your app to the Windows Store, and people could easily download it from there. Finally, the last thing is the demo islands that were introduced a few months ago. Basically, using the demo islands, you can call pure UDAO-P control directly from your DAO-PF or WinForms application. UDAO-P has some features that, for example, DAO-PF or WinForms does not have. One of them is the modern look and feel. At built 2017, the current design was introduced, and it was actually built using some of the UDAO-P APIs and more specifically, the composition API. Another more features that provides UDAO-P comparing to DAO-PF is the engagement experience you have. For example, here, this is the push notification, wipe tiles, and those notification. Of course, the improved servicing, the improved servicing often overlooked, but see the benefits of packaging your app for use of deployment and servicing. This provided by the desktop bridge. Using it, you can package your application and put it to the Windows Store. The store itself provides the servicing options, and these options are, for example, paying some money for unlocking a feature in your application. Using the store, you can easily deploy your new version as well of your application, and this could easily be sent to the people in that heavy instance on their machine. Before you decide to call a Windows 10 API, I suggest you to check if that API or functionality exists in the API or WinForms world. When you decide which API you need from the Windows 10, I suggest you to check the reference API contracts. The reference API contracts gives you information about the version in which the API was introduced, the version of Windows, and what reference you need to have. For example, the API contract here is Windows Foundation Universal API contract, and after you found your API, that's needed for your application, you simply need to call it. Okay, I'm now going to show you a demonstration how this could easily be achieved. Here, I have a very simple DAW API application. Basically, it visualizes some data, and more specifically, orders. Just a second, here we go. In the left side, we can see a data grid with some information, and on the right side, there are some UI that using it, you can perform some brute operation with the information that is in the data grid. For example, I can easily now delete order, or make some change and save it. It looks good, but if you look it, there is something that I'm really missing, and this is some notification when all these operations are performed. For example, to show some, those notification, for example, that gives me information about the specific order that has been updated or deleted. And that functionality is part of the UWP. Now I'm going to add a reference to it and call it from the DAW API application. For that purpose, we need to add some references. We're going to the Windows Kit folder, and first, we're going to add a reference of the Windows WinMD file. After that, as I mentioned, the API contract is very important, so you could call your API from within the API application, and for the TOS notification, I need the following APIs. First, second, really hard to find here. Okay, first is the Windows Foundation Universal API contract, and we need to add TOS on another reference. This is the Foundation Foundation contract. After adding these references, we need to call the copy local. We need to set the copy local to false. Okay, that's good. And now, in my code behind, I'm going to un-comments this code. Here, what I'm doing is I'm creating a string that represents an XML file. After that, I'm passing this string to the XML document, creating an instance of it. Then I'm passing that instance to the TOS notification. This is an API that is specific for Windows 10. As you can see, I'm adding to using for Windows UI notifications, namespace that's part of the UWP APIs. And after that, I'm only showing it. That method is called from two places. The place where I'm deleting the mentioned orders and the place where I'm saving. Second, I have some problem here. I'll try to start it. Nope, okay. I believe some of the references have a common API between them. And that prevents me from calling the class. Just second, I will delete them and try to add them again. This is the Foundation contract. Now the app contract. Not expected, actually to happen. Let me just try a few things. Okay, I will delete the Foundation app contract for now and try only with the university app. Okay, I'll just show you what the final result should look like and we'll continue with the other stuff that I'm going to show you. Okay, this is the applications, the application. And now after performing some of the mentioned operation, I believe a toss notification should be visualized. Okay, I'll perform a delete operation. Wow, I don't know what's happening guys. And it's not found. This is totally not expected. The application is a little bit complicated when calling this API. So, okay, I believe now everything should be good. Now I'm deleting the order. I just turned off my notifications and you can see it right here now. It's mentioning that the order is deleted and the order is updated. Okay, I'll try again with some other stuff, for example. And you can see that the specific order has been updated. Windows 10 provides also some cool APIs like speech recognizing. And I'm going to show you how you can easily call that API from within your DAO-PF app for that purpose. You need to do the following thing. Create a speech recognizer instance. And the speech recognizer instance will open a window that's basically waits you for you to tell something to the microphone. After you speak to it, the result will be handled here. And using some custom logic, you can perform some operation. For the specific application, you get add order, delete order, or for example, save the order. And because I have some problems with that basic app, I'm going to show you to the final one, starting it again. Okay, this is the button that on click will open the mentioned window. And through the microphone, I will pronounce some comments and I believe it will be executed. All right, okay, I'm selecting on order and I'm going to delete it. Delete order. And the order has been deleted. Notification has been sent again to me, as you can see. And I believe everything is good. All right, these APIs are part of the APIs that could not be called directly from the OPF. You need to have some notion of identity. That notion of identity is actually provided by the desktop bridge. As mentioned before, the desktop bridge does not only provide you ability to call a specific API, like the TOS notification, it also gives the ability to package your WPF or Windows form application inside an Apex package. And after that, you can easily deploy that package to the Windows store. Of course, as I mentioned, it also provides some servicing options. You have two options to use the desktop bridge. One of them is using the desktop app converter, which is basically a console app that helps you package your WPF or Windows form app inside an Apex package. However, there is an easy option. And I'm going to show it to you. It is by simply adding new project and this is the Windows application packaging project. The packaging project basically gives you an app manifest and some certificate. And inside the app manifest, you can see the specific name you have and package a family name, display name, and et cetera. So in order to code the APIs, I showed you a few minutes ago, you simply need to add reference to the WPF application, oops, sorry. And make the project a startup one. And basically, when we run the project, it packages our WPF app into an Apex project. Great. Okay, if there isn't an API that you can use and directly code from your WPF application, then you need to do some more work and not only enhance your application, but also extend it. The extension is basically calling your WP application from within your WPF app and doing some stuff with it. There is some trick stuff here to make the both application communicate between each other. And I'm going to show you how you can achieve that using the Windows runtime component. First, we need to add the UWP application. Inside that application, I'm actually going to visualize one specific control for UWP, this is the map control. The control helps me to pick easily a location for my order. I'm now going to copy the definition of the Zamo definition of the control because it's a little bit complicated one. Adding the needed choosing for the map control. I need to implement some code behind here as well. Before doing that, let's see what you're having here. Okay, we have a WPF application that is set as a reference to the package project. And now I have created the UWP app. That app needs to be added to the package as well. After writing it, I'm going to implement the functionality from the UWPF part. Here, basically, I'm going to pass the address of the order that is a string. I'm going to use that string, create a basic deal position that's, again, an API from the Windows 10. Pass that deal position to the deal point and call the map application finder by passing it the string. And it should return me the latitude and longitude of that address. After that, I'm going to create a URL. And launch it. That URL is very specific because here you can see there is some specific name. This should be the name of the protocol we're going now to add inside the UWP application and needs to be specific and type very carefully because if there is some typo, the application won't run. Okay, that protocol is actually added inside the app manifest. Inside the decorations, you're looking for protocol and simply adding it. After that, you need to write down the application's name as an executable and the entry point. The entry point is actually my AppZamo.cs file. Okay, great. After calling the API from the .app application, it will call the AppZamo.cs file of the UWP app. And inside it, we need to do some work as well. It won't call the on-launch method that is creating the root frame and passing it as a content to the current window. And we should overwrite the onactivated method. Here, we need to perform the following code. From the arguments, we are checking if the activation is coming from a protocol, taking the protocol arcs and checking if the URI schema is netconf fun. Again, this is very important because this is the string we are passing into the URI here. And after that, I'm creating a frame, passing it as a content to the window, navigating to the main page and activating the window. Inside the window part, we already have a map control. However, we need to add some logic for that map control. Because of that, we are going to handle the on-navigate-to method. Inside it, I'm going to implement the following logic. Second, that's my favorite kind of programming of passing. Okay, great. Now I need to add some using statements. Okay, I believe everything is good. Okay, on-navigate-to, I'm going to take the past arguments to the URI object. Here, I was giving the address as a string to the map application finder. And the map application finder returned me the address as latitude and latitude. And I passed that latitude and latitude to the URI. And that information I'm actually taking right here. After that, I'm creating a basic goal position that's specific API for the map, and passing it to its center property. So when I open my map, actually it will be centered to the latitude and latitude I have passed to it. After that, I'm creating a needle so the address could easily be seen. And I believe that's all. I'm now going to show you the final result how it should look like. Selecting an order, and this is a button that I'm actually using for calling the comment from the DAO-PF application. As you can remember, the comment takes the string and turns it into a less-shoot-like-shoot and calls the UDAO-P application, okay? Now, as you can see, this is my UWP app with the address that is centered to my map. And we need to add some more details now for picking another address, for example, and basically passing it to the DAO-PF application as well. How we can do this? First, on the mapped-up event, we need to change the needle that is visualizing on our map, taking the new location from the map, passing it again to the map finder. And that address, I'm going to save again a string. In a few minutes, you'll see how I will pass that address back to the DAO-PF application. And of course, changing the needle. Okay, now, the communication between the DAO-PF and the UWP app is a little bit quick. I'm going to show you how you can establish it using the Windows Runtime Component project. Okay, I don't need this. Inside the Windows Runtime Component, I'm going to implement a very basic service that I'm going to start from the UWP app. Okay, this is the service. Let's take a look at it. Okay, I'm implementing the I background task interface, which provides the run method. From the run method, I'm attaching to the request receive event. So basically, when the UWP app sends a message to the DAO-PF application, the message should be received here. And using some information that the message is providing, I will find the specific ID that I'm going to pass from the DAO-PF connection, and simply send that message to the DAO-PF application. Okay, going back to the DAO-PF application to implement the wording there as well. Here it's a little bit complicated, so I need to do this copy paste programming. Okay, let me show you the app service here from the DAO-PF part. Basically, I'm creating an app service connection, passing app service name, which again, you should notice that each specific one. I will show in a few minutes where we are going to add this name. Set the package family name. This is also very important. You can find it inside the package app manifest. This is the package family name. And we should pass the one of the UWP app because the UWP app will first start the connection, and after that the DAO-PF app will connect to the same connection. Okay, after that, I'm again handling the request received event. So when a message is received from the service, for example, when UWP sends the address, here I will handle it, and basically pass it to the ViewModel class. Inside the ViewModel class, I'm creating a instance of the DAO-P service. And when I'm opening the application, UWP-1, I'm creating a instance of that DAO-P service. Using some actions, I'm going to handle the message that is received from the UWP here, and basically start the connection. Now I need to start the same connection from the UWP app. That connection is almost the same, sorry. Again, I'm creating a instance of the DAO-P service connection, passing again the DAO-P service name, package family name, and basically establish a connection to the service. And after that, I'm passing a message to the service. As you can see here, this is a specific field that I'm actually taking here from the unnavigated to. That field is passed to the UWP app from the DAO-PF app. Here, I'm not only passing the latitude and latitude, but also the specific connection ID. This is the connection ID of the DAO-PF application. And I'm taking this ID here on unnavigated to and saving it into field. And using, and after that, I'm using that field to send a message to the DAO-P service. This is the DAO-P application that has the specific connection ID. And basically, after that, I'm closing the window. As I mentioned, the service name is very, very specific. And again, we need to add a protocol inside our application. This protocol is app service one. And here, we need to do some additional stuff comparing to the other protocol. So I will go to the cost stuff of the app manifest. Okay. What is specific here is that we need to pass the support multiple instances property and set it to false. Why this is very important, because if it is true, after the UWP establish a connection to the service, an instance will be created to that service. After that, the DAO-PF application will connect and create another instance. And we will be having two instances of the same service. And they won't work together in a pair. So we need to set the support multiple instances to false. Here, you need also to add that namespace. And now I'm going to show you again the final product. Here is my DAO-PF application. I'm now opening the UWP one. The UWP application cause it's on navigate to method. I'm taking the connection ID that is passed by the URI from the DAO-PF app saving it into a field. And basically now when I click this icon here, I will establish a connection to the app service. And pass the address that is currently on the map to the DAO-PF application. The DAO-PF application on each site is going to receive that message here. And we'll basically call the message received action. That action is implemented inside the view model here. And basically we'll set the property address of the current agent order to the new one that is passed by the UWP app. After that, I will save the orders and auto-identification should be visualized. Okay, I will pick another address. And as you can see here is Pennsylvania Avenue, Washington. And after clicking save, I think it happens. These are the risks of the live demo. Well, currently you need to believe me that the address should be updated. I don't know what is now the problem, but yeah, that's basically the stuff you need to know about the establishing connection between the two applications. Okay, and now I'm going to talk about the XAML I1s. The XAML I1s is something very interesting that was released a few months ago. Not released, but introduced at BUILD 2018 this year at BUILD and using XAML I1s, you can basically call directly from your UWP control. That gives you the ability to enhance the look and feel of your UWP application using features like the one I mentioned a few minutes ago, the phone design. Also, the team behind the XAML I1s provides you already wrapped native UWP controls that you can use directly now. And one of these control is the web view. And the guys that are behind XAML I1s are the Windows Community Toolkit. They are providing a new kit package that you can install right now. For example, for the UWP application, you need to install the Microsoft Toolkit WIFUI XAML Host package, but here you need to know that a latest version of Windows is needed, not the official one, but the insider preview build because the XAML Host package is using some APIs that are only available in the preview version of Windows. And because of that, I can now show only a video of how you can use that XAML Host in your site because I don't have the preview version here on my machine. Okay, now I've played the video and explained the steps you need to perform. Okay, we are creating a UWP application and that application should target .NET Framework 4.7.2. Again, this is needed because some APIs that are part of the XAML Host are needed and are part of that specific framework. Okay, after creating the application, you need to install the mentioned XAML Host package. Now I'm declaring into my UWP application a Windows XAML Host. The Windows XAML Host is a specific type of, let me say, control for UWPF that is basically hosting the UWP control. You need to set the initial type name to the control you want to visualize. Now I'm going to visualize the map control that in my previous demonstration, I was visualizing using a UWP application and it was pretty complicated because you need to instantiate a new application and call it from the UWPF app. Now, using the XAML Islands, you can call that map directly from the UWPF app. I'm handling the CloudChanged event as well. What gives me that event is... Oh yeah, again, I need to add the mentioned APIs that failed me at the beginning of my presentation. Okay, inside the CloudChanged, I'm going to take the map control and, of course, here you can take any control you have past as a type. I believe that type is... using that type, the control is created using a reflection and after that, here you can, for example, set some of its properties and initialize it. The map control is very specific control because it needs to have a specific token that needs to be passed to it in order to be able to use the maps provided by Bing and here I'm taking the instance of the map control and actually setting that map service token. That was specifically generated for this application. Okay, I'm starting the app now and in a few seconds, you will see pure UWPF application that is calling and creating a native UWP map. I believe that's all. Sorry again for the technical problems we have at the beginning of the session. I hope you were able to understand the stuff I have just shown you and if you have any questions, now's the time. I hope I'll be able to answer them. It's totally the somehow I want one because as I have demonstrated earlier, in order to be able to call the map control, I need to make a UWP application and call it from within the UWPF one and using the sound islands, this is no longer needed. You can simply create an instance of a pure native UWP control and call it from your UWP application and of course, using some of the stuff provided by the Zamo host, you can get the instance of that control and play with it as you want. So yeah, totally the sound islands.