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

1、菜單分析

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

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

2、建立菜單用戶控件

新建用戶控件命名爲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,此時還缺乏縮放部分

3、增長縮放子菜單

在新建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屬性

4、擴展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>

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

1、CefSharp文件下載分析

7、源碼地址

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