{"id":40832,"date":"2021-03-12T06:43:36","date_gmt":"2021-03-11T21:43:36","guid":{"rendered":"https:\/\/jirak.net\/wp\/build-cross-platform-applications-with-winui-and-uno-platform\/"},"modified":"2021-03-12T07:34:34","modified_gmt":"2021-03-11T22:34:34","slug":"build-cross-platform-applications-with-winui-and-uno-platform","status":"publish","type":"post","link":"https:\/\/jirak.net\/wp\/build-cross-platform-applications-with-winui-and-uno-platform\/","title":{"rendered":"Build Cross-Platform applications with WinUI and Uno Platform"},"content":{"rendered":"

Build Cross-Platform applications with WinUI and Uno Platform<\/p>\n

Uno Platform<\/span><\/span><\/span><\/a>\u00a0is a<\/span><\/span>\u00a0free and<\/span><\/span>\u00a0<\/span><\/span>open-source<\/span><\/span>\u00a0platform\u00a0<\/span><\/span>aiming to take\u00a0<\/span>WinUI<\/span>\u00a0applications\u00a0<\/span><\/span>built with C# and XAML\u00a0<\/span><\/span>everywhere<\/span><\/span>.\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n

If you are not familiar with<\/span><\/span>\u00a0<\/span><\/span>WinUI<\/span><\/span>,<\/span><\/span>\u00a0it is the native UX platform for building Windows applications –\u00a0<\/span><\/span>you can learn more about it\u00a0<\/span><\/span>on the\u00a0<\/span><\/span>WinUI website<\/span><\/span><\/a>.<\/span><\/span>\u00a0With Uno Platform you can\u00a0<\/span><\/span>bring your<\/span><\/span>\u00a0<\/span><\/span>WinUI<\/span><\/span>\u00a0<\/span><\/span>applications everywhere<\/span><\/span>\u00a0that<\/span><\/span>\u00a0<\/span><\/span>WinUI<\/span><\/span>\u00a0<\/span><\/span>does not natively run\u00a0<\/span><\/span>\u2013\u00a0<\/span><\/span>Web\/<\/span><\/span>WebAssembly<\/span><\/span>, Linux, macOS,\u00a0<\/span><\/span>iOS<\/span><\/span>,<\/span><\/span>\u00a0and<\/span><\/span>\u00a0Android<\/span><\/span>.<\/span><\/span>\u00a0Uno Platform is Open Source (Apache 2.0) and available on\u00a0<\/span><\/span>GitHub<\/span><\/span><\/a>.<\/span><\/span>\u00a0<\/span><\/p>\n

This\u00a0<\/span><\/span>tutorial<\/span><\/span>\u00a0will walk through<\/span><\/span>\u00a0both<\/span><\/span>\u00a0<\/span><\/span>setting up\u00a0<\/span><\/span>your\u00a0<\/span><\/span>Visual Studio environment<\/span><\/span>\u00a0<\/span><\/span>for\u00a0<\/span><\/span>WinUI<\/span>\u00a0and\u00a0<\/span><\/span>Uno Platform\u00a0<\/span><\/span>development\u00a0<\/span><\/span>as well as<\/span><\/span>\u00a0<\/span><\/span>building a simple same-codebase application<\/span><\/span>\u00a0which\u00a0<\/span><\/span>uses\u00a0<\/span>WinUI<\/span>\u00a0InfoBar control and\u00a0<\/span><\/span>runs on\u00a0<\/span><\/span>Windows,\u00a0<\/span><\/span>WebAssembly<\/span><\/span>\u00a0and<\/span><\/span>\u00a0Android.<\/span><\/span>\u00a0<\/span><\/span>Upon completion\u00a0<\/span><\/span>of this\u00a0<\/span><\/span>5<\/span><\/span>-minute<\/span><\/span>\u00a0tutorial<\/span><\/span>\u00a0your sample application will look like this<\/span><\/span>\u00a0in both \u201clight\u201d and \u201cdark\u201d modes<\/span><\/span>:<\/span><\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Prerequisites<\/h3>\n

If you\u00a0<\/span><\/span>have not<\/span><\/span>\u00a0prepared your dev environment for Uno Platform app development yet, the\u00a0<\/span><\/span>Setting up the Environment page<\/span><\/span><\/a>\u00a0<\/span><\/span>in the\u00a0<\/span><\/span>Uno Platform\u00a0<\/span><\/span>docs<\/span><\/span>\u00a0<\/span><\/span>will<\/span><\/span>\u00a0guide you through installing all the prerequisites.<\/span><\/span>\u00a0<\/span><\/p>\n

Tutorial:\u00a0WinUI\u00a0InfoBar\u00a0running Cross-Platform\u00a0<\/span><\/h3>\n
    \n
  1. Open Visual Studio and click on\u202f<\/span>Create\u00a0<\/span>a\u00a0<\/span>new project<\/span>.<\/span> \"\"<\/span><\/li>\n
  2. Search for the\u202f<\/span>Uno<\/span>\u202ftemplates, select the\u202f<\/span>Cross-Platform App (Uno Platform)<\/span>\u202fthen click\u202f<\/span>Next<\/span>.<\/span> \"\"<\/span><\/li>\n
  3. Name your app\u00a0<\/span>\u2018<\/span>UnoLovesWinUI<\/span>\u2019<\/span>\u00a0then click\u202f<\/span>Next<\/span>.<\/span>\u00a0<\/span><\/li>\n
  4. Once the solution loads, expand the Platforms folder in Solution Explorer and right-click on the UWP project. From there, select\u00a0<\/span>Manage NuGet Packages\u2026<\/span> \"\"<\/span><\/li>\n
  5. Go to \u2018Browse\u2019, s<\/span>earch<\/span><\/span>\u00a0for\u00a0<\/span><\/span>`<\/span><\/span>Microsoft.UI.Xaml<\/span><\/span>` and install the latest stable version.<\/span><\/span>\u00a0<\/span><\/li>\n<\/ol>\n

    The steps above are\u00a0<\/span>used when\u00a0<\/span>using\u00a0<\/span>WinUI\u00a02.<\/span>5<\/span>\u00a0<\/span>and UWP. When using\u00a0WinUI\u00a03,\u00a0<\/span>m<\/span>ake sure\u00a0<\/span>WinUI 3, Preview 4<\/span><\/a>\u00a0or later<\/span>\u00a0is\u00a0<\/span>installed and then\u00a0<\/span>do the following<\/span>:<\/span>\u00a0<\/span><\/p>\n