Silverlight IFrame 控件相对于浏览器窗口的位置

发布于 2024-11-30 21:59:35 字数 3882 浏览 5 评论 0原文

我正在努力为 silverlight 制作一个非常简单的 IFrame 控件。

目标：控制覆盖在 silverlight 应用程序上的 IFrame 的位置

silverlight IFrame 控件在 silverlight 应用程序中使用，允许用户构建搜索查询，然后根据搜索查询形成 url并设置为 IFrame 的源。这是一个基本的搜索应用程序。

我希望 IFrame 根据 silverlight 控件的大小和位置更改大小和位置。

我在这里找到了代码： http://www.kirupa.com/blend_silverlight/absolute_position_transformtovisual.htm，我将其放入 silverlight 控件的构造函数中以获取该控件相对于 silverlight 应用程序的位置。然后，我使用该位置来设置 silverlight 控件的 IFrameLeft 和 IFrameTop 依赖属性。

        this.LayoutUpdated += (obj, args) =>
            {
                GeneralTransform gt = HtmlViewerStackPanel.TransformToVisual(null);
                Point point = gt.Transform(new Point());

                IFrameLeft = (int)point.X;
                IFrameTop = (int)point.Y;

            };

然后在 SizeChanged 事件中，我有以下内容对 IFrame 进行更改。在构造函数中，我将 FrameID 设置为新的 Guid。然后创建一个以该 Guid 作为 id 的 IFrame。

    private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
    {

        IFrameHeight = (int)this.ActualHeight;
        IFrameWidth = (int)this.ActualWidth;

        var iframeElement = System.Windows.Browser.HtmlPage.Document.GetElementById(this.IFrameID);
        iframeElement.SetStyleAttribute("width", string.Format("{0}px", IFrameWidth));
        iframeElement.SetStyleAttribute("height", string.Format("{0}px", IFrameHeight));

    }

仅当 silverlight 应用程序占据整个浏览器窗口时，它才按预期工作。但这不是我最常用的方式。

通过阅读这个问题：获取元素相对于浏览器的绝对位置，看来如果我可以获得对 silverlight 应用程序所在的对象标记 HtmlElement 的引用，我就可以读取 offsetleft 和 offsettop 属性。如果我知道对象标签相对于浏览器的位置，那么我似乎可以很容易地计算出 silverlight 控件相对于浏览器的偏移量。因为我可以确定 silverlight 控件与 silverlight 应用程序的偏移量。

过去，我只是给对象或包装 div 标签一个 id，然后使用 HtmlPage.Document.GetElementById 来获取对该元素的引用。如果可能的话我想避免这种情况。

在获取 GeneralTransform 并设置 IFrame Left 和 Top 后，我在 LayoutUpdated 事件中尝试了此操作。它获取对象标签并使用我之前讨论过的偏移属性。

                var objectElements = System.Windows.Browser.HtmlPage.Document.GetElementsByTagName("object");

                if (objectElements.Count == 1)
                {
                    var objElement = objectElements.Single();

                    do
                    {
                        IFrameLeft += Convert.ToInt32(objElement.GetProperty("offsetLeft"));
                        IFrameTop += Convert.ToInt32(objElement.GetProperty("offsetTop"));

                    } while ((objElement=(System.Windows.Browser.ScriptObject)objElement.GetProperty("offsetParent")) != null);
                }

使用对象标签获取浏览器窗口的偏移量是可行的，我在测试它的其中一个页面上遇到了一些问题，然后我了解到偏移量来自 offsetparent 而不是总是来自浏览器窗口。我添加了循环代码，直到 offsetparent 为空。现在代码基本可以运行了。

我希望能够将 silverlight 控件放在任何地方，并且 IFrame 包含在控件的区域中，并位于控件的位置。

我对任何关于定位 IFrame 以匹配 silverlight 控件的更好方法的想法持开放态度。

以下是我正在尝试执行的操作的几个示例：

原文

I am working on making a very simple IFrame control for silverlight.

Goal: Control the placement of an IFrame overlayed on a silverlight application

The silverlight IFrame control is being used inside a silverlight application that allows the user to build a search query, then a url is formed from the search query and set to be the source of the IFrame. It's a basic search application.

I want the IFrame to change size and position based on the size and position of the silverlight control.

I found code here: http://www.kirupa.com/blend_silverlight/absolute_position_transformtovisual.htm, that I put in the constructor of the silverlight control to get the position of the control relative to the silverlight application. I then use that position to set the IFrameLeft and IFrameTop dependency properties of the silverlight control.

        this.LayoutUpdated += (obj, args) =>
            {
                GeneralTransform gt = HtmlViewerStackPanel.TransformToVisual(null);
                Point point = gt.Transform(new Point());

                IFrameLeft = (int)point.X;
                IFrameTop = (int)point.Y;

            };

Then in the SizeChanged event I have the following which makes the changes to the IFrame. In the constructor I set FrameID to be a new Guid. Then create an IFrame with that Guid as the id.

    private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
    {

        IFrameHeight = (int)this.ActualHeight;
        IFrameWidth = (int)this.ActualWidth;

        var iframeElement = System.Windows.Browser.HtmlPage.Document.GetElementById(this.IFrameID);
        iframeElement.SetStyleAttribute("width", string.Format("{0}px", IFrameWidth));
        iframeElement.SetStyleAttribute("height", string.Format("{0}px", IFrameHeight));

    }

It only works as desired if the silverlight application takes up the whole browser window. However that is not how I most commonly use it.

From reading this question: Getting absolute position of an element relative to browser, it appears that if I could get a reference to the object tag HtmlElement that the silverlight application is hosted in I could read the offsetleft and offsettop properties. If I had the position of the object tag relative to the browser it seems like I could very easily calculate the silverlight control's offset from the browser. Since I can determine the silverlight control's offset from the silverlight application.

In the past I have just given the object, or a wrapping div tag an id and then used the HtmlPage.Document.GetElementById to get a reference to the element. I'd like to avoid that if possible.

I tried this in the LayoutUpdated event after getting the GeneralTransform and setting the IFrame Left and Top. It gets the object tag and uses the offset properties I talked about before.

                var objectElements = System.Windows.Browser.HtmlPage.Document.GetElementsByTagName("object");

                if (objectElements.Count == 1)
                {
                    var objElement = objectElements.Single();

                    do
                    {
                        IFrameLeft += Convert.ToInt32(objElement.GetProperty("offsetLeft"));
                        IFrameTop += Convert.ToInt32(objElement.GetProperty("offsetTop"));

                    } while ((objElement=(System.Windows.Browser.ScriptObject)objElement.GetProperty("offsetParent")) != null);
                }

Using the object tag to get the offset from the browser window works, I was having some problems with one of the pages I tested it on then I learned that the offsets are from offsetparent instead of always from the browser window. I added the code to loop untill the offsetparent is null. The code now basicly works.

I want to be able to put the silverlight control anywhere, and the IFrame be contained to the area of the control, and be at the position of the control.

I'm wide open to any ideas on a better approach to positioning the IFrame to match the silverlight control.

Here are a few more examples of what I'm trying to do:

分享到QQ

分享到微博