请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-20 11:41  /   查看:166  /  回复:0
本帖最后由 Richard.Ma 于 2021-8-20 11:43 编辑

      在之前,如果要在.NET平台的客户端开发中嵌入web控件,我们只能选择基于 Internet Explorer 的 WebBrowser 控件,由于IE本身对HTML5的支持较差,不再适合现代 Web 内容。
      微软推出了WebView2,一个全新的浏览器控件,可以用基于 Chrome 的 Microsoft Edge 来呈现 Web 内容(HTML / CSS / JavaScript)。在Win7以上的系统中可以直接运行而无需其他配置。
image.png467627257.png



WebView2 的优势
  • 能充分利用 web 生态系统中存在的前端框架、类库、工具以及人才
  • 将 Web 组件分片添加到应用。
  • 可以访问完整的本机 API 集。
  • 可以方便的和本机硬件进行本地交互,开发出一体化的混合应用



在WPF中使用WebView2显示Wijmo和SpreadJS
  • 创建WPF项目
  • 通过Nuget添加WebView2
  • 在MainWindow.Xaml文件中添加WebView
  1. <Window x:Class="WpfWijmo.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfWijmo"
  7.         xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
  8.         mc:Ignorable="d"
  9.         Title="MainWindow" Height="450" Width="800">
  10.     <Window.Resources>
  11.         <Style x:Key="BtnStyle" TargetType="Button">
  12.             <Setter Property="Width" Value="120"></Setter>
  13.             <Setter Property="Background" Value="White"></Setter>
  14.             <Setter Property="Margin" Value="20,7"></Setter>
  15.         </Style>
  16.     </Window.Resources>
  17.     <Grid>
  18.         <Grid.RowDefinitions>
  19.             <RowDefinition Height="40"></RowDefinition>
  20.             <RowDefinition></RowDefinition>
  21.         </Grid.RowDefinitions>
  22.         <StackPanel Orientation="Horizontal">
  23.             <Button  Style="{StaticResource BtnStyle}" Click="Button_Click" Content="Wijmo" ></Button>
  24.             <Button  Style="{StaticResource BtnStyle}" Click="Button_Click" Content="SpreadJS"></Button>
  25.             <Button  Style="{StaticResource BtnStyle}" Click="Button_Click" Content="SpreadJS Designer"></Button>
  26.             <TextBlock VerticalAlignment="Center" Name="statusText" ></TextBlock>
  27.         </StackPanel>
  28.         <Border Height="1" Background="Gray" VerticalAlignment="Bottom"></Border>
  29.         <Grid Grid.Row="1">
  30.             <wv2:WebView2 Name="webview" Source="https://demo.grapecity.com.cn/wijmo/demos/" Grid.ColumnSpan="2"  >

  31.             </wv2:WebView2>
  32.         </Grid>

  33.     </Grid>
  34. </Window>
复制代码


4. 通过后台代码设置Button的点击事件打开不同页面
  1.         private void Button_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             if((sender as Button).Content.ToString() == "SpreadJS")
  4.             {
  5.                 webview.Source =new Uri("https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/#/samples");
  6.             }
  7.             if ((sender as Button).Content.ToString() == "SpreadJS Designer")
  8.             {
  9.                 webview.Source = new Uri("https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html");
  10.             }
  11.             if ((sender as Button).Content.ToString() == "Wijmo")
  12.             {
  13.                 webview.Source = new Uri("https://demo.grapecity.com.cn/wijmo/demos/");
  14.             }
  15.         }
复制代码


最总运行效果
image.png512945861.png

以上仅展示了通过WebView2来显示我们的官网demo,
在开发实际的混合应用过程中,可以通过您的webservice作为中介,实现应用中客户端.NET部分和web页面的交互。

桌面端.NET控件<====>webservice<====>桌面端WebView2中的web应用


最后附上此例demo
WpfWijmo.zip (15.5 MB, 下载次数: 30)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册