原文: WPF 使用 Edge 浏覽器
本文告訴大家如何使用 Windows Community Toolkit 的新控件，在 WPF 使用 Edge 浏覽器
首先需要通過 VisualStudio 建立 WPF 項目。因為 Microsoft.Toolkit.Win32.UI.Controls 庫隻支援 4.6.2 以上，是以需要選擇架構大于 4.6.2
打開 Nuget 安裝 Microsoft.Toolkit.Win32.UI.Controls ，需要同意許可
xmlns:wpf="clr-namespace:Microsoft.Toolkit.Win32.UI.Controls.WPF;assembly=Microsoft.Toolkit.Win32.UI.Controls" <wpf:WebView x:Name="WebView"></wpf:WebView> 在代碼跳轉到我的部落格
public MainWindow()
{
InitializeComponent();
WebView.Navigate("https://lindexi.gitee.io");
} 運作一下軟體
如果不想在 xaml 寫任何的代碼，也可以通過下面代碼添加
public MainWindow()
{
InitializeComponent();
var webView = new WebView();
webView.Navigate("https://lindexi.gitee.io");
Content = webView;
} 優點
- 觸摸非常流暢
- 加載頁面非常快
- 縮放頁面幾乎不使用CPU
- 對于很多圖檔的時候使用記憶體很小
- 可以使用 RenderTransform 修改顯示，但不是所有的變換都可以使用
- 可以進行布局，如下圖，使用Grid分開按鈕
存在的問題
- 吃掉了 Touch 事件、MouseDown事件，也就是吃掉了所有使用者輸入
- 第一次加載無法覆寫控件大小，在修改視窗大小之後才可以
- 設定 IsEnable 無作用
- 設定 IsHitTestVisible 無作用，依然可以響應輸入
- 預設沒有設定 IsManipulationEnable ，但是可以響應手勢
- 能夠使用 snoop 在視覺樹找到 WebView 但是沒有看到 WebView 裡面的元素
無法在 WebView 上面放控件
我嘗試了下面的代碼，雖然設計的界面可以看到按鈕，但是運作界面沒有按鈕
<Grid x:Name="Grid">
<wpf:WebView x:Name="WebView">
<wpf:WebView.RenderTransform>
<RotateTransform x:Name="BupeLesedaicee" Angle="10"></RotateTransform>
</wpf:WebView.RenderTransform>
</wpf:WebView>
<TextBlock Text="林德熙都比"></TextBlock>
<Button Content="确定"
Click="Button_OnClick"></Button>
</Grid> 但是運作的時候就看不到按鈕了，是以存在層級問題，這個問題是在08年就有大神說到的問題。
大概就是如果同時有多個渲染，WPF 、 WinForms 如果兩個繪制的矩形有重疊，那麼重疊部分就不能正常使用。
無論在什麼層級放 WebView ，他的層級都是視窗最高
這個問題參見：
Mitigating Airspace Issues In WPF Applications – Presentation Source一個解決方法是：
chris84948/AirspaceFixer: AirspacePanel fixes all Airspace issues with WPF-hosted Winforms.旋轉
我嘗試使用下面的代碼讓 WebView 旋轉，但是設定值隻能讓他偏移
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="337*"/>
<ColumnDefinition Width="456*"/>
</Grid.ColumnDefinitions>
<wpf:WebView x:Name="WebView" Grid.Column="0" >
<wpf:WebView.RenderTransform>
<RotateTransform x:Name="BupeLesedaicee" Angle="10"></RotateTransform>
</wpf:WebView.RenderTransform>
</wpf:WebView>
<TextBlock Grid.Column="0" Text="lindexi" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Button Content="确定"
Click="Button_OnClick" Grid.Column="1" Margin="10,10,10,10"></Button>
</Grid> 按鈕點選的時候就添加旋轉
private void Button_OnClick(object sender, RoutedEventArgs e)
{
BupeLesedaicee.Angle += 5;
} 添加多個浏覽器
如果在相同矩形區域添加多個浏覽器，在邏輯樹第一個浏覽器顯示在最前
我在代碼打開了我的部落格和
黃騰霄部落格，結果發現我的部落格顯示在前面
<wpf:WebView x:Name="WebView" Grid.Column="0" >
<wpf:WebView.RenderTransform>
<RotateTransform x:Name="BupeLesedaicee" Angle="10"></RotateTransform>
</wpf:WebView.RenderTransform>
</wpf:WebView>
<wpf:WebView Grid.Column="0" Source="https://huangtengxiao.gitee.io/"></wpf:WebView> 我嘗試使用
Panel.ZIndex
但是無法修改順序
最簡單的方法是對比一下原來的浏覽器和新的浏覽器
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="337*" />
<ColumnDefinition Width="456*" />
</Grid.ColumnDefinitions>
<wpf:WebView x:Name="WebView" Grid.Column="0" Source="https://lindexi.gitee.io" />
<WebBrowser Grid.Column="1" Source="https://huangtengxiao.gitee.io/" />
</Grid> 可以看到新的浏覽器還是比以前的好很多
參見：
Windows Community Toolkit 3.0 新功能 在WinForms 和 WPF 使用 UWP 控件 - CSDN部落格 Bringing a modern WebView to your .NET WinForms and WPF Apps - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog我搭建了自己的部落格
https://lindexi.gitee.io/歡迎大家通路，裡面有很多新的部落格。隻有在我看到部落格寫成熟之後才會放在csdn或部落格園，但是一旦釋出了就不再更新
如果在部落格看到有任何不懂的，歡迎交流，我搭建了
dotnet 職業技術學院歡迎大家加入
本作品采用
知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協定進行許可。歡迎轉載、使用、重新釋出，但務必保留文章署名
林德熙(包含連結:
http://blog.csdn.net/lindexi_gd)，不得用于商業目的，基于本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我
聯系。