基於CefSharp開發瀏覽器（五）瀏覽器菜單

一、菜單分析

上圖為Edge瀏覽器現有的菜單內容，菜單中即有子菜單也有組合菜單。

本章節將開發瀏覽器菜單樣式，菜單部分功能將后期進行處理。

二、創建菜單用戶控件

新建用戶控件命名為WebMenuUc，Grid添加如下代碼

 <controls:MMenu>
            <controls:MMenuItem Header=". . ." Width="40" Height="30">
                <controls:MMenuItem Header="新建標簽頁" Icon="&#xe600;"/>
                <controls:MMenuItem Header="新建窗口" Icon="&#xe602;"/>
                <controls:MMenuItem Header="新建InPrivate窗口" Icon="&#xe68c;"/>
                // to do
                <controls:MMenuItem Header="收藏夾" Icon="&#xe6de;"/>
                <controls:MMenuItem Header="歷史記錄" Icon="&#xe6f8;"/>
                <controls:MMenuItem Header="下載" Icon="&#xe6d3;"/>
                <controls:MMenuItem Header="應用" Icon="&#xe651;" PopupWidth="160">
                    <controls:MMenuItem Header="管理應用" Icon="&#xe600;"/>
                </controls:MMenuItem>
                <controls:MMenuItem Header="擴展" Icon="&#xe6c1;"/>
                <controls:MMenuItem Header="集錦" Icon="&#xe644;"/>
                <controls:MMenuItem Header="打印" Icon="&#xe621;"/>
                <controls:MMenuItem Header="共享" Icon="&#xe6e4;"/>
                <controls:MMenuItem Header="在頁面上查找" Icon="&#xe660;"/>
                <controls:MMenuItem Header="大聲朗讀" Icon="&#xe600;"/>
                <controls:MMenuItem Header="更多工具" >
                    <controls:MMenuItem Header="更多工具1" />
                    <controls:MMenuItem Header="更多工具2" />
                    <controls:MMenuItem Header="更多工具3" />
                </controls:MMenuItem>
                <controls:MMenuItem Header="設置" Icon="&#xe603;"/>
                <controls:MMenuItem Header="幫助和反饋" Icon="&#xe653;"/>
                <controls:MMenuItem Header="關閉 瀏覽器"/>
            </controls:MMenuItem>
        </controls:MMenu>

其中MMenu及MMenuItem均為CustomControl，分別重寫了Menu和MenuItem，

關於Menu CustomControl 基本樣式可參考 Cys_Control（五） MMenu，

對Cys_Control 中MMenu 部分樣式及配色進行了調整，使其接近於Edge Menu。如下

 

 

 其中圖標使用阿里Iconfont,此時還缺少縮放部分

三、增加縮放子菜單

在新建InPrivate窗口 菜單下增加縮放部分

<controls:MMenuItem Header="新建InPrivate窗口" Icon="&#xe68c;"/>
<Grid Height="30">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" >
        <TextBlock Text="縮放" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <Border Grid.Column="1" BorderThickness="1,0" BorderBrush="{DynamicResource WebBrowserBrushes.WebMenuDivisionBorderBrush}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="&#xe60c;" Style="{DynamicResource Button.FontButton}" />
            <TextBlock Grid.Column="1" Text="100%" Margin="9,0" VerticalAlignment="Center"/>
            <Button Grid.Column="2" Content="&#xe699;" Style="{DynamicResource Button.FontButton}"/>
        </Grid>
    </Border>
    <Button Grid.Column="2" Content="&#xe61f;" Style="{DynamicResource Button.FontButton}"/>
</Grid>
<controls:MMenuItem Header="收藏夾" Icon="&#xe6de;"/>

 此時雖然菜單已添加，但鼠標停留時的藍色背景無法去掉

暫未找到合適處理方式，故考慮擴展Role屬性

四、擴展Role屬性創建模板

Role有四個枚舉值即 TopLevelHeader、TopLevelItem、SubmenuHeader、SubmenuItem 分別對應四種樣式

可以將縮放部分視為第五種樣式，增加枚舉 MenuItemRoleEx 這里為了方便使枚舉值與 MenuItemRole 枚舉值命名相近，結尾增加Ex,並多加一個None作為默認屬性值

public enum MenuItemRoleEx
{
    //
    // Summary:
    //     Top-level menu item that can invoke commands.
   TopLevelItemEx = 0,
   //
   // Summary:
   //     Header for top-level menus.
   TopLevelHeaderEx = 1,
   //
   // Summary:
   //     Menu item in a submenu that can invoke commands.
   SubmenuItemEx = 2,
   //
   // Summary:
   //     Header for a submenu.
   SubmenuHeaderEx = 3,

   None = 4,
}

為MMenuItem類文件中增加依賴屬性 RoleEx

public static readonly DependencyProperty RoleExProperty = DependencyProperty.Register("RoleEx", typeof(MenuItemRoleEx), typeof(MMenuItem),
    new PropertyMetadata(MenuItemRoleEx.None));

    /// <summary>
    /// RoleEx
    /// </summary>
    public MenuItemRoleEx RoleEx
    {
        get => (MenuItemRoleEx)GetValue(RoleExProperty);
        set => SetValue(RoleExProperty, value);
    }

在MMenuItem樣式文件中增加 擴展模板如下

<ControlTemplate xmlns:markup="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:Cys_CustomControls.Controls"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 x:Key="MSubmenuItemExpandTemplate" TargetType="{markup:Type local:MMenuItem}">
    <Border x:Name="templateRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Height="35" SnapsToDevicePixels="true">
        <Grid Height="30">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" >
                <TextBlock Text="縮放" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Grid.Column="1" BorderThickness="1,0" BorderBrush="{TemplateBinding BorderBrush}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" Content="&#xe60c;" Style="{DynamicResource Button.FontButton}" />
                    <TextBlock Grid.Column="1" Text="100%" Margin="9,0" VerticalAlignment="Center"/>
                    <Button Grid.Column="2" Content="&#xe699;" Style="{DynamicResource Button.FontButton}"/>
                </Grid>
            </Border>
            <Button Grid.Column="2" Content="&#xe61f;" Style="{DynamicResource Button.FontButton}"/>
        </Grid>
    </Border>
</ControlTemplate>

並為MMenuItem默認樣式增加多條件觸發器，即當Role為 SubmenuItem並RoleEx為 SubmenuItemEx時使用擴展模板

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="Role" Value="SubmenuItem"/>
        <Condition Property="RoleEx" Value="SubmenuItemEx"/>
    </MultiTrigger.Conditions>
    <Setter Property="Template" Value="{StaticResource MSubmenuItemExpandTemplate}"/>
    <Setter Property="BorderThickness" Value="0,1,0,1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource WebBrowserBrushes.WebMenuDivisionBorderBrush}"/>
</MultiTrigger>

此時運行看菜單效果，鼠標滑過時無藍色背景

七、源碼地址

gitee地址：https://gitee.com/sirius_machao/mweb-browser

項目邀請：如對該項目有興趣，歡迎聯系我共同開發！！！