基于CefSharp开发浏览器（三）浏览器头部优化

一、上文回顾

上编实现了简单的网页加载功能包括URL输入、打开空标签页、网页链接中新页面处理等

本编将对网页的Title绑定、前进、后退、刷新等事件处理

二、Title绑定处理

当打开网页时Title一直是新标签页，而Edge浏览器中是动态变化的，因此我们需要建立起绑定机制，那么如何取网页Title？

查看ChromiumWebBrowser 类定义

public static readonly DependencyProperty TitleProperty;

发现其有Title的依赖属性，并在类定义中找到了 TitleChanged事件

public event DependencyPropertyChangedEventHandler TitleChanged;

因此只要将Tab页的Header属性与ChromiumWebBrowser类中的Title建立起关系就可以

创建 WebTabItemViewModel 添加 Header属性

public class WebTabItemViewModel: BaseViewModel
{
    private string  _title = "新标签页"; 
    public string Title{ get =>_title ; set { _title = value; OnPropertyChanged("Title"); } } 
}

在TitleChanged 改变时赋值给Header

private void CefWebBrowser_TitleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
     ViewModel.Title= CefWebBrowser.Title;
}

并在新打开Tab页时建立绑定

private void TabItemAdd(object obj)
{
    try
    {
        var uc = new WebTabItemUc { TargetUrl = obj?.ToString() };
        var item = new TabItem { Content = uc };
        var bind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Header") };
        item.SetBinding(HeaderedContentControl.HeaderProperty, bind);
        WebTabControl.Items.Add(item);
        WebTabControl.SelectedItem = item;
        WebTabControl.SetHeaderPanelWidth();
    }
    catch (Exception ex)
    {

    }
}

此处可以直接绑定ChromiumWebBrowser 的Title属性，但为了能使当打开新Tab页时显示【新标签页】所以做了个ViewModel处理

运行看下效果

此时Title还缺个Favicon，Favicon 格式为协议+域名+端口+/favicon.ico

如百度https://www.baidu.com/favicon.ico

故增加favicon获取方法

private ImageSource GetFavicon()
{
    try
    {
        var pattern = @"(w+://)([^/:]+)(:d*)?";
        var address = CefWebBrowser.Address;
        var matches = Regex.Matches(address, pattern);
        return matches.Count <= 0 ? null : ImageHelper.GetBitmapFrame($"{matches[0]}/favicon.ico");
    }
    catch (Exception e)
    {
        return ImageHelper.DefaultFavicon;
    }
}

public static ImageSource GetBitmapFrame(string httpUrl)
{
     try
     {
          return string.IsNullOrEmpty(httpUrl) ? DefaultFavicon : 
               BitmapFrame.Create(new Uri(httpUrl), BitmapCreateOptions.None, BitmapCacheOption.Default);
     }
     catch
     {
          return DefaultFavicon;          
     }

并暂时将此方法加到Browser Title改变事件中

private void CefWebBrowser_TitleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
     ViewModel.Title = CefWebBrowser.Title;
     ViewModel.Favicon = GetFavicon();
}

接下来需要对ViewModel中Favicon 进行界面绑定关联

此时需要对Tabitem进行扩展这里使用附加属性来绑定Favicon

<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Image x:Name="PART_Favicon" Grid.Column="0" Source="{TemplateBinding attached:AttachedPropertyClass.ImageSource}" Width="18" Height="18"/>
    <ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentSource="Header" Focusable="False"
                                              HorizontalAlignment="Left"
                                              Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="Center">
        <ContentPresenter.Resources>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="TextTrimming"  Value="CharacterEllipsis"/>
                <!--不知为什么直接在tabitem中设置fontsize不起作用-->
            </Style>
        </ContentPresenter.Resources>
    </ContentPresenter>
    <Button Grid.Column="2" Style="{StaticResource TabCloseButton}"
                                            Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MTabControl}},Path=TabItemRemoveCommand}"
                                            CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />
</Grid>

Xaml中 PART_Favicon 绑定附加属性 ImageSource接下来对附加属性与ViewModel中的Favicon进行绑定

在TabItemAdd方法中增加绑定

private void TabItemAdd(object obj)
{
    try
    {
        var uc = new WebTabItemUc { ViewModel = { CurrentUrl = obj?.ToString() } };
        var item = new TabItem { Content = uc };
        var titleBind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Title") };
        item.SetBinding(HeaderedContentControl.HeaderProperty, titleBind);


        var faviconBind = new Binding { Source = uc.DataContext, Path = new PropertyPath("Favicon") };
        item.SetBinding(AttachedPropertyClass.ImageSourceProperty, faviconBind);

        WebTabControl.Items.Add(item);
        WebTabControl.SelectedItem = item;
        WebTabControl.SetHeaderPanelWidth();
    }
    catch (Exception ex)
    {

    }
}

再次运行程序

三、前进、后退、刷新处理

前进、后退、刷新是IWebBrowser的扩展方法在WebBrowserExtensions类中

分别添加按钮的响应事件如下

private void NavigationForward_OnClick(object sender, RoutedEventArgs e)
{
　　this.CefWebBrowser.Forward();
}

private void NavigationBack_OnClick(object sender, RoutedEventArgs e)
{
　　this.CefWebBrowser.Back();
}

private void NavigationRefresh_OnClick(object sender, RoutedEventArgs e)
{
　　this.CefWebBrowser.Reload();
}

绑定前进后退按钮可用状态分别为CanGoForward、CanGoBack

<StackPanel Grid.Column="0" Orientation="Horizontal" x:Name="NavigationStackPanel">
    <Button Style="{DynamicResource Button.NavigationBack}" IsEnabled="{Binding CanGoBack}" Click="NavigationBack_OnClick"/>
    <Button Style="{DynamicResource Button.NavigationForward}" IsEnabled="{Binding CanGoForward}" Click="NavigationForward_OnClick"/>
    <Button Style="{DynamicResource Button.NavigationRefresh}" Click="NavigationRefresh_OnClick"/>
</StackPanel>

在cs代码中进行 NavigationStackPanel的上下文绑定

NavigationStackPanel.DataContext = CefWebBrowser;

此处我们直接绑定ChromiumWebBrowser 的依赖属性，故DataContext赋值为 CefWebBrowser

四、源码地址

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