1、簡介
使用 Windows Presentation Foundation (WPF)，你可以創(chuàng)建適用于 Windows 且具有非凡視覺效果的桌面客戶端應(yīng)用程序。
1.1 WPF簡介
WPF 的核心是一個(gè)與分辨率無關(guān)且基于矢量的呈現(xiàn)引擎，旨在充分利用現(xiàn)代圖形硬件。 WPF 通過一套完善的應(yīng)用程序開發(fā)功能對(duì)該核心進(jìn)行了擴(kuò)展，這些功能包括可擴(kuò)展應(yīng)用程序標(biāo)記語言 (XAML)、控件、數(shù)據(jù)綁定、布局、二維和三維圖形、動(dòng)畫、樣式、模板、文檔、媒體、文本和版式。 WPF 屬于 .NET，因此可以生成整合 .NET API 其他元素的應(yīng)用程序。
Windows Presentation Foundation (WPF) 是一個(gè)可創(chuàng)建桌面客戶端應(yīng)用程序的 UI 框架。 WPF 開發(fā)平臺(tái)支持廣泛的應(yīng)用開發(fā)功能，包括應(yīng)用模型、資源、控件、圖形、布局、數(shù)據(jù)綁定、文檔和安全性。 它是 .NET Framework 的子集，因此，如果你曾經(jīng)使用 ASP.NET 或 Windows 窗體通過 .NET Framework 構(gòu)建應(yīng)用程序，應(yīng)該會(huì)熟悉此編程體驗(yàn)。 WPF 使用 Extensible Application Markup Language (XAML)，為應(yīng)用編程提供聲明性模型。
WPF 為Windows Presentation Foundation的首字母縮寫 ，中文譯為“Windows呈現(xiàn)基礎(chǔ)”，其原來代號(hào)為“Avalon”，因與“我佩服”拼音首字母組合一樣，國內(nèi)有人調(diào)侃地稱之為“我佩服”。由 .NET Framework 3.0 開始引入，與 Windows Communication Foundation及 Windows Workflow Foundation并行為新一代 Windows操作系統(tǒng)以及 WinFX 的三個(gè)重大應(yīng)用程序開發(fā)類庫。
- 對(duì)于WPF最重要的特色，矢量圖的超強(qiáng)支持 。兼容支持2D繪圖，比如矩形、自定義路徑，位圖等。文字顯示的增強(qiáng)，XPS和消鋸齒。三維強(qiáng)大的支持。包括3D控件及事件，與2D及視頻合并打造更立 體效果。漸變、使用高精確的（ARGB）顏色，支持浮點(diǎn)類型的像素坐標(biāo)。這些對(duì)GDI+遠(yuǎn)遠(yuǎn)不及的。
- 靈活、易擴(kuò)展的動(dòng)畫機(jī)制！.Net Framework 3.0類庫提供了強(qiáng)大的基類，只需繼承就可以實(shí)現(xiàn)自定義程序使用繪制。接口設(shè)計(jì)非常直觀，完全面向?qū)ο蟮膶?duì)象模型。使用對(duì)象描述語言XAML。使用開發(fā)工具的可視化編輯。
- 您可以使用任何一種.Net編程語言（C#，VB NET等開發(fā)語言）進(jìn)行開發(fā)。XAML主要針對(duì)界面的可視化控件描述，成生進(jìn)會(huì)分析成.cs或.vb文件，并最后將編譯為CLR中間運(yùn)行語言。
1.2 WPF 體系結(jié)構(gòu)
下圖說明了 WPF 的主要組件。 關(guān)系圖的紅色部分（PresentationFramework、PresentationCore 和 milcore）是 WPF 的主要代碼部分。 在這些組件中，只有一個(gè)是非托管組件 - milcore。 milcore 是以非托管代碼編寫的，目的是實(shí)現(xiàn)與 DirectX 的緊密集成。 WPF 中的所有顯示均通過 DirectX 引擎完成，因此硬件和軟件呈現(xiàn)都很高效。 WPF 還要求對(duì)內(nèi)存和執(zhí)行進(jìn)行精細(xì)控制。 milcore 中的組合引擎受性能影響極大，需要放棄 CLR 的許多優(yōu)點(diǎn)來提高性能。
1.3 WPF入門開發(fā)
-
（1）打開 Visual Studio。在“開始”窗口上，選擇“創(chuàng)建新項(xiàng)目”。
-
（2）在“創(chuàng)建新項(xiàng)目”屏幕上，搜索“WPF”，選擇“WPF 應(yīng)用程序”，然后選擇“下一步” 。
-
（2）打開App.xaml (C#)。
此 XAML 文件定義 WPF 應(yīng)用程序以及任意應(yīng)用程序資源。 還可以使用此文件指定在應(yīng)用程序啟動(dòng)時(shí)自動(dòng)顯示的 UI（在本例中是 MainWindow.xaml）。
在 C# 中如下所示：
- （3）打開 MainWindow.xaml。
此 XAML 文件是應(yīng)用程序的主窗口，顯示在頁面中創(chuàng)建的內(nèi)容。 Window 類定義窗口屬性（例如標(biāo)題、大小或圖標(biāo)），并處理事件（例如關(guān)閉或隱藏）。
- （4）設(shè)計(jì)用戶界面
將三種類型的控件添加到此應(yīng)用程序：一個(gè) TextBlock 控件、兩個(gè) RadioButton 控件和一個(gè) Button 控件。
在“工具箱”中，找到相應(yīng)控件。
- （5）修改XAML 代碼
在 XAML 中將HelloButton 和 GoodbyeButton 的“內(nèi)容”屬性更新為 “Hello” 和 “Goodbye”。
- （6）按鈕添加事件
用戶選擇單選按鈕，再選擇按鈕Button之后，會(huì)顯示一個(gè)消息框。 選擇 Hello 將顯示一個(gè)消息框，選擇 Goodbye 將顯示另一個(gè)。 若要?jiǎng)?chuàng)建此行為，請(qǐng)將代碼添加到 MainWindow.xaml.cs 中的 Button_Click 事件。
using System.Windows;
namespace WpfApp1
{
/// <summary>
/// MainWindow.xaml 的交互邏輯
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
if (HelloButton.IsChecked == true)
{
MessageBox.Show("Hello.");
}
else if (GoodbyeButton.IsChecked == true)
{
MessageBox.Show("Goodbye.");
}
}
}
}
啟動(dòng)調(diào)試程序 （按“F5”）。 你現(xiàn)在應(yīng)該可以看到應(yīng)用程序的 MainWindow窗口。
- （7）添加窗口背景
<Grid.Background>
<ImageBrush ImageSource="piper-banner.jpg"/>
</Grid.Background>
添加代碼位置如下：
圖片資源的存放位置如下：
修改圖片對(duì)象的屬性：
將圖片對(duì)象的屬性的生成操作改為：Resource
再次啟動(dòng)調(diào)試程序 （按“F5”）。 你現(xiàn)在應(yīng)該可以看到應(yīng)用程序的 MainWindow窗口。
2、WebBrowser
2.1 WebBrowser特點(diǎn)
WebBrowser控件內(nèi)部使用IE的引擎，因此使用WebBrowser我們必須安裝IE瀏覽器。
WebBrowser使用的是IE內(nèi)核，許多H5新特性都不支持，然后使用谷歌內(nèi)核和火狐內(nèi)核會(huì)使軟件的體積增加至幾十MB。
WebBrowser 控件為 WebBrowser ActiveX 控件提供了托管包裝器。 托管包裝器可在 Windows 窗體客戶端應(yīng)用程序中顯示網(wǎng)頁。 你可以使用 WebBrowser 控件在應(yīng)用程序中復(fù)制 Internet Explorer Web 瀏覽功能，也可以禁用默認(rèn) Internet Explorer 功能并將該控件用作簡單的 HTML 文檔查看器。
WPF 帶有一個(gè)隨時(shí)可用的 WebBrowser控件，它允許您在應(yīng)用程序中托管一個(gè)完整的 Web 瀏覽器。WebBrowser 控件實(shí)際上只是 Internet Explorer 的 ActiveX 版本的外殼，但由于它是 Windows 的集成部分，因此您的應(yīng)用程序應(yīng)該可以在所有 Windows 機(jī)器上運(yùn)行，而無需安裝其他組件。
2.2 WebBrowser常用的屬性、方法和事件
The WebBrowser control provides the following capabilities:
- Navigation: Source, Navigate, NavigateToStream, NavigateToString, and Refresh.
- Navigation Lifetime: Navigating, Navigated, and LoadCompleted.
- Navigation Journaling: CanGoBack, GoBack, CanGoForward, and GoForward.
- WPF/HTML Interoperability: InvokeScript and ObjectForScripting, and Document.
2.3 入門例子
-
（1）方法1：直接在XAML代碼中使用webBrowser控件：
-
（2）方法2：通過工具箱的webBrowser控件添加實(shí)現(xiàn)：
打開工具箱窗口：
找到webBrowser控件:
將webBrowser控件拖拽到窗口MainWindow上：
修改webBrowser控件的網(wǎng)址屬性Source：
<WebBrowser HorizontalAlignment="Left" Height="207" Margin="71,87,0,0" VerticalAlignment="Top" Width="629" Source="https://cn.bing.com/search?q=java"/>
直接編譯運(yùn)行：
添加一個(gè)文本框和一個(gè)按鈕，進(jìn)行網(wǎng)址瀏覽切換。
修改XAML代碼如下：
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="addressTextBox" Width="200" />
<Button Click="goNavigateButton_Click">Go</Button>
</StackPanel>
<WebBrowser x:Name="webBrowser1" HorizontalAlignment="Left" Height="339" Margin="10,10,0,-0.333" VerticalAlignment="Top" Width="773" Source="https://cn.bing.com/search?q=python"/>
</StackPanel>
修改按鈕的鼠標(biāo)點(diǎn)擊事件：
private void goNavigateButton_Click(object sender, RoutedEventArgs e)
{
// Get URI to navigate to
Uri uri = new Uri(this.addressTextBox.Text, UriKind.RelativeOrAbsolute);
// Only absolute URIs can be navigated to
if (!uri.IsAbsoluteUri)
{
MessageBox.Show("The Address URI must be absolute. For example, 'http://www.microsoft.com'");
return;
}
// Navigate to the desired URL by calling the .Navigate method
this.webBrowser1.Navigate(uri);
}
2.4 echarts例子
-
（1）從echarts官網(wǎng)下載echarts.js
-
（2）編寫網(wǎng)頁文件index.html:
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
<title>ECharts</title>
</head>
<body>
<h1>愛看書的小沐測試</h1>
<div id="main" style="width:1000px;height:300px;" />
<script src="echarts.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option);
</script>
</body>
</html>
- （3）在上面wpf入門例子的基礎(chǔ)上，MainWindow.xaml.cs添加代碼：
using System;
using System.Windows;
using System.IO;
namespace WpfApp1
{
/// <summary>
/// MainWindow.xaml 的交互邏輯
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.webBrowser1.Navigate(new Uri(Directory.GetCurrentDirectory() + "/index.html"));
}
}
}
- （4）將echarts.js和index.html文件放在工程的輸出文件夾下：
- （5）運(yùn)行程序，如下：
當(dāng)然WebBrowser初始的過程，也可以寫在其他地方。在Windows標(biāo)記中我們需要一個(gè)Load事件用于讓W(xué)ebBrowser跳轉(zhuǎn)到相應(yīng)的頁面。
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="454.837" Width="1009.365" Loaded="Window_Loaded">
再在MainWindow.xaml.cs添加代碼：
private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.webBrowser1.Navigate(new Uri(Directory.GetCurrentDirectory() + "/index.html"));
}
再增加一個(gè)例子，修改index.html，如下：
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
<title>ECharts</title>
</head>
<body>
<h1>愛看書的小沐測試</h1>
<div id="main" style="width:1000px;height:300px;" />
<script src="echarts.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series: [
{
name: '訪問來源',
type: 'pie', // 設(shè)置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。
data: [ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值
{ value: 235, name: '視頻廣告' },
{ value: 274, name: '聯(lián)盟廣告' },
{ value: 310, name: '郵件營銷' },
{ value: 335, name: '直接訪問' },
{ value: 400, name: '搜索引擎' }
]
}
]
})
</script>
</body>
</html>
3、WebView2
3.1 WebView2簡介
Microsoft Edge WebView2 控件允許在本機(jī)應(yīng)用中嵌入 web 技術(shù)(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作為繪制引擎，以在本機(jī)應(yīng)用中顯示 web 內(nèi)容。
- Web 生態(tài)系統(tǒng)和技能集。 利用 web 生態(tài)系統(tǒng)中存在的整個(gè) web 平臺(tái)、庫、工具以及人才。
- 快速創(chuàng)新。 Web 開發(fā)允許快速部署和迭代。
- Windows 10和 11 支持。 支持跨Windows 10和Windows 11提供一致的用戶體驗(yàn)。
- 本機(jī)功能。 訪問完整的本機(jī) API 集。
- 代碼共享。 向代碼庫添加 web 代碼可以增加跨多個(gè)平臺(tái)的重用。
- Microsoft 支持。 Microsoft 在受支持的平臺(tái)上提供支持并添加新功能請(qǐng)求。
- 常青分布。 依賴帶有定期平臺(tái)更新和安全修補(bǔ)的最新版 Chromium。
- 已修復(fù)版本分布。 也可以在應(yīng)用中打包特定版本的 Chromium 位。
- 增量采用。 逐步將 web 組件添加到應(yīng)用。
3.2 WebView2接口
CoreWebView2Environment (或等效接口的 、 CoreWebView2Controller和 CoreWebView2 類) 協(xié)同工作，以便應(yīng)用可以托管 WebView2 瀏覽器控件并訪問其瀏覽器功能。 這三個(gè)大類公開了各種 API，主機(jī)應(yīng)用可以訪問這些 API，從而為用戶提供許多與瀏覽器相關(guān)的功能類別。
- 類 CoreWebView2Environment 表示一組 WebView2 控件，這些控件共享相同的 WebView2 瀏覽器進(jìn)程、用戶數(shù)據(jù)文件夾和呈現(xiàn)器進(jìn)程。 在此類CoreWebView2Environment中，將創(chuàng)建 和 CoreWebView2 實(shí)例對(duì)CoreWebView2Controller。
- 類 CoreWebView2Controller 負(fù)責(zé)與托管相關(guān)的功能，例如窗口焦點(diǎn)、可見性、大小和輸入，應(yīng)用在其中托管 WebView2 控件。
- 類 CoreWebView2 適用于 WebView2 控件的特定于 Web 的部分，包括網(wǎng)絡(luò)、導(dǎo)航、腳本以及分析和呈現(xiàn) HTML。
3.3 入門例子
使用 WPF 應(yīng)用程序或 WPF 應(yīng)用 (.NET Framework) 項(xiàng)目模板創(chuàng)建 WPF 應(yīng)用，然后為項(xiàng)目安裝 WebView2 SDK 以添加 WebView2。
單擊標(biāo)題為 WPF 應(yīng)用 (.NET Framework) 的項(xiàng)目模板，并在客戶端應(yīng)用程序Windows Presentation Foundation說明文本：
安裝Microsoft.Web.WebView2程序包
Install-Package Microsoft.Web.WebView2
當(dāng)前工程文件夾里增加了如下文件：
當(dāng)前工程的引用中增加了如下：
添加名字空間：
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
添加控件：
<wv2:WebView2 Name="webView" Source="https://tianfang.cnblogs.com"/>
文件MainWindow.xaml.cs添加代碼：
using Microsoft.Web.WebView2.Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
namespace WpfWebView2
{
/// <summary>
/// MainWindow.xaml 的交互邏輯
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
//WebView2 webView21 = new WebView2();
private async void MainWindow_OnLoaded(object sender, EventArgs e)
{
// webView21.Dock = DockStyle.Fill;
// this.Controls.Add(webView21);
webView21.Source = new Uri("http://www.baidu.com");
await webView21.EnsureCoreWebView2Async();
webView21.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;
}
private void CoreWebView2_NewWindowRequested(object sender,CoreWebView2NewWindowRequestedEventArgs e)
{
e.NewWindow = (CoreWebView2)sender;
//e.Handled = true;
}
}
}
運(yùn)行之后：
4、CefSharp
4.1 CefSharp簡介
一個(gè)開源的瀏覽器包CefSharp，它支持Winform和WPF，內(nèi)嵌了Chrome瀏覽器組件并且有比較詳細(xì)的說明文檔。
CefSharp允許您在.NET應(yīng)用程序中嵌入Chromium。它是圍繞Marshall A. Greenblatt的Chromium Embedded Framework（CEF）的輕量級(jí).NET包裝器。大約 30% 的綁定是用 C++/CLI 編寫的，這里的大部分代碼都是 C#。它可以從 C# 或 VB 或任何其他 CLR 語言使用。CefSharp 提供 WPF 和 WinForms Web 瀏覽器控件實(shí)現(xiàn)。
4.2 CefSharp安裝
通過Nuget安裝，右擊項(xiàng)目 -> 管理Nuget程序包 -> 在打開的界面中搜索CefSharp，依次安裝 CefSharp.Common和 CefSharp.Wpf ，至于 cef.redist.x64和 cef.redist.x86會(huì)自動(dòng)安裝。
使用時(shí)可以直接在xaml文件中直接添加ChromiumWebBrowser控件，不過ChromiumWebBrowser控件特別消耗內(nèi)存，所以代碼里動(dòng)態(tài)添加也是一種不錯(cuò)的選擇。
4.3 入門例子
MainWindow.xaml中修改如下：
<Window x:Class="WpfCefSharp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfCefSharp"
xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid x:Name="ctrlBrowerGrid">
<wpf:ChromiumWebBrowser x:Name="myWebCtl"/>
</Grid>
</Window>
MainWindow.xaml.cs文件中操作控件訪問網(wǎng)址：
using CefSharp;
using System.Windows;
//Predefined type 'System.ValueTuple′2′ is not defined or imported
//如果要定位到.NET 4.6.1或更低版本或.NET Core，則需要安裝NuGet軟件包System.ValueTuple：
//Install-Package “System.ValueTuple”
namespace WpfCefSharp
{
/// <summary>
/// MainWindow.xaml 的交互邏輯
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//
//靜態(tài)添加和操作控件：
myWebCtl.Load("www.baidu.com");
}
}
}
運(yùn)行如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-772715.html
結(jié)語
如果您覺得該方法或代碼有一點(diǎn)點(diǎn)用處，可以給作者點(diǎn)個(gè)贊，或打賞杯咖啡；╮(￣▽￣)╭如果您感覺方法或代碼不咋地//(ㄒoㄒ)//，就在評(píng)論處留言，作者繼續(xù)改進(jìn)；o_O???如果您需要相關(guān)功能的代碼定制化開發(fā)，可以留言私信作者；(????)感謝各位大佬童鞋們的支持！( ′ ▽′ )? ( ′ ▽′)っ?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-772715.html
到了這里，關(guān)于【小沐學(xué)C#】WPF中嵌入web網(wǎng)頁控件（WebBrowser、WebView2、CefSharp）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
