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 浏览器应用程序  --> 启用。