一、Edge收藏夹菜单分析

如下图所示为Edge收藏夹菜单, 点击收藏夹菜单按钮(红框部分)弹出收藏夹菜单窗体,窗体中包含工具栏(绿框部分)和树型菜单(黄框部分)

工具栏按钮功能分别为添加当前网页到根节点、创建新文件夹到根节点、搜索收藏夹内容、单中单(收藏夹菜单中的其他功能)、收藏夹菜单固定到右侧

在树节点上右键,有如下右键菜单功能

要完成此功能,需先仿其形,再谋其神。

二、仿其形

这里所谓的仿其形,即模仿它的样式(Style)

1、创建收藏夹菜单UserControl

创建FavoritesMenuUc,Grid内容如下:ToggleButton控制菜单显隐,Popup展示弹出菜单,

StackPanel 中添加五个按钮用于实现工具栏中的功能,MTreeView用于实现树型菜单

关于MTreeView的实现请参照 Cys_Control(六) MTreeView

<Grid>
<ToggleButton x:Name="FavoritesButton" Style="{DynamicResource ToggleButton.FontButton}" Checked="FavoritesButton_OnChecked"
Unchecked="FavoritesButton_OnUnchecked" Content="" FontSize="26" Background="Transparent" IsChecked="{Binding ElementName=FavoritesPop,Path=IsOpen}"/>
<Popup x:Name="FavoritesPop" PopupAnimation="Fade" Placement="Bottom" PlacementTarget="{Binding ElementName=FavoritesButton}"
StaysOpen="False" AllowsTransparency="True" HorizontalOffset="-330">
<Border Background="{DynamicResource WebBrowserBrushes.WebMenuBackground}" CornerRadius="5">
<Border.Effect>
<DropShadowEffect Color="{DynamicResource Color.MenuItemDropShadowBrush}" Opacity="0.3" ShadowDepth="3"/>
</Border.Effect>
<Grid Width="360" Height="660">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="收藏夹栏" VerticalAlignment="Center" FontSize="18" Margin="10,0,0,0" Foreground="{DynamicResource WebBrowserBrushes.DefaultForeground}"/>
<StackPanel Grid.Column="2" Orientation="Horizontal" Margin="0,0,10,0">
<Button Style="{DynamicResource Button.FontButton}" Content=""/>
<Button Style="{DynamicResource Button.FontButton}" Content=""/>
<Button Style="{DynamicResource Button.FontButton}" Content=""/>
<Button Style="{DynamicResource Button.FontButton}" Content="..." Padding="0,0,0,12"/>
<Button Style="{DynamicResource Button.FontButton}" Content=""/>
</StackPanel>
</Grid>
<Rectangle Grid.Row="1" Height="1" Fill="{DynamicResource WebBrowserBrushes.WebMenuDivideLine}"/>
<controls:MTreeView Grid.Row="2" x:Name="FavoritesTree"/>
</Grid>
</Border>
</Popup>
</Grid>

新建类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<TreeNode> ChildNodes { get; set; } = new List<TreeNode>();
public int Type { get; set; } //0-文件,1-文件夹
}

FavoritesMenuUc.xaml.cs文件中增加测试数据

private void GetFavoritesInfo()
{
nodes = new List<TreeNode>()
{
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<TreeNode> root = GetNodes(-1, nodes);
AddTreeViewItems(null, root[0], true);
} private List<TreeNode> GetNodes(int parentId, List<TreeNode> nodes)
{
List<TreeNode> mainNodes = nodes.Where(x => x.ParentId == parentId).OrderByDescending(x => x.Type).ToList();
List<TreeNode> 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 <= 0)
{
if (treeNode.Type == 0)
{
treeViewItem.Header = treeNode.Url;
treeViewItem.Icon = "\ueb1e";
treeViewItem.IsExpandedIcon = "\ueb1e";
treeViewItem.IconForeground = new SolidColorBrush(Color.FromRgb(255, 255, 255));
}
else
{
treeViewItem.Header = treeNode.NodeName;
}
}
else
{
treeViewItem.Header = treeNode.NodeName;
foreach (var child in treeNode.ChildNodes)
{
AddTreeViewItems(treeViewItem, child, false);
}
}
if (!isRoot)
parent.Items.Add(treeViewItem);
else
{
FavoritesTree.Items.Add(treeViewItem);
}
}

运行效果如下:

2、为MTreeView添加右键菜单

右键子菜单可使用MMneuItem,xaml样式如下

