用 Silverlight 应用程序填充浏览器窗口

Question

我希望我的Silverlight应用程序可以填满整个浏览器窗口。我已将插件对象的宽度和高度设置为100％，并将LayoutRoot容器的高度和宽度设置为自动，但仍然没有成功。有什么建议吗？

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Silverlight ID="Silverlight1" runat="server" 
        Source="~/ClientBin/Client.xap"
        MinimumVersion="2.0.30818.0"
        AutoUpgrade="true"
        Height="100%" 
        Width="100%">
    </asp:Silverlight>
</form>

<UserControl 
    x:Class="Client.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="Auto"
    Width="Auto">
    <Grid 
        x:Name="LayoutRoot" 
        Background="#084E85"
        ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="280" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="600" />
        </Grid.RowDefinitions>

        ...Remaining content here...
    </Grid>
</UserControl>

免责声明：我先前搜索了答案并找到了这个主题。但是，正如您可以从我的代码中看到的那样，这并不适用于我。

- Kevin Babcock

Answer 1

首先，我没有在用户控件中设置高度/宽度。相反，我设置了DesignHeight和DesignWidth（在“http://schemas.microsoft.com/expression/blend/2008”命名空间中），并将对齐方式设置为stretch。

<UserControl ... 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    d:DesignHeight="1050" d:DesignWidth="1680">

在我的HTML中，我将高度和宽度都设为100%，就像这样...

<div style="height: 100%; width: 100%; position: fixed;">
        <asp:Silverlight runat="server" Source="~/ClientBin/My.xap" ID="MyId" 
            Width="100%" Height="100%" />
</div>

到那个时候，对我来说一切都可以让它占据整个窗口。

- Brian Genisio

---

我要补充一件事（我是通过吃亏才发现的）：如果你在其他控件中托管控件，并且希望托管的控件填满整个屏幕，那么你应该使用Grid而不是Canvas作为托管控件的LayoutRoot。Canvas仅支持绝对布局，因此忽略任何HorizontalAlignment="Stretch"或VerticalAlignment="Stretch"属性。因此，如果您在托管控件中使用Canvas，则托管的控件将始终被调整为支持其包含的所有元素所需的最小大小。 - Ken Smith

不幸的是，如果您的<div>位于另一个div内部或复杂设计中，则此方法无法奏效，除非我漏掉了什么。 - Chris S

+1 刚刚搜索了这个问题，这个解决方案完美解决了！ - kenny

Answer 2

如果您拥有一个相当复杂的HTML布局，无法依赖于固定位置，则可以使用以下方法使#silverlightControlHost div调整大小：

private bool _hasResized;

protected override Size ArrangeOverride(Size finalSize)
{
    if (!_hasResized)
    {
        HtmlPage.Document.GetElementById("silverlightControlHost").SetStyleAttribute("height", finalSize.Height.ToString());
        _hasResized = true;
    }

    return base.ArrangeOverride(finalSize);
}

您可以将此放入 MainPage.cs 或者如果您有嵌套的 UserControls，则放在需要最大高度的控件中。我还使用以下 XAML 和默认的 HTML Visual Studio 提供的。

<UserControl ...
    VerticalAlignment="Stretch"
    Height="Auto"
    Width="Auto">

我没有在这些设置之外进行测试，据我所知，Auto是默认设置。

- Chris S

Answer 3

从中删除高度和宽度属性：

<UserControl
     x:Class="Client.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

自动调整高度和宽度以适应窗口大小。如果您删除高度和宽度属性，则您的Silverlight应用程序将随着窗口的增大而自动扩展。

- Justin Niessner

---

如果完全删除高度和宽度，则在设计师中无法正确呈现...请参见DesignHeight和DesignWidth。 - Brian Genisio

Answer 4

嗯

我想你的网格设置为尽可能小（没有“星”列或行）。 您可以尝试再添加一列和一行，大小为“星号”吗？

正如其他人指出的那样，您还需要删除“自动”大小，因为它们会自动调整大小以适应内容。

还要尝试在页面上设置背景颜色，这样您就可以看到它实际扩展到哪里了。

- Denis Troller