乘風破浪,基於XAML島(Xaml Islands)喚新WPF和WinForm應用,創建現代化應用體驗


什么是XAML島(Xaml Islands)

簡介

Windows10 1903版開始,可以使用稱為“XAML島(Xaml Islands)”的功能在非UWP桌面應用程序中托管WinRT XAML控件。可以通過此功能來改進現有WPFWindows窗體C++桌面(Win32)應用程序的外觀和功能,並使用只能通過WinRT XAML控件使用的最新Windows10 UI功能。這意味着,可以在現有的WPFWindows窗體C++桌面應用程序中使用UWP功能(例如Windows Ink)和支持Fluent Design System的控件。

image

可以托管派生自Windows.UI.Xaml.UIElement的任何WinRT XAML控件,其中包括:

  • Windows SDKWinUI2.x庫提供的任何第一方WinRT XAML控件。
  • 任何自定義WinRT XAML控件(例如,包含多個可一起使用的WinRT XAML控件的用戶控件)。必須有自定義控件的源代碼,才能通過應用程序對其進行編譯。

從根本上講,XAML島使用UWP XAML托管API創建。此API包含Windows 10版本1903 SDK中引入的幾個Windows運行時類和COM接口。我們還在Windows社區工具包中提供了一組XAML島.NET控件(此工具包在內部使用UWP XAML托管API),並針對WPF和Windows窗體應用提供了更方便的開發體驗。

XAML島(Xaml Islands)的體系結構

image

XAML島具有以下運行時要求

  • Windows 10版本1903或更高版本。
  • 如果你的應用程序未打包到MSIX包中用於部署,則必須在計算機上安裝Visual C++運行時。

反饋問題

基於XAML島(Xaml Islands)喚新WPF應用和WinForm應用

https://github.com/TaylorShi/HelloXamlIslands

創建名為HelloXamlIslands的解決方案

通過Dotnet-Cli創建一個名為HelloXamlIslands的解決方案。

dotnet new sln -o HelloXamlIslands

image

切換到它的目錄中。

cd .\HelloXamlIslands\

創建.Net Core 3.1的WPF應用

通過Dotnet-Cli創建一個.Net Core版本為3.1的Wpf應用,我們叫它demoForWpf3.1吧。

dotnet new wpf -o demoForWpf3.1 -f netcoreapp3.1

image

將其加入HelloXamlIslands解決方案中。

dotnet sln add .\demoForWpf3.1\demoForWpf3.1.csproj

image

切換到它目錄。

 cd .\demoForWpf3.1\

通過Dotnet-CliRun命令來運行它。

dotnet watch run

image

運行效果如圖:

image

添加Microsoft.Toolkit.Wpf控件庫包

dotnet add package Microsoft.Toolkit.Wpf.UI.Controls

https://www.nuget.org/packages/Microsoft.Toolkit.Wpf.UI.Controls

image

創建.Net Core 3.1的WinForm應用

通過Dotnet-Cli創建一個.Net Core版本為3.1的WinForm應用,我們叫它demoForWinform3.1吧。

dotnet new winforms -o demoForWinform3.1 -f netcoreapp3.1

image

將其加入HelloXamlIslands解決方案中。

dotnet sln add .\demoForWinform3.1\demoForWinform3.1.csproj

image

切換到它目錄。

 cd .\demoForWinform3.1\

通過Dotnet-CliRun命令來運行它。

dotnet watch run

image

運行效果如圖:

image

添加Microsoft.Toolkit.Forms控件庫包

dotnet add package Microsoft.Toolkit.Forms.UI.Controls

https://www.nuget.org/packages/Microsoft.Toolkit.Forms.UI.Controls

image

將解決方案配置為面向X86/X64平台

大多數XAML島方案在面向任何CPU的項目中不受支持。

  1. 在“解決方案資源管理器”中,右鍵單擊相應的解決方案節點,選擇“屬性” -> “配置屬性” -> “配置管理器” 。
  2. 在“活動解決方案平台” 下,選擇“新建” 。
  3. 在“新建解決方案平台”對話框中,選擇“x64”或“x86”,並按“確認” 。
  4. 關閉打開的對話框。

創建目標不低於Windows 10 1903的UWP應用

先用Vs2019打開sln文件。

image

在解決方案上右鍵添加,選擇新建項目

image

搜索項目模板關鍵詞UWP,選擇空白應用(通用Windows)模板進行下一步

image

輸入項目名demoForUwp,點擊創建按鈕。

image

項目的最低目標版本需要用Windows10, Version 1903(10.0;版本 18362),至於最高目標版本就默認值吧。

image

點擊確定,完成創建。

image

添加Microsoft.Toolkit.Win32控件庫包

https://www.nuget.org/packages/Microsoft.Toolkit.Win32.UI.XamlApplication

demoForUwp上右鍵,找到管理Nuget程序包選項。

image

搜索關鍵詞Microsoft.Toolkit.Win32.UI.XamlApplication,進行安裝。

image

image

切換到X86或者X64模式,運行一下看看。

image

改造UWP項目,准備Islands

找到demoForUwp項目中的App.xaml文件,雙擊打開它。

<Application
    x:Class="demoForUwp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:demoForUwp">

</Application>

image

App.xaml上述內容替換下:

<xaml:XamlApplication
    x:Class="demoForUwp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost"
    xmlns:local="using:demoForUwp">
</xaml:XamlApplication>

或者簡化為:

<xaml:XamlApplication
    x:Class="demoForUwp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:demoForUwp"
    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost" />

image

然后找到App.xaml.cs,打開它。

image

替換所有內容為:

namespace demoForUwp
{
    public sealed partial class App : Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication
    {
        public App()
        {
            this.Initialize();
        }
    }
}

image

然后刪除掉項目模板自動生成的MainPage.xaml及其MainPage.xaml.cs文件。

image

重新生成一次項目。

image

在WPF項目中引進UWP項目

參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM