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