使用WebView2开发包括SpreadJS和Wijmo的混合应用

收藏

本帖最后由 Richard.Ma 于 2023-4-28 12:25 编辑

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

WebView2 的优势

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

在WPF中使用WebView2显示Wijmo和SpreadJS

创建WPF项目
通过Nuget添加WebView2
在MainWindow.Xaml文件中添加WebView

<Window x:Class="WpfWijmo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfWijmo"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="BtnStyle" TargetType="Button">
<Setter Property="Width" Value="120"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="Margin" Value="20,7"></Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource BtnStyle}" Click="Button_Click" Content="Wijmo" ></Button>
<Button Style="{StaticResource BtnStyle}" Click="Button_Click" Content="SpreadJS"></Button>
<Button Style="{StaticResource BtnStyle}" Click="Button_Click" Content="SpreadJS Designer"></Button>
<TextBlock VerticalAlignment="Center" Name="statusText" ></TextBlock>
</StackPanel>
<Border Height="1" Background="Gray" VerticalAlignment="Bottom"></Border>
<Grid Grid.Row="1">
<wv2:WebView2 Name="webview" Source="https://demo.grapecity.com.cn/wijmo/demos/" Grid.ColumnSpan="2" >
</wv2:WebView2>
</Grid>
</Grid>
</Window>

复制代码

4. 通过后台代码设置Button的点击事件打开不同页面

private void Button_Click(object sender, RoutedEventArgs e)
{
if((sender as Button).Content.ToString() == "SpreadJS")
{
webview.Source =new Uri("https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/#/samples");
}
if ((sender as Button).Content.ToString() == "SpreadJS Designer")
{
webview.Source = new Uri("https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html");
}
if ((sender as Button).Content.ToString() == "Wijmo")
{
webview.Source = new Uri("https://demo.grapecity.com.cn/wijmo/demos/");
}
}