<controls:MTreeView Grid.Row="2" x:Name="FavoritesTree" ContextMenuOpening="FavoritesTree_OnContextMenuOpening">
<controls:MTreeView.ContextMenu>
<ContextMenu x:Name="FavoritesContextMenu" Style="{DynamicResource WebCustomMenus.DefaultContextMenu}">
<controls:MMenuItem Tag="0" Header="全部打开(16个)" Icon=""/>
<controls:MMenuItem Tag="1" Header="在新建窗口中全部打开(16个)" Icon=""/>
<controls:MMenuItem Tag="2" Header="在新 InPrivate窗口全部打开(16个)" Icon=""/>
<controls:MMenuItem Tag="4" Header="按名称排序" Icon=""/>
<controls:MMenuItem Tag="5" Header="重命名" Icon=""/>
<controls:MMenuItem Tag="5" Header="删除" Icon="" IconFontSize="26"/>
<controls:MMenuItem Tag="5" Header="将当前标签页添加到文件夹" Icon=""/>
<controls:MMenuItem Tag="5" Header="将所有标签页添加到文件夹"/>
<controls:MMenuItem Tag="5" Header="添加文件夹" Icon=""/>
</ContextMenu>
</controls:MTreeView.ContextMenu>
</controls:MTreeView>

当右键未选中时增加屏蔽右键菜单

private void FavoritesTree_OnContextMenuOpening(object sender, ContextMenuEventArgs e)
{
_currentRightItem = ControlHelper.FindVisualParent<MTreeViewItem>(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<FavoritesSetting>(fileName);
setting ??= new FavoritesSetting();
setting.FavoritesInfos ??= new List<TreeNode>();
if (setting.FavoritesInfos.Count <= 0)
{
setting.FavoritesInfos.Add(new TreeNode()
{
ParentId = -1,
NodeId = 0,
NodeName = "收藏夹",
Type = 1,
});
}
return setting;
}
}

2、增加菜单事件

由于事件较多,目前仅处理添加文件夹、添加收藏、删除功能

添加folder,这里的if用来判断是收藏夹工具栏的按钮还是右键菜单C

private void AddFolder_OnClick(object sender, RoutedEventArgs e)
{
if (sender is Button)
{
var newTreeNode = GetNewTreeNodeInfo(true, 1, "新建文件夹", null);
if (null == FavoritesTree || FavoritesTree.Items.Count <= 0) return;
var treeNodeUc = FavoritesTree.Items[0];
if (!(treeNodeUc is MTreeViewItem item)) return;
item.Items.Add(newTreeNode.Item2);
GlobalInfo.FavoritesSetting.FavoritesInfos.Add(newTreeNode.Item1);
}
else if (sender is MMenuItem)
{
var newTreeNode = GetNewTreeNodeInfo(false, 1, "新建文件夹", null);
if (_currentRightItem != null && _currentRightItem.Type == 1)
{
_currentRightItem.Items.Add(newTreeNode.Item2);
GlobalInfo.FavoritesSetting.FavoritesInfos.Add(newTreeNode.Item1);
}
}
}

添加收藏,添加收藏增加了GetWebUrlEvent事件 用于获取当前tab页的url;

private void AddFavorites_OnClick(object sender, RoutedEventArgs e)
{
var model = GetWebUrlEvent?.Invoke();
if (null == model) return; if (sender is Button)
{
if (!(FavoritesTree.Items[0] is MTreeViewItem item)) return;
var newTreeNode = GetNewTreeNodeInfo(true, 0, model.Title, model.CurrentUrl);
GlobalInfo.FavoritesSetting.FavoritesInfos.Add(newTreeNode.Item1);
item.Items.Add(newTreeNode.Item2);
}
else if (sender is MMenuItem)
{
if (_currentRightItem != null && _currentRightItem.Type == 1)
{
var newTreeNode = GetNewTreeNodeInfo(false, 0, model.Title, model.CurrentUrl);
_currentRightItem.Items.Add(newTreeNode.Item2);
GlobalInfo.FavoritesSetting.FavoritesInfos.Add(newTreeNode.Item1);
}
}
}

删除当前节点

