2. 程式人生 > >基於CefSharp開發（七）瀏覽器收藏夾選單

基於CefSharp開發（七）瀏覽器收藏夾選單

阿新 • • 發佈：2021-01-12

一、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

相關推薦

基於CefSharp開發（七）瀏覽器收藏夾選單

一、Edge收藏夾選單分析 如下圖所示為Edge收藏夾選單， 點選收藏夾選單按鈕（紅框部分）彈出收藏夾選單窗體，窗體中包含工具欄（綠框部分）和樹型選單（黃框部分） 工具欄按鈕功能分別為添加當前網頁到根節點、建立新資料夾到根節點、搜尋收藏夾內容、單中單（收藏夾選單中的其他功能）、收藏夾選單固定到右側 在樹節點

基於CefSharp開發（五）瀏覽器選單樣式

一、選單分析 上圖為Edge瀏覽器現有的選單內容，選單中即有子選單也有組合菜單。 本章節將開發瀏覽器選單樣式，選單部分功能將後期進行處理。 二、建立選單使用者控制元件 新建使用者控制元件命名為WebMenuUc，Grid新增如下程式碼 <controls:MMenu>

基於CefSharp開發（六）瀏覽器網頁縮放

一、網頁縮放分析 縮放入口 1、Ctrl + 滑鼠滑輪縮放 2、選單中縮放子選單縮放 3、搜尋框中網頁縮放按鈕縮放 縮放屬性及命令 ChromiumWebBrowser 提供了縮放量值、縮放級別、放大/縮小/重置命令等，如下圖   二、滑鼠滑輪縮放 簡單縮放實現 要實現縮放，首先需捕獲滑鼠滾動事件，

記開發個人圖書收藏清單小程序開發（七）DB設計

auto creat ali IV HA val name com pro 前面的書房初始化的前端信息已經完善，所以現在開始實現DB的Script部分。 新增Action:Shelf_Init.sql svc.sql 1 CREATE SCHEMA [svc] 2

星雲鏈智能合約開發（七）：Dapp開發

星雲鏈智能合約開發 星雲鏈Dapp開發 星雲鏈智能合約Dapp開發 Dapp開發 安裝neb.js neb.js提供javascript開發的API接口 創建一個neb文件夾，在終端命令行中進入該文件夾，克隆neb.js git clone https://github.com/nebula

Go語言開發（七）、Go語言錯誤處理

pro package error 先進後出 goroutin cee 錯誤處理機制 避免 而是 Go語言開發（七）、Go語言錯誤處理 一、defer延遲函數 1、defer延遲函數簡介 defer在聲明時不會立即執行，而是在函數return後，再按照FILO（先進後出）的

從零開始學習比特幣開發（七）-P2P網路建立流程之生成地址對並連線到指定地址

本節繼續講解比特幣P2P網路建立流程，這節講解的執行緒為’ThreadOpenAddedConnections’，它的作用是生成地址對並連線到指定地址。 本文可以結合比特幣系統啟動的的第12步的講解來看，可以更加系統的瞭解比特幣系統啟動的過程。 P2P 網路的建立是在比特幣系統啟動的第

EOSIO開發（七）- 使用CLion檢視EOS程式碼

本文將會介紹如何使用CLion檢視EOS原始碼。 EOS的智慧合約基於C++開發，官方在github上提供了很多合約樣例，地址： https://github.com/EOSIO/eos/tree/master/contracts 直接檢視這些樣例的原始碼無疑是學習合約開發最快速的

即時通訊音視訊開發（七）：音訊基礎及編碼原理入門

前言 即時通訊應用中的實時音視訊技術，幾乎是IM開發中的最後一道高牆。原因在於：實時音視訊技術 = 音視訊處理技術 + 網路傳輸技術 的橫向技術應用集合體，而公共網際網路不是為了實時通訊設計的。 系列文章 《即時通訊音視訊開發（五）：認識主流視訊編碼技術H.264》 《即時

HyperLeger Fabric開發（七）——HyperLeger Fabric鏈碼開發

HyperLeger Fabric開發（七）——HyperLeger Fabric鏈碼開發 一、鏈碼開發模式 1、鏈碼開發模式簡介 Fabric的鏈碼開發除錯比較繁瑣。在不使用鏈碼開發模式的情況下，鏈碼不能在本地測試，必須部署到docker，install和instantiate後，Peer節點會在新的

HyperLeger Fabric SDK開發（七）——ledger

HyperLeger Fabric SDK開發（七）——ledger 一、ledger簡介 1、ledger簡介 ledger包支援在Fabric網路上的指定通道上啟用賬本查詢。如果應用程式需要對多個通道進行賬本查詢，需要為每個通道的賬本客戶端建立一個單獨例項。賬本客戶端支援以下查詢：QueryInfo

S5P4418裸機開發（七）：SDRAM

Smart4418 板載 1GB DDR3 SDRAM； 晶片型號 K4B4G1646D-BCK0； 16bit位寬，單片容量256Mbit * 16 = 4Gbit，即 512Mbyte;

spring註解開發（七） 容器建立過程

傳入配置類後， 註冊配置類，主要是  refresh（） public void refresh() throws BeansException, IllegalStateException { synchronized (this.startupShutdo

基於OpenWRT開發（二）

安裝libpcap庫 在http://www.tcpdump.org/下載libpcap（tcpdump的原始碼也可以從這個網站下載） 解壓 ./configure make sudo make install 獲取網路介面 首先要使用libp

Android系統移植與平臺開發（七）－ 初識HAL

1.      HAL的module與stubHAL（Hardware AbstractLayer）硬體抽象層是Google開發的Android系統裡上層應用對底層硬體操作遮蔽一個軟體層次，說白了，就是上層的應用不用關心底層硬體具體如何工作的，只要向上層提供一個統一的介面即可

區塊鏈開發（七）以太坊錢包 Mist

簡單說明一下之前用Geth搭建的私有網路 建立鏈條的geth命令 geth --datadir "./" init genesis.json geth --datadir "./" --nodiscover console 2>>geth.log 在命令列模式

Unity3D開發（七）：NGUI之UICamera控制觸控，滑鼠事件

先給論壇做個廣告：點選開啟連結 1. UICamera 功能介紹 主要包括UI事件的監聽，分發，覆蓋範圍為此Camera渲染的所有GameObject。 事件源包括：滑鼠，觸控，鍵盤，手柄。 事件包括：懸停，按下/擡起，選中/取消選中，點選，雙擊，拖拽，釋放，文字輸入，T

Flask專案之手機端租房網站的實戰開發（七）

說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！ 接著上一篇部落格繼續往下寫 ：https://blog.csdn.net/qq_41782425/article/details/85934776 目錄 一丶登入後端介面編寫 二丶登入介面測試 三丶登入前

atlassian JIRA 外掛開發（七） — 組成

JIRA外掛開發首先就要生成JIRA外掛專案，這個專案就是外掛的原始碼和內容的容器，一切都在其中。 - 外掛採用maven的方式生成，pom.xml檔案不可少，定義了外掛專案的一些屬性，編碼方式、依

Cocos2d-x 3.0 開發（七）在程式中處理cocoStudio匯出動畫

1、概述    使用cocoStudio可以方便的製作動畫，接下來的工作就是在我們的程式中使用製作的動畫。這篇中，我將使用程式將兩個動畫連線起來。有圖有真相：2、製作動畫    承接上一篇，我們再製作一