?XAML 創建瀏覽器應用程序

XAML 創建瀏覽器應用程序

作者：WPFDevelopersOrg - 驚鏵

原文鏈接：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/app-development/wpf-xaml-browser-applications-overview?view=netframeworkdesktop-4.8

• 框架使用.NET40；

• Visual Studio 2019;

• 什么是XBAP ?

  • XBAP是應用于瀏覽器中的應用程序。

  • 與WPF的不同點如下。

  • 它是運用于瀏覽器窗口中。

  • 同通常具有優先的權限。

  • 它不需要安裝。

  • 也就是把它緩存到計算機當中。不會提示安裝警告，更新也是如此。

  • 但XBAP要受到安全模型的限制。

• XBAP的運行要求有哪些?

  • IE6及以上的版本。

  • Firefox（火狐）2及以上版本。

  • 將 XBAP 部署到 Web 服務器，例如 Microsoft Internet Information Services (IIS) 5.0 或更高版本。不需要在 Web 服務器上安裝 .NET Framework，但是需要注冊 WPF 多用途 Internet 郵件擴展 (MIME) 類型和文件擴展名。

1）新建 WPF瀏覽器應用(.NET Framework) 如下圖，創建完成會默認生成一個Page1.xaml 。

👇

2）修改Page1.xaml的代碼如下

<Page?x:Class="WpfBrowserAppSample.Page1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"?xmlns:d="http://schemas.microsoft.com/expression/blend/2008"?xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"xmlns:local="clr-namespace:WpfBrowserAppSample"mc:Ignorable="d"?d:DesignHeight="450"?d:DesignWidth="800"Title="WpfBrowserAppSample?-?Page"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition?Width="Auto"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition?Height="40"/><RowDefinition/><RowDefinition?Height="40"/></Grid.RowDefinitions><TextBox?wpfdev:ElementHelper.IsWatermark="True"wpfdev:ElementHelper.Watermark="請輸入內容"/><Button?Grid.Column="1"?Style="{StaticResource?PrimaryButton}"?Content="確定"/><DataGrid?Grid.Row="1"?Grid.ColumnSpan="2"Margin="0,10"AutoGenerateColumns="False"?ItemsSource="{Binding?UserCollection,RelativeSource={RelativeSource?AncestorType=local:Page1}}"><DataGrid.Columns><DataGridTextColumn?Header="Date"?Binding="{Binding?Date}"?IsReadOnly="True"/><DataGridTextColumn?Header="Name"?Binding="{Binding?Name}"?IsReadOnly="True"/><DataGridTextColumn?Header="Address"?Binding="{Binding?Address}"?IsReadOnly="True"/></DataGrid.Columns></DataGrid><StatusBar?Grid.Row="2"?Background="{StaticResource?WindowBorderBrushSolidColorBrush}"Foreground="White"Grid.ColumnSpan="2"><StatusBarItem>??WPFDevelopersOrg</StatusBarItem><Separator?Background="White"?Margin="10,10"/><StatusBarItem?x:Name="VersionNumber"?>V?1.0</StatusBarItem></StatusBar></Grid>
</Page>

• Page1.xaml.cs的代碼如下

using?System;
using?System.Collections.Generic;
using?System.Collections.ObjectModel;
using?System.Linq;
using?System.Text;
using?System.Threading.Tasks;
using?System.Windows;
using?System.Windows.Controls;
using?System.Windows.Data;
using?System.Windows.Documents;
using?System.Windows.Input;
using?System.Windows.Media;
using?System.Windows.Media.Imaging;
using?System.Windows.Navigation;
using?System.Windows.Shapes;namespace?WpfBrowserAppSample
{///?<summary>///?Page1.xaml?的交互邏輯///?</summary>public?partial?class?Page1?:?Page{public?static?readonly?DependencyProperty?UserCollectionProperty?=DependencyProperty.Register("UserCollection",?typeof(ObservableCollection<UserInfo>),?typeof(Page1),new?PropertyMetadata(null));public?ObservableCollection<UserInfo>?UserCollection{get?=>?(ObservableCollection<UserInfo>)GetValue(UserCollectionProperty);set?=>?SetValue(UserCollectionProperty,?value);}public?Page1(){InitializeComponent();Loaded?+=?delegate{var?time?=?DateTime.Now;UserCollection?=?new?ObservableCollection<UserInfo>();for?(var?i?=?0;?i?<?4;?i++){UserCollection.Add(new?UserInfo{Date?=?time,Name?=?"WPFDevelopers",Address?=?"No.?189,?Grove?St,?Los?Angeles",});time?=?time.AddDays(2);}};}}public?class?UserInfo{public?DateTime?Date?{?get;?set;?}public?string?Name?{?get;?set;?}public?string?Address?{?get;?set;?}}}

創建完全信任的 XBAP

此設置將進行以下更改：

• 在項目文件中，將 <TargetZone> 元素值更改為 Custom。

• 在應用程序清單 (app.manifest) 中，將 Unrestricted="true" 特性添加到 PermissionSet 元素。

3）修改app.manifest的此處代碼，如不修改IE瀏覽器不能正常打開WpfBrowserAppSample.xbap。

<PermissionSet?class="System.Security.PermissionSet"version="1"ID="Custom"SameSite="site"Unrestricted="true"?/>

4）運行目錄下使用IE瀏覽器打開WpfBrowserAppSample.xbap預覽如下。

👇

👇

5）發布XBAP步驟如下。

👇

👇

6）新建IIS。

7）然后到發布的目錄C:\SampleApp\WpfBrowserAppSample\WpfBrowserAppSample\publish\下創建index.htm。

<!DOCTYPE?html>
<html><head><meta?charset="utf-8"></head><frameset><frame?src="WpfBrowserAppSample.xbap"></frameset>
</html>

8）開始訪問http://localhost:5050 如端口號沖突可設置其他。

👇

如果未運行成功請參考:

• 您需要轉到 Internet 選項 --> 安全選項卡 --> 自定義級別 --> 并啟用選項 XAML 瀏覽器應用程序 ?--> 啟用。