XAML 创建浏览器应用程序

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:SampleAppWpfBrowserAppSampleWpfBrowserAppSamplepublish下创建index.htm。

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