基于CefSharp开发(三)浏览器头部优化
一、上文回顾
上编实现了简单的网页加载功能包括URL输入、打开空标签页、网页链接中新页面处理等
本编将对网页的Title绑定、前进、后退、刷新等事件处理
二、Title绑定处理
当打开网页时Title一直是新标签页,而Edge浏览器中是动态变化的,因此我们需要建立起绑定机制,那么如何取网页Title?
查看ChromiumWebBrowser 类定义
public static readonly DependencyProperty TitleProperty;
发现其有Title的依赖属性,并在类定义中找到了 TitleChanged事件
public event DependencyPropertyChangedEventHandler TitleChanged;
因此只要将Tab页的Header属性与ChromiumWebBrowser类中的Title建立起关系就可以
创建 WebTabItemViewModel 添加 Header属性
public class WebTabItemViewModel: BaseViewModel
{
private string _title = "新标签页";
public string Title{ get =>_title ; set { _title = value; OnPropertyChanged("Title"); } }
}
在TitleChanged 改变时赋值给Header
private void CefWebBrowser_TitleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
ViewModel.Title= CefWebBrowser.Title;
}
并在新打开Tab页时建立绑定
private void TabItemAdd(object obj)
{
try
{
var uc = new WebTabItemUc { TargetUrl = obj?.ToString() };
var item = new TabItem { Content = uc };
var bind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Header") };
item.SetBinding(HeaderedContentControl.HeaderProperty, bind);
WebTabControl.Items.Add(item);
WebTabControl.SelectedItem = item;
WebTabControl.SetHeaderPanelWidth();
}
catch (Exception ex)
{ }
}
此处可以直接绑定ChromiumWebBrowser 的Title属性,但为了能使当打开新Tab页时显示【新标签页】所以做了个ViewModel处理
运行看下效果
此时Title还缺个Favicon,Favicon 格式为协议+域名+端口+/favicon.ico
如百度https://www.baidu.com/favicon.ico
故增加favicon获取方法
private ImageSource GetFavicon()
{
try
{
var pattern = @"(\w+:\/\/)([^/:]+)(:\d*)?";
var address = CefWebBrowser.Address;
var matches = Regex.Matches(address, pattern);
return matches.Count <= 0 ? null : ImageHelper.GetBitmapFrame($"{matches[0]}/favicon.ico");
}
catch (Exception e)
{
return ImageHelper.DefaultFavicon;
}
}
public static ImageSource GetBitmapFrame(string httpUrl)
{
try
{
return string.IsNullOrEmpty(httpUrl) ? DefaultFavicon :
BitmapFrame.Create(new Uri(httpUrl), BitmapCreateOptions.None, BitmapCacheOption.Default);
}
catch
{
return DefaultFavicon;
}
并暂时将此方法加到Browser Title改变事件中
private void CefWebBrowser_TitleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
ViewModel.Title = CefWebBrowser.Title;
ViewModel.Favicon = GetFavicon();
}
接下来需要对ViewModel中Favicon 进行界面绑定关联
此时需要对Tabitem进行扩展这里使用附加属性来绑定Favicon
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image x:Name="PART_Favicon" Grid.Column="0" Source="{TemplateBinding attached:AttachedPropertyClass.ImageSource}" Width="18" Height="18"/>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentSource="Header" Focusable="False"
HorizontalAlignment="Left"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="14"/>
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
<!--不知为什么直接在tabitem中设置fontsize不起作用-->
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<Button Grid.Column="2" Style="{StaticResource TabCloseButton}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MTabControl}},Path=TabItemRemoveCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />
</Grid>
Xaml中 PART_Favicon 绑定附加属性 ImageSource接下来对附加属性与ViewModel中的Favicon进行绑定
在TabItemAdd方法中增加绑定
private void TabItemAdd(object obj)
{
try
{
var uc = new WebTabItemUc { ViewModel = { CurrentUrl = obj?.ToString() } };
var item = new TabItem { Content = uc };
var titleBind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Title") };
item.SetBinding(HeaderedContentControl.HeaderProperty, titleBind); var faviconBind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Favicon") };
item.SetBinding(AttachedPropertyClass.ImageSourceProperty, faviconBind); WebTabControl.Items.Add(item);
WebTabControl.SelectedItem = item;
WebTabControl.SetHeaderPanelWidth();
}
catch (Exception ex)
{ }
}
再次运行程序
三、前进、后退、刷新处理
前进、后退、刷新是IWebBrowser的扩展方法 在WebBrowserExtensions类中
分别添加按钮的响应事件如下
private void NavigationForward_OnClick(object sender, RoutedEventArgs e)
{
this.CefWebBrowser.Forward();
} private void NavigationBack_OnClick(object sender, RoutedEventArgs e)
{
this.CefWebBrowser.Back();
} private void NavigationRefresh_OnClick(object sender, RoutedEventArgs e)
{
this.CefWebBrowser.Reload();
}
绑定前进后退按钮可用状态 分别为CanGoForward、CanGoBack
<StackPanel Grid.Column="0" Orientation="Horizontal" x:Name="NavigationStackPanel">
<Button Style="{DynamicResource Button.NavigationBack}" IsEnabled="{Binding CanGoBack}" Click="NavigationBack_OnClick"/>
<Button Style="{DynamicResource Button.NavigationForward}" IsEnabled="{Binding CanGoForward}" Click="NavigationForward_OnClick"/>
<Button Style="{DynamicResource Button.NavigationRefresh}" Click="NavigationRefresh_OnClick"/>
</StackPanel>
在cs代码中进行 NavigationStackPanel的上下文绑定
NavigationStackPanel.DataContext = CefWebBrowser;
此处我们直接绑定ChromiumWebBrowser 的依赖属性,故DataContext赋值为 CefWebBrowser
四、源码地址
gitee地址:https://gitee.com/sirius_machao/mweb-browser
基于CefSharp开发(三)浏览器头部优化的更多相关文章
- 基于CefSharp开发浏览器(八)浏览器收藏夹栏
一.前言 上一篇文章 基于CefSharp开发(七)浏览器收藏夹菜单 简单实现了部分收藏夹功能 如(添加文件夹.添加收藏.删除.右键菜单部分功能) 后续代码中对MTreeViewItem进行了扩展,增 ...
- mac 下基于firebreath 开发多浏览器支持的浏览器插件
mac 下基于firebreath 开发多浏览器支持的浏览器插件 首先要区分什么是浏览器扩展和浏览器插件;插件可以像本地程序一样做的更多 一. 关于 firebreath http://www.fir ...
- 基于CefSharp开发(二)自定义浏览器窗体
上一篇 https://www.cnblogs.com/mchao/p/13914726.html 简单了解了CefSharp引用配置但页面光秃秃的,这一篇着手开发简单浏览器窗体 一.Edge浏览器窗 ...
- 基于CefSharp开发(五)浏览器菜单样式
一.菜单分析 上图为Edge浏览器现有的菜单内容,菜单中即有子菜单也有组合菜单. 本章节将开发浏览器菜单样式,菜单部分功能将后期进行处理. 二.创建菜单用户控件 新建用户控件命名为WebMenuUc, ...
- 基于CefSharp开发(四)浏览器文件下载
一.CefSharp文件下载分析 查看ChromiumWebBrowser类发现cef数据下载处理在IDownloadHandler中进行,但并未找到相应的实现类,故我们需要自己实现DownloadH ...
- 基于CefSharp开发(七)浏览器收藏夹菜单
一.Edge收藏夹菜单分析 如下图所示为Edge收藏夹菜单, 点击收藏夹菜单按钮(红框部分)弹出收藏夹菜单窗体,窗体中包含工具栏(绿框部分)和树型菜单(黄框部分) 工具栏按钮功能分别为添加当前网页到根 ...
- 基于CefSharp开发浏览器(九)浏览器历史记录弹窗面板
一.前言 前两篇文章写的是关于浏览器收藏夹的内容,因为收藏夹的内容不会太多,故采用json格式的文本文件作为收藏夹的存储方式. 关于浏览器历史记录,我个人每天大概会打开百来次网页甚至更多,时间越长历史 ...
- 基于CefSharp开发(六)浏览器网页缩放
一.网页缩放分析 缩放入口 1.Ctrl + 鼠标滑轮缩放 2.菜单中缩放子菜单缩放 3.搜索框中网页缩放按钮缩放 缩放属性及命令 ChromiumWebBrowser 提供了缩放量值.缩放级别.放大 ...
- 基于cefsharp的用户浏览器
技术:vc++2015 概述 用于需要制作一个浏览器 winfrom 中浏览器的插件有很多种 如:WebBrowser , Web.kit等 但用于比较稳定 功能齐全的还是cefsharp 详细 ...
随机推荐
- ERP的权限管理的操作与设计--开源软件诞生24
赤龙ERP用户与权限管理讲解--第24篇 用日志记录"开源软件"的诞生 [进入地址 点亮星星]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/re ...
- 模拟微信小程序页面Page方法
1.依赖 a.jQuery b.angularjs 2.page.js文件 1 var Page = function (options) { 2 var myApp = angular.module ...
- python_摘要_加密
import hashlib def get_md5(username,password): md5 = hashlib.md5(username.encode('utf-8')) # 加盐 md5. ...
- 使用flexbox的自适应照片布局
作者:Tim Vam Damme 让我们来看看一种超轻量级的方法,它可以为一组任意大小的照片创建水平砖砌效果.将任何照片丢到上面,它们将边对边无缝对齐. 该解决方案不仅轻巧,而且非常简单.我们将使用无 ...
- PHP-Parse 简介以及在 Hyperf 中的应用
介绍 PHP-Parse 是分析 PHP 代码生成 AST 的库,分析出可读性很高的对象数据结构,方便后续的更新和遍历. PHP-Parse 的主要作用是修改原有代码(比如插入自定义的代码片段),生成 ...
- linux c语言编写一个shell壳
目的:我们要用c语言编写一个shell可以运行在linux机器上的. 介绍:shell所在的层次 我们要做的是操作系统,用于用户与操作系统进行交互的myhsell 思路:用户输入 一行字符串,我们先 ...
- leetcode bitmap系列问题整理
1. 题目: 编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例 : 输入: 11输出: 3解释: 整数 11 的二进制表示为 000000 ...
- Mac 安装并破解热部署插件JRebel详细教程
热部署插件 JRebel 非常高效的解决了在IDEA中对 Java 代码修改重启Tomcat的效率问题,这样大大降低了项目开发的时间,不用重启即可重新编译修改过的Java代码! (1)IDEA中安装热 ...
- php 抛出异常
<?php //try里面执行的东西如果不成立,可直接 throw new Exception('异常信息'),那么try里面的程序将会被停止执行,直接执行catch里面的程序 try { if ...
- 分布式监控系统之Zabbix主动、被动及web监控
前文我们了解了zabbix的网络发现功能,以及结合action实现自动发现主机并将主机添加到zabbix hosts中,链接指定模板进行监控:回顾请参考https://www.cnblogs.com/ ...