0

   全画面表示の Silverlight アプリケーション (VS2010/C#) があります。
   また、Silverlight アプリケーションの上に配置された html コントロールもあります。

   ブラウザ ウィンドウが最大化されているときの位置は正しいです。ただし、ウィンドウを小さいサイズに戻すと、Silverlight アプリケーションのスクロールバーが表示されます (予想どおり)。下にスクロールすると、html がスクロールせず、ウィンドウの位置に対して浮いたままになります。Silverlight アプリケーションで html をスクロールする必要があります。これはどのように行うことができますか？

   ビジネス フロー上の理由から、Silverlight アプリケーションに html を配置できません。

ここに私のスタイルシートがあります

<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 コンテンツが浮いているように見えますが、この理論を確認することはできませんでした。

~~~編集~~~

   スクロール バーが Silverlight インスタンスに属していることが確認されています。これを確認するために、CSS で大きな「LEFT」および「TOP」プロパティを設定して、HTML コントロールの位置を右端と下に設定しました。
   この時点で、ブラウザーと Silverlight アプリの両方に、サイズ変更時にスクロール バーが表示されました。ブラウザーと Silverlight アプリのスクロール バーは異なるスタイルでした。
   LEFT および TOP 属性をリセットし、元の問題を再現した後、表示されていたスクロールバーは、ウィンドウではなく、Silverlight アプリと同じスタイルでした。したがって、すべてのスクロールは Silverlight アプリ自体で行われます。

   ソリューションを前進させるには、ビジネス フローを中断し、Silverlight 内に HTML を埋め込むことが考えられます。誰かがこれを達成するための別の方法を考えることができれば、それはありがたいです.

4

1 に答える 1

0

スクロール イベントをキャプチャすることで、コントロールの top 属性を調整し、スクロールのような効果を得ることができました。これがソリューションの基本です。

注: svMainViewer は MainShell.xaml ページのスクロール ビューです。

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/ ) を参照してください。

于 2013-04-03T16:02:08.553 に答える