Silverlight——施工计划日报表(四)——自适应浏览器窗口

简介: 在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:   那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。

  在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:

image

image

image

  那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。Google了几次,都没找到自己所需要的方案,于是只好自己来解决了。

  首先,有没有办法在Silverlight的程序代码中获取浏览器的高宽呢?这一点似乎没法做到,Application.Current.Host.Content.ActualWidth和Application.Current.Host.Content.ActualHeight获取的是插件的高宽。BrowserInformation对象获取的虽然是浏览器的信息,但是没有高宽。那么可以不可以使用JS获取浏览器高宽呢,这当然是可行的。

获取浏览器高宽有了思路,那么怎么让程序自适应呢?于是想到了“window.onresize”事件。这样,问题就解决了,具体代码如下:

首先,在Silverlight中定义了如下方法:

        /// <summary>
        /// 设置控件布局(根据窗口来自适应)
        /// </summary>
        [ScriptableMember()]
        public void SetLayout(string _winWidth, string _winHeight)
        {
            double _windowWidth = Convert.ToDouble(_winWidth);
            double _windowHeight = Convert.ToDouble(_winHeight);
            //设置滚动框宽度
            svPlans.Width = _windowWidth - 8;
            Canvas.SetLeft(spButtons, _windowWidth - 400);
            Canvas.SetLeft(txtTitle, _windowWidth / 2 - 150);
            Canvas.SetZIndex(cvShowProcess, 999);
            Canvas.SetLeft(cvShowProcess, _windowWidth / 3);
            Canvas.SetTop(cvShowProcess, 80);
            //设置滚动框高度
            svPlans.MaxHeight = _windowHeight - 54;
        }
该函数是可以使用JS调用的,上一篇已经说明了,这里就略过了。布局的方法写好了,该写js去调用了。由于不想每个页面都写调用的js,于是UserControl_Loaded

事件就辛苦点,在里面写下如下代码:

                //JS调用SetLayout函数来设置控件布局
                HtmlPage.Window.Eval(@"
                setTimeout(
                            function () {slCtl.Content.PlanView.SetLayout(document.documentElement.clientWidth, document.documentElement.clientHeight);
                            window.onresize = function() {
                                slCtl.Content.PlanView.SetLayout(document.documentElement.clientWidth, document.documentElement.clientHeight);
                               }
                            }, 1000
                    );");

如此一来,首次加载以及“window.onresize”事件都能够调用之前的布局方法实现自适应浏览器窗口了。上面的代码值得说明的是,“slCtl.Content.PlanView”的PlanView对象在上一篇中已经提及如何在Silverlight中注册的了,如不明白,请阅读Silverlight——施工计划日报表(三)

目录
相关文章
|
7月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
257 1
|
JavaScript
一招教你实现自适应浏览器大小的Echarts饼状图
一招教你实现自适应浏览器大小的Echarts饼状图
374 0
|
2月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
90 0
|
3月前
|
安全 索引 Windows
roogoo发布的quartz32.dll让浏览器不断弹出广告窗口
roogoo发布的quartz32.dll让浏览器不断弹出广告窗口
|
5月前
|
数据采集 Web App开发 JavaScript
快速参考:用C# Selenium实现浏览器窗口缩放的步骤
在C#结合Selenium的网络爬虫应用中,掌握浏览器窗口缩放、代理IP、cookie与user-agent设置至关重要。本文详述了如何配置代理(如亿牛云加强版),自定义用户代理,启动ChromeDriver,并访问目标网站如抖音。通过执行JavaScript代码实现页面缩放至75%,并添加cookie增强匿名性。此策略有效规避反爬机制,提升数据抓取的准确度与范围。代码示例展示了整个流程,确保爬虫操作的灵活性与高效性。
120 3
|
6月前
|
编解码 JavaScript 前端开发
**BOM**是浏览器对象模型,用于控制浏览器窗口
【6月更文挑战第22天】**BOM**是浏览器对象模型,用于控制浏览器窗口,如`window`、`navigator`、`location`等,提供弹窗、定时器及事件处理功能。**DOM**是文档对象模型,将HTML文档转化为可编程的树结构,允许创建、修改元素及处理事件。两者协同工作,赋能JavaScript与网页交互。
32 2
|
6月前
|
SQL 缓存 数据管理
数据管理DMS产品使用合集之打开多个SQL窗口,在关闭浏览器重新登录只剩第一个窗口且部分脚本丢失,是什么导致的
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
67 0
|
6月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
7月前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
138 0
|
7月前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十一)-java+ selenium自动化测试-浏览器窗口的句柄(详细教程)
【4月更文挑战第13天】本文介绍了如何获取浏览器窗口句柄,句柄是标识浏览器窗口的唯一ID。文章首先解释了窗口句柄的概念,然后通过Java代码示例展示了在单个、多个窗口句柄情况下的操作,包括打印单个窗口句柄和获取所有窗口句柄的方法。在多窗口句柄的场景中,代码演示了如何在不同标签页之间切换。最后,文章强调了句柄在实际操作中的重要性,特别是在处理多个窗口时。
107 0