c# - 将 HTML 控件放置在 Silverlight 应用程序之上并让它随应用程序滚动

Question

我有一个全屏的 Silverlight 应用程序 (VS2010/C#)。
我还有一个位于 Silverlight 应用程序之上的 html 控件。

当浏览器窗口最大化时，位置是正确的。但是，当我将窗口恢复到较小的尺寸时，我得到了 silverlight 应用程序的滚动条(如预期的那样)。当我向下滚动时，我的 html 不会滚动并相对于其窗口位置保持 float 。我希望 html 与 silverlight 应用程序一起滚动。如何做到这一点？

由于业务流程原因，我无法将 html 放入 silverlight 应用程序中。

这是我的样式表

<style type="text/css">
    html, body
    {
        height: 100%;
        overflow: auto;
    }
    body
    {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost
    {
        height: 100%;
        text-align: center;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 0px;
    }
    #contentDiv
    {
        position: absolute;
        top: 15px;
        right: 30px;
        display: inline;
        z-index: 20000;
    }
</style>

这是我的html代码

<form id="form1" runat="server" style="height:100%">
    <div runat="server" id="contentDiv">
        --HTML CONTROLS
    </div>
    <div id="silverlightControlHost">
        <object id="silverlightControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
              <param name="windowless" value="true"/>
              <param name="enablehtmlaccess" value="true" />
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://www.microsoft.com/GETSILVERLIGHT" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object>
        <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    </div>
</form>

提前感谢您在此方面提供的任何帮助。

我觉得出现的滚动条属于 silverlight 应用程序，这就是滚动时 html 内容似乎 float 的原因，但我无法证实这一理论。

~~~编辑~~~

已确认滚动条属于 Silverlight 实例。为了确认这一点，我通过在 CSS 中设置一个大的“LEFT”和“TOP”属性，将我的 html 控件位置设置在最右边和最底部。
此时，浏览器和 Silverlight 应用程序在调整大小时都会出现滚动条。浏览器和 silverlight 应用程序的滚动条是不同的样式。
重置 LEFT 和 TOP 属性并重现原始问题后，出现的滚动条与 Silverlight 应用程序具有相同的样式，而不是窗口。所以所有滚动都发生在 Silverlight 应用程序本身上。

向前推进的解决方案可能是打破业务流程并将 html 嵌入到 Silverlight 中。如果有人能想出不同的方法来实现这一点，我们将不胜感激。

Answer 1

通过捕获滚动事件，我能够调整控件的顶部属性并允许类似滚动的效果。这是解决方案的基础。

注意:svMainViewer是MainShell.xaml页面中的滚动View

C# MainShell.xaml.cs 代码

public partial class MainShell : UserControl
{
    #region Private Variables
    private double svHorizontalOffset;
    private double svVerticalOffset;
    #endregion

    #region Constants
    const string JAVASCRIPT_FUNCTION_VERTICALOFFSETCHANGED = "SilverlightScrollViewerVerticalOffest";
    const string JAVASCRIPT_FUNCTION_HORIZONTALOFFSETCHANGED = "SilverlightScrollViewerHorizontalOffest";
    #endregion
    public MainShell(IUnityContainer container)
    {
        InitializeComponent();

        #region Code required registering scroll bar offset notifications
        NotificationHelper.RegisterForNotification("HorizontalOffset", svMainShell, OnHorizontalOffsetChanged);
        NotificationHelper.RegisterForNotification("VerticalOffset", svMainShell, OnVerticalOffsetChanged);
        #endregion
    }

    #region Methods using dependency properties
    public void OnHorizontalOffsetChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        svHorizontalOffset = double.Parse(e.NewValue.ToString());
        System.Windows.Browser.HtmlPage.Window.Invoke(JAVASCRIPT_FUNCTION_HORIZONTALOFFSETCHANGED, svHorizontalOffset);
    }

    public void OnVerticalOffsetChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        svVerticalOffset = double.Parse(e.NewValue.ToString());
        System.Windows.Browser.HtmlPage.Window.Invoke(JAVASCRIPT_FUNCTION_VERTICALOFFSETCHANGED, svVerticalOffset);
    }
    #endregion

}

public class NotificationHelper
{
    public static void RegisterForNotification(string property, FrameworkElement frameworkElement, PropertyChangedCallback OnCallBack)
    {
        Binding binding = new Binding(property)
        {
            Source = frameworkElement
        };

        var dependencyproperty = System.Windows.DependencyProperty.RegisterAttached("ListenAttached" + property,
                                 typeof(object), typeof(UserControl), new System.Windows.PropertyMetadata(OnCallBack));

        frameworkElement.SetBinding(dependencyproperty, binding);
    }
}

Javascript 代码片段

function SilverlightScrollViewerVerticalOffest(offset) 
{
        contentDivElement = document.getElementById("contentDiv");
        if (contentDivElement != null && contentDivElement.style.display != 'none') 
        {
            contentDivElementTop = 15 - offset;
            contentDivElementTop += 'px';
            contentDivElement .style.top = contentDivElementTop ;
        }
}

您可以在 Weareon 的博客 http://blog.weareon.net/scrollviewer-scroll-change-event-in-silverlight/ 上找到有关我实现的代码的更多详细信息