翼度科技»论坛 编程开发 .net 查看内容

CefSharp自定义滚动条样式

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
在WinForm/WPF中使用CefSharp混合开发时,通常需要自定义滚动条样式,以保证应用的整体风格统一。本文将给出一个简单的示例介绍如何自定义CefSharp中滚动条的样式。
基本思路

在前端开发中,通过CSS来控制滚动条的样式是件寻常的事情。CefSharp也提供了功能强大的API方便开发人员使用c#与JS进行交互。这也给我们提供了一个思路:在CefSharp加载完成后,使用其提供的ExecuteJavaScriptAsync方法注入JS和CSS代码来自定义滚动条样式。
实现细节

为了排除干扰以及方便介绍,本文直接从GitHub上下载CefSharp.MinimalExample的示例代码进行修改。
首先用CSS定义滚动条的样式,介绍滚动条组成部分以及通过CSS控制其样式的文章挺多,比如MDN Web Docs。这里直接贴代码。
  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  2. ::-webkit-scrollbar  
  3. {  
  4.     width: 6px;  
  5.     height: 6px;  
  6.     background-color: #FFF;
  7.     cursor:pointer;
  8. }   
  9. /*定义滚动条轨道 内阴影+圆角 */
  10. ::-webkit-scrollbar-track  
  11. {  
  12.     box-shadow: inset 0 0 6px rgba(155,155,155,0.3);
  13.     border-radius: 5px;  
  14.     background-color: #FFF;
  15.     cursor:pointer;
  16. }
  17. ::-webkit-scrollbar-button
  18. {
  19.     display: none;
  20. }
  21. /*定义滑块 内阴影+圆角*/  
  22. ::-webkit-scrollbar-thumb
  23. {   
  24.     border:1px solid #c6c6c6;
  25.     border-radius: 5px;  
  26.     background: #c6c6c6;
  27.     cursor:pointer;
  28.     background-repeat: no-repeat;
  29.     background-position:center;
  30. }  
复制代码
接下来就是把CSS样式注入到CefSharp中,按照CefSharp的wiki描述,JavaScript脚本只能在V8Context中执行,并且是在Frame级别执行。对于没有上下文的在Frame,一旦在Frame加载,就可以使用IFrame.ExecuteJavaScriptAsync创建V8Context。
在CefSharp中,IBrowser和IFrame对象用于向浏览器发送命令和在回调方法中获取状态信息,每个IBrowser对象都有一个主IFrame对象表示顶层frame(MainFrame),零个或多个IFrame对象表示子frame。
为了尽早把CSS样式注入到CefSharp中,可以在监听Browser.FrameLoadEnd事件并执行脚本。
  1. public MainWindow()
  2. {
  3.     InitializeComponent();
  4.     Browser.FrameLoadEnd += Browser_FrameLoadEnd;
  5. }
  6. private void Browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
  7. {
  8.     if (e.Frame.IsMain)
  9.     {
  10.         //这里的style就是上一个代码片段中css样式的字符串
  11.         AddStyle(style);
  12.     }
  13. }
  14. /// <summary>
  15. /// 添加CSS样式表
  16. /// </summary>
  17. /// <param name="style">样式内容</param>
  18. public void AddStyle(string style)
  19. {
  20.     if (string.IsNullOrEmpty(style)) return;
  21.     StringBuilder sb = new StringBuilder();
  22.     sb.AppendLine("{let script = document.createElement('style');");
  23.     sb.Append("let node=document.createTextNode('").Append(style.Replace("\n", string.Empty).Replace("\r", string.Empty)).Append("');");
  24.     sb.AppendLine("script.appendChild(node);");
  25.     sb.AppendLine("let elements = document.getElementsByTagName('head');");
  26.     sb.AppendLine("if(elements.length>0){elements[0].appendChild(script);}");
  27.     sb.AppendLine("else if( (elements = document.getElementsByTagName('body')).length>0){elements[0].appendChild(script);}}");
  28.     Browser.GetMainFrame().ExecuteJavaScriptAsync(sb.ToString());
  29. }
复制代码
实现效果如下,滚动条的样式已被修改。在CefSharp的开发者工具中也可以看到注入的CSS样式。


来源:https://www.cnblogs.com/czwy/archive/2023/10/07/17747351.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具