基于CefSharp开发浏览器（七）浏览器收藏夹菜单 |
您所在的位置：网站首页 › 浏览器收藏夹的功能 › 基于CefSharp开发浏览器（七）浏览器收藏夹菜单 |
基于CefSharp开发浏览器（七）浏览器收藏夹菜单
|
一、Edge收藏夹菜单分析
如下图所示为Edge收藏夹菜单， 点击收藏夹菜单按钮（红框部分）弹出收藏夹菜单窗体，窗体中包含工具栏（绿框部分）和树型菜单（黄框部分） 工具栏按钮功能分别为添加当前网页到根节点、创建新文件夹到根节点、搜索收藏夹内容、单中单（收藏夹菜单中的其他功能）、收藏夹菜单固定到右侧
在树节点上右键，有如下右键菜单功能
要完成此功能，需先仿其形，再谋其神。 二、仿其形这里所谓的仿其形，即模仿它的样式（Style） 1、创建收藏夹菜单UserControl创建FavoritesMenuUc，Grid内容如下：ToggleButton控制菜单显隐，Popup展示弹出菜单， StackPanel 中添加五个按钮用于实现工具栏中的功能，MTreeView用于实现树型菜单 关于MTreeView的实现请参照 Cys_Control（六） MTreeView 新建类TreeNode用于显示TreeView显示 public class TreeNode { public int NodeId { get; set; } public int ParentId { get; set; } public string NodeName { get; set; } public string Url { get; set; } = "http://www.baidu.com"; public List ChildNodes { get; set; } = new List(); public int Type { get; set; } //0-文件，1-文件夹 }FavoritesMenuUc.xaml.cs文件中增加测试数据 private void GetFavoritesInfo() { nodes = new List() { new TreeNode(){ParentId=-1, NodeId=0, NodeName = "收藏夹",Type = 1}, new TreeNode(){ParentId=0, NodeId=1, NodeName = "文本",Type = 1}, new TreeNode(){ParentId=0, NodeId=2, NodeName = "音频",Type = 1}, new TreeNode(){ParentId=0, NodeId=3, NodeName = "视频",Type = 1}, new TreeNode(){ParentId=1, NodeId=11, NodeName = "文本1",Type = 0}, new TreeNode(){ParentId=1, NodeId=12, NodeName = "文本2",Type = 0}, new TreeNode(){ParentId=1, NodeId=13, NodeName = "文本3",Type = 0}, }; List root = GetNodes(-1, nodes); AddTreeViewItems(null, root[0], true); } private List GetNodes(int parentId, List nodes) { List mainNodes = nodes.Where(x => x.ParentId == parentId).OrderByDescending(x => x.Type).ToList(); List otherNodes = nodes.Where(x => x.ParentId != parentId).OrderByDescending(x => x.Type).ToList(); foreach (TreeNode node in mainNodes) node.ChildNodes = GetNodes(node.NodeId, otherNodes); return mainNodes; } private void AddTreeViewItems(MTreeViewItem parent, TreeNode treeNode, bool isRoot) { var treeViewItem = new MTreeViewItem(); if (treeNode.ChildNodes.Count当右键未选中时增加屏蔽右键菜单 private void FavoritesTree_OnContextMenuOpening(object sender, ContextMenuEventArgs e) { _currentRightItem = ControlHelper.FindVisualParent(e.OriginalSource as DependencyObject); if (null == _currentRightItem) { e.Handled = true; } }运行效果如下：
这里的谋其神，就是使其可以完成正常的业务处理。 前面仿造了Edge浏览器的大致样式，接下来要对及增加数据存储、命令处理等 1、增加Favorites数据存储这里使用同数据下载同样的处理逻辑，将收藏夹保存为Json文件 新建FavoritesDataRepository,类中添加 SaveFavoritesSetting、GetFavoritesSetting用于保存与读取数据。 public class FavoritesDataRepository { public void SaveFavoritesSetting() { try { var setting = GlobalInfo.FavoritesSetting; if (setting == null) return; var fileName = FileDataPath.GetFilePath(DataFileType.Favorites); CommonOperator.SaveDataJson(setting, fileName); } catch (Exception ex) { } } public FavoritesSetting GetFavoritesSetting() { var fileName = FileDataPath.GetFilePath(DataFileType.Favorites); var setting = CommonOperator.GetDataJson(fileName); setting ??= new FavoritesSetting(); setting.FavoritesInfos ??= new List(); if (setting.FavoritesInfos.Count x.NodeId == _currentRightItem.NodeId)) continue; var currentNode = (GlobalInfo.FavoritesSetting.FavoritesInfos.FirstOrDefault(x => x.NodeId == _currentRightItem.NodeId)); GlobalInfo.FavoritesSetting.FavoritesInfos.Remove(currentNode); } if (_currentRightItem.Parent is MTreeViewItem items) { if (GlobalInfo.FavoritesSetting.FavoritesInfos.Exists(x => x.NodeId == _currentRightItem.NodeId)) { var currentNode = (GlobalInfo.FavoritesSetting.FavoritesInfos.FirstOrDefault(x => x.NodeId == _currentRightItem.NodeId)); GlobalInfo.FavoritesSetting.FavoritesInfos.Remove(currentNode); } items.Items.Remove(_currentRightItem); } }关于创建TreeNode代码细节请参考文章末尾源码 增加OpenNewTabEvent事件用于点击收藏内容时打开网页 四、运行效果 gitee地址：https://gitee.com/sirius_machao/mweb-browser github地址：https://github.com/sirius-chao/MWebBrowser 项目邀请：如对该项目有兴趣，欢迎联系我共同开发！！！ |
【本文地址】
今日新闻 |
推荐新闻 |