在WPF中嵌入WebBrowser可视化页面
无论是哪种C/S技术，涉及数据可视化就非常的累赘了，当然大神也一定有，只不过面向大多数人，还是通过网页来实现，有的时候不想把这两个功能分开，一般会是客户的原因，所以我们打算在WPF中嵌入WebBrowser，然后使用ECharts 完成复杂的图表展示，其功能不亚于一个名为Devexpress的图标库，而且这东西还收费(呵呵)，本文就对WebBrowser+ECharts进行了演示。
首先下载一下Echats.js文件以及Jquery文件并且创建一个Html页面，在我们项目的bin文件夹中。
在html中编辑，其中包括了几个方法，是对C#代码进行访问的。
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
<title>ECharts</title>
</head>
<body>
<h1>html页面</h1>
<button Onclick="click1()" style="width:100px;height:20px">测试</button>
<script>
function click1()
{
window.external.ShowMsg("这是一条信息");
}
</script>
<div id="main" style="width:1000px;height:500px;margin-left:-8px" />
<script src="echats.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option);
</script>
<script>
function SetOption(value) {
var dataObj = JSON.parse(value);//将字符串转换为json对象
myChart.setOption(JSON.parse(dataObj));//将json对象转换为[Object]
}
function jsShowHide(info) {
if (info == 0) {
myChart.clear();
}
else {
myChart.setOption(option);
}
}
function jsPushData(x, y) {
option.xAxis.data.push(x);
option.series[0].data.push(y);
myChart.setOption(option);
}
</script>
</body>
</html>
现在我们需要编辑一下我们的WPF窗体，在其中放入我们的浏览器，然后让它显示我们刚刚写好的页面。
<Window x:Class="EachartsDemo.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:EachartsDemo"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="webBrowser" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25"></TextBlock>
<WebBrowser Grid.Row="1" Name="Web"></WebBrowser>
<StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="wpf按钮: " FontSize="20"></TextBlock>
<Button Grid.Row="2" Name="btnShowHide" Content="加载" Click="btnShowHide_Click"></Button>
<Button Grid.Row="2" Name="btnAddSeries" Content="追加" Margin="10,0,0,0" Click="btnPushData_Click"></Button>
<Button Grid.Row="2" Name="btnSet" Content="重置" Margin="10,0,0,0" Click="SetOption">
</Button>
</StackPanel>
</Grid>
</Window>
在Windows标记中我们需要一个Load事件用于让WebBrowser跳转到相应的页面。
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "/Demo.html"));
}
最后我们还需要创建几个方法，用于让C#直接调用其中Js方法。
int show = ;
private void btnShowHide_Click(object sender, RoutedEventArgs e)
{
Web.InvokeScript("jsShowHide", show);
if (show == ) show = ;
else show = ;
} private void btnPushData_Click(object sender, RoutedEventArgs e)
{
Web.InvokeScript("jsPushData", "x", ,"y","");
} private void SetOption(object sender, RoutedEventArgs e)
{
string strobj = @"{""xAxis"":{""type"":""category"",""data"":[""Mon"",""Tue"",""Wed"",""Thu"",""Fri"",""Sat"",""Sun""]},""yAxis"":{""type"":""value""},""series"":[{""data"":[100,200,300,400,500,600,700],""type"":""line""}]}";
var aa = JsonConvert.SerializeObject(strobj.Trim());
Web.InvokeScript("SetOption",aa);
}
因为我们在xaml中把WebBrowser的name改成了Web，其中这个控件自带一个InvokeScript方法，就是来使用页面写好的Function，就这样启动~
可见效果还可以，就现在我们要通过Js调用C#方法，首先编辑一个页面可操作的类，我们创建 EchatsHelper ,必须在类上面标注特性，否则程序启动不起来，因为WebBrowser是涉及一些安全性的东西，只要是在哪个类new出来，就必须在哪个类标注特性。
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisible(true)]//给予权限并设置可见
public class EchatsHelper
{
WebBrowser web;
public EchatsHelper(WebBrowser web)
{
this.web = web;
}
public void ShowMsg(string Msg)
{
Console.WriteLine(Msg);
}
}
最后我们在Load事件中创建应用程序对文档文件的寄宿脚本访问。
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Web.ObjectForScripting = new EchatsHelper(Web);
Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "/Demo.html"));
}
就这样~我们测试一下~
在WPF中嵌入WebBrowser可视化页面的更多相关文章
- WPF中嵌入WinForm中的webbrowser控件
原文:WPF中嵌入WinForm中的webbrowser控件 使用VS2008创建WPF应用程序,需使用webbrowser.从工具箱中添加WPF组件中的webbrowser发现其中有很多属性事件不能 ...
- 浏览器扩展系列————在WPF中定制WebBrowser快捷菜单
原文:浏览器扩展系列----在WPF中定制WebBrowser快捷菜单 关于如何定制菜单可以参考codeproject上的这篇文章:http://www.codeproject.com/KB/book ...
- WPF中嵌入普通Win32程序的方法
公司现在在研发基于.Net中WPF技术的产品,由于要兼容旧有产品,比如一些旧有的Win32程序.第三方的Win32程序等等,还要实现自动登录这些外部Win32程序,因此必须能够将这些程序整合到我们的系 ...
- WPF中嵌入Office编辑器（支持Word、Excel、PPT、Visio等）
现在有一个项目,需要使用wpf做一个简单的客户端,用来生成word.excel.ppt.visio等文档,这就需要能够在wpf中嵌入office的编辑器,并对office文档进行编辑. 在网上搜索了一 ...
- WinForm中嵌入WebBrowser,并且支持C#和JS方法的相互调用
纯粹WinForm界面不够友好,实现数据复杂度高的处理有些力不从心,所以看了看api以后决定用html来做. 我的wlw的代码插件不是很好用,大家凑合看吧 类前说明引用和权限 1: [Permissi ...
- 提供PPT嵌入Winform/WPF解决方案，Winform/WPF 中嵌入 office ppt 解决方案
Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: 1. 在winform中操作ppt,翻页.播放.退出:显示 总页数.当前播放页数 2. 启动播放ppt时录制视 ...
- 把演讲人的桌面、头像、声音合成后推送到 指定的直播流平台上； 录制电脑桌面、摄像头头像、声音保存为本地视频； 适用于讲课老师、医生等演讲内容保存为视频； 提供PPT嵌入Winform/WPF解决方案，Winform/WPF 中嵌入 office ppt 解决方案
提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案 Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: ...
- WPF中禁止WebBrowser控件打开新窗口
一.针对纯WPF的WebBrowser控件: <summary> Suppress Script Errors In WPF WebBrowser </summary> pub ...
- WPF中嵌入Skyline提供的COM组件填坑
网上有很多关于在WPF中使用的Skyline提供的COM组件的教程,但大都雷同一律,其中很多的细节均为涉及,本文意在在其原基础上进行一些细节的补充. 工具:Visual Studio 2017 1. ...
随机推荐
- 获取Spring中的Bean
1.Utils工具类 package com.xxx.common.helper; import org.springframework.beans.BeansException; import or ...
- 【设计模式】结构型06享元模式（Flyweight Pattern）
享元模式(Flyweight Pattern) 首先吐槽下这个名字,享元?共享元素的话感觉还是蛮好的~但是这个英文... 意图:更好的重用.管理对象,减少内存开销,节约资源. 主要解决:在有大量重复对 ...
- Java8新特性——lambda表达式.（案例：完全数分类）
需求:输入一个数,判断其类型(完全数,过剩数,不足数) 完全数:自身之外所有因数和==自身 过剩数:自身之外所有因数和>自身 不足数:自身之外所有因数和<自身 package cn._3. ...
- webpack打包工具的初级使用方法
这里下载的是webpack的3.8.1版本(新版更新的使用有些问题) 什么是webpack? 他是一个前端资源加载或打包工具,. 资源: img css json等. 下载的话 用 npm webpa ...
- Docker镜像和容器管理（二）
Docker安装 Docker镜像管理 https://hub.docker.com/ 是公共的一个Docker镜像仓库,类似GitHub一样,上面有非常多的开源项目镜像. 可以直接在命令行搜索镜像 ...
- 二进制mariadb多实例
实验环境: centos7.6 :IP: 192.168.99.110 1.首先下载二进制的压缩包,解压到一个指定的目录/hx/下 [root@centos7 hx]#tar xf mariadb-1 ...
- JavaScript的数据类型及其检测
一.什么是数据类型 1.基本类型 值是不可改变的 var name = 'java'; name.toUpperCase(); // 输出 'JAVA' console.log(name); // 输 ...
- CentOS 6.x 安装 JDK1.8
安装方式:rpm(此方式不需要手动配置环境变量) 1. 查看系统是否自带了jdk 查看centos是否自带了openjdk,如果有则卸载掉(当然也可以不卸载,但要注意冲突及版本的使用) # 查看 rp ...
- kafka入门（一）简介
1 什么是kafk Apache kafka是消息中间件的一种,在开始学习之前,先简单的解释一下什么是消息中间件. 举个例子,生产者消费者,生产者生产鸡蛋,消费者消费鸡蛋,生产者生产一个鸡蛋,消费者就 ...
- Linux中修改远程地址
首先跳转到本地用户root,如果不是的话可能没有权限 第一步:安装ssh服务 执行命令:yum install openssh-server (因为我已经安装过了,所以显示的是已安装) 第二步:修改S ...