private void Delete_OnClick(object sender, RoutedEventArgs e)
{
if (_currentRightItem?.Parent == null) return; foreach (var item in _currentRightItem.Items)
{
_currentRightItem.Items.Remove(item);
if (!GlobalInfo.FavoritesSetting.FavoritesInfos.Exists(x => 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

基于CefSharp开发(七)浏览器收藏夹菜单的更多相关文章

  1. mac 下基于firebreath 开发多浏览器支持的浏览器插件

    mac 下基于firebreath 开发多浏览器支持的浏览器插件 首先要区分什么是浏览器扩展和浏览器插件;插件可以像本地程序一样做的更多 一. 关于 firebreath http://www.fir ...

  2. 如何备份Chrome浏览器收藏夹

    前言:最近,由于工作需要,要卸载当前Chrome版本,并安装最新版Chrome.卸载前,意识到之前收藏在收藏夹里的很多知识链接还未备份,于是有了今天的话题:如何备份Chrome浏览器的收藏夹? 主题: ...

  3. (转)chrome浏览器收藏夹(书签)的导出与导入

    导出chrome浏览器的书签到一个文件中.首先选择chrome浏览器的书签管理器菜单.然后点击“整理”,然后选择“将书签导出到html文件”. 步骤阅读 2 将导出的html文件保存,用于下次导入,这 ...

  4. 浏览器收藏夹插件-Xmarks

    Xmarks 一一 一款简约实用的浏览器书签同步插件 首先还是想吐槽一下firefox的收藏夹同步功能,感觉不实用,密钥的长度如果不是存到手机或者别的终端,压根没办法实现同步. 而且还区分了,如果两台 ...

  5. win10 microsoft edge 浏览器收藏夹位置

    1.打开文件夹,找到(注意 用户名 改为你自己的用户名) C:\Users\用户名\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bb ...

  6. 清理out的浏览器收藏夹发现的

    刚才清理了一下自己的浏览器书签,其实好几年不做收藏了,常用的直接放到书签栏里就行了. 发现不少之前的技术内容域名都被色情病毒经营者续费利用,相关技术内容都是VB.SQL.XMAPP这些过期的玩意,其中 ...

  7. 基于cefsharp的用户浏览器

    技术:vc++2015   概述 用于需要制作一个浏览器 winfrom 中浏览器的插件有很多种 如:WebBrowser , Web.kit等 但用于比较稳定 功能齐全的还是cefsharp 详细 ...

  8. 1、Ubuntu linux下同步windows火狐foxfire 浏览器收藏夹问题

    最近在ubuntu系统中使用自带的firefox浏览器,发现有一些问题,比如登陆后,书签,历史记录等,原本在windows下同步的数据无法同步,添加书签的功能也无法使用. 经过查询资料后得知,unbu ...

  9. 360浏览器 收藏夹 ico 缓存 目录

    C:\Users\Administrator\AppData\Roaming\360se6\apps\data\users\default\data\ico

  10. WIN7 浏览器 收藏夹栏字体太小

    在“窗口颜色和外观”-项目-“消息框”,把字体大小调大. "标题按钮" 大小 21.

随机推荐

  1. git pull和git fetch的区别

    Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...

  2. 使用Maven编译项目遇到——“maven编码gbk的不可映射字符”解决办法 ——转载

    一.问题描述 今天在MyEclipse中使用Maven编译项目源代码时,结果如下了如下的错误

  3. java攻城狮之路(Android篇)--与服务器交互

    一.图片查看器和网页源码查看器 在输入地址的是不能输入127.0.0.1 或者是 localhost.ScrollView :可以看成一个滚轴 可以去包裹很多的控件在里面 练习1(图片查看器): pa ...

  4. Node 写文件

    在程序开发过程中会遇到很多自己认为是对的但实际运行出来并不是自己想的那样的,这个时候就可以把程序运行的比较关键点用文件的方式存储下来,然后分析 node 方式 var fs = require('fs ...

  5. apache开源项目--ibatis

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Java的持久层框架.i ...

  6. Solaris下怎样改动文件创建时间及查询

    Solaris下怎样改动文件创建时间及查询 实验演示: 1.核对时间 [root@S1011:/]# date Tue Jul 15 21:37:01 CDT 2014 --若时间不对请先按例如以下格 ...

  7. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  8. Java 第十周总结

    1. 本周学习总结 2. 书面作业 1.finally (题目4-2) 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? finally创建一个代码块.该代 ...

  9. json api

    from flask import Flask, redirect, url_for, jsonify, request app = Flask(__name__) users = [] ''' RE ...

  10. Kibana插件sentinl使用教程

    简介 对于Kibana的一些数据我们有时候是想要对某些字段进行持续关注的,这时候通过报警的手段就可以大幅提升对这些信息状态了解的及时性及可靠性.使用sentinl插件就可以帮助我们实现这个功能. 此教 ...