基于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

巴特西

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

一、上文回顾

二、Title绑定处理

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

四、源码地址

最新文章

热门文章