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

鹹魚翻身？發表於2020-12-04
瀏覽器

一、選單分析

上圖為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>

此時執行看選單效果，滑鼠滑過時無藍色背景

一、CefSharp檔案下載分析

七、原始碼地址

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

相關文章