基于CefSharp开发浏览器（七）浏览器收藏夹菜单

一、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="&#xe646;" 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="&#xe659;"/>
<Button Style="{DynamicResource Button.FontButton}" Content="&#xe652;"/>
<Button Style="{DynamicResource Button.FontButton}" Content="&#xe65c;"/>
<Button Style="{DynamicResource Button.FontButton}" Content="..." Padding="0,0,0,12"/>
<Button Style="{DynamicResource Button.FontButton}" Content="&#xe6b9;"/>
</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="&#xe600;"/>
<controls:MMenuItem Tag="1" Header="在新建窗口中全部打开（16个）" Icon="&#xe602;"/>
<controls:MMenuItem Tag="2" Header="在新 InPrivate窗口全部打开（16个）" Icon="&#xe68c;"/>
<controls:MMenuItem Tag="4" Header="按名称排序" Icon="&#xe606;"/>
<controls:MMenuItem Tag="5" Header="重命名" Icon="&#xe712;"/>
<controls:MMenuItem Tag="5" Header="删除" Icon="&#xe74e;" IconFontSize="26"/>
<controls:MMenuItem Tag="5" Header="将当前标签页添加到文件夹" Icon="&#xe659;"/>
<controls:MMenuItem Tag="5" Header="将所有标签页添加到文件夹"/>
<controls:MMenuItem Tag="5" Header="添加文件夹" Icon="&#xe652;"/>
</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