具有动态高度的 Silverlight答案

【问题标题】：Silverlight with Dynamic Height具有动态高度的 Silverlight
【发布时间】：2009-05-09 01:42:09
【问题描述】：

我有一个 silverlight 应用程序，我希望它能够像常规 HTML 页面一样调整大小。也就是说，我希望 silverlight 插件的大小在高度上扩展和收缩，以适应我在 silverlight 应用程序中填充的动态数据和控件。所以，假设我有一个带有网格和按钮的页面。用户按下按钮，网格得到一堆带有图像的行，使网格的自然大小高于浏览器窗口。我想有一些东西来调整silverlight插件的大小以适应网格的DesiredSize。以下以及其他几种尝试均无效：

// handler in my main page.
 void MainGrid_LayoutUpdated(object sender, EventArgs e)
 {
     HtmlPage.Window.Invoke("setSilverlightSize", this.MainGrid.DesiredSize.Height);
 }

<body style="height:100%;margin:0;">
    <form id="mainForm" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <div id="SilverlightContainer"  style="height:100%;">
            <asp:Silverlight ID="SLMain" runat="server" Source="~/ClientBin/My.Silverlight.Main.xap" Version="2.0" Width="100%" Height="100%" />
        </div>
    </form>
    <script type="text/javascript">
        function setSilverlightSize(val) {
            var host = document.getElementById("SilverlightContainer");
            host.style.height = val + "px";
        }
    </script>
</body>

MainGrid 的所需大小总是希望是窗口的大小。啊，海盗说。

-r

【问题讨论】：

标签： silverlight height

【解决方案1】：

将溢出设置为“自动”
将滚动设置为“否”
将边距设置为“0”
将包含的 div 的宽度和高度设置为“100%”
将 Silverlight 控件的宽度和高度设置为“100%”

这应该涵盖您的所有基础。请参阅下面的一些示例 HTML。

试试这个：

<style type="text/css"> 
html, body { overflow:auto } 
</style>
<head>
    <title>My App</title>
</head>
<body id="bodyId" style="margin:0;" scroll="no">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div style="position: fixed; height: 100%; width: 100%">
            <avn:Silverlight 
                ID="xamlHost" 
                runat="server" 
                Source="~/ClientBin/THE.xap" 
                MinimumVersion="x.x.xxxxx" 
                Width="100%" 
                Height="100%" 
                />
         </div>
    </form>
</body>
</html>

【讨论】：

在这种情况下，silverlight 插件不会增长以适应内容。在我的内容大于浏览器窗口的情况下，如果需要，我希望 silveright 插件超出浏览器窗口的边界，以便浏览器显示滚动条。在您的示例中，插件随浏览器窗口而不是 silverlight 内容缩放。
我明白了，这提出了一个古老的问题，谁应该负责滚动，浏览器？还是银光？我发现在 Silverlight 中处理内容滚动要简单得多。这就是为什么我使用上面的 HTML 容器来确保只有 Silverlight 控件进行滚动。如果你不这样做，你可能会遇到卑鄙的双滚动条场景。
不幸的是，我想对 silverlight 使用无窗口模式，这不允许在插件外部捕获鼠标。在这里使用 Silverlight 滚动是有问题的。

【解决方案2】：

我用过这个，似乎效果很好。需要获得 Render"ed" 大小。

private void LayoutRoot_LayoutUpdated(object sender, System.EventArgs e)
{
    // Set the size of the SL object to the new rendered size of the Grid.
    ResizeSilverlightOnject(this.LayoutRoot.RenderSize.Height);
}

private void ResizeSilverlightObject( double height )
{
    HtmlPage.Window.Invoke( "ResizeObject", new object[] { height } );
}

【讨论】：

我一直在尝试这个解决方案，但似乎遇到了错误......“抛出了 'System.ExecutionEngineException' 类型的异常。”当应用程序启动时。
Silverlight 端的代码供参考。公共 MainPage() { InitializeComponent(); LayoutRoot.LayoutUpdated += new EventHandler(LayoutRoot_LayoutUpdated); } private void LayoutRoot_LayoutUpdated(object sender, EventArgs e) { HtmlPage.Window.Invoke("ResizeSilverlightContainer", new object[] { this.LayoutRoot.RenderSize.Height }); }

【解决方案3】：

在我的例子中，我创建了一个事件并将高度数据发送到我的浏览器以处理来自 javascript 的高度值这是我的 HTML 代码：

/*
When Silverlight is loaded attach silverlight events
*/
function OnSilverlightLoaded(sender, args) {
    //Getting Silverlight object on page
    _silverlightControlHost = document.getElementById("SilverlightObject");
    //Subscribe to it events
    _silverlightControlHost.Content.SilverlightApp.SetHeightEvent = SetHeightEvent;
}

这是我的 Silverlight 代码：

[ScriptableType]
public partial class MainPage
{
    //Register the event to be as accessible from script
    [ScriptableMember]
    public event EventHandler<HeightEventHandler> SetHeightEvent;

    public MainPage()
    {
        InitializeComponent();

        //Register this instance to be accessible from script
        HtmlPage.RegisterScriptableObject("SilverlightApp", this);
    }

    public void SomeMethod()
    {
        if (this.SetHeightEvent != null)
            this.SetHeightEvent(this, new HeightEventHandler() { Altura = _heightSilverObj.ToString() });
    }
}

[ScriptableType]
public class HeightEventHandler : EventArgs
{
    public string Altura { get; set; }
}

这行得通！

【讨论】：

【解决方案4】：

如果您尝试使用验证摘要来确定高度（与此问题略有无关，但很有用），请尝试以下操作：在您的 Page.xaml.cs // 将原始高度存储在 Page_Loaded 事件中

void Page_Loaded(object sender, RoutedEventArgs e)
{
        SetupPage();
        this.ValidationSummary.SizeChanged += new SizeChangedEventHandler(ValidationSummary_SizeChanged);
}
void ValidationSummary_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (this.OriginalPageHeight == 0.0)
        {
            this.OriginalPageHeight = this.RenderSize.Height;
        }
        else
        {
            double expandSize = this.OriginalPageHeight + e.NewSize.Height;
            ResizeSilverlightObject(expandSize);
        }
    }

编辑：添加 Javascript 函数和 cs 函数

    function ResizeObject(height) {
        var host = document.getElementById("uploaderHost");
        host.style.height = height + "px";
    }

public void ResizeSilverlightObject(double height)
    {
       HtmlPage.HtmlWindow.Invoke("ResizeObject", new object[] { height });

    }

【讨论】：