如何根据Silverlight中页面的内容调整layoutRoot的大小?

时间:2011-07-04 21:04:46

标签: .net silverlight silverlight-4.0

在尝试使用Silverlight时,我遇到了布局问题,即无法根据页面内容(如普通网页)进行扩展。

无论我尝试什么,我都无法解决这个问题。 (我试图打开ScrollBars,分配静态高度和宽度等)。 我的.xaml文件在这里:

<UserControl
    x:Class="XXXSL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"
    d:DesignWidth="640" d:DesignHeight="300">
    <Border Style="{StaticResource ContentBorderStyle}">
        <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border x:Name="BrandingBorder" Style="{StaticResource NavBrandingBorderStyle}">
                <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}" >
                    <ContentControl Style="{StaticResource LogoIcon}" />
                    <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Metropoll Emlak Sistemi" />
                </StackPanel>
            </Border>
            <Border x:Name="LinksBorder" Style="{StaticResource NavLinksBorderStyle}">
                <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="Home" TargetName="ContentFrame" Content="..." />
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="XXX" TargetName="ContentFrame" Content="...." />
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="YYY" TargetName="ContentFrame" Content="..." />
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="About" TargetName="ContentFrame" Content="..." />
                </StackPanel>
            </Border>
            <Border x:Name="ContentBorder" Style="{StaticResource NavContentBorderStyle}" Margin="45,-4,0,-38" Grid.Row="2">
                <StackPanel Style="{StaticResource LinksStackPanelStyle}">
                <navigation:Frame x:Name="ContentFrame" Style="{StaticResource NavContentFrameStyle}" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" UseLayoutRounding="False" />
                </StackPanel>
            </Border>
        </Grid>
    </Border>
</UserControl>

任何帮助或建议将不胜感激?

2 个答案:

答案 0 :(得分:1)

可以调整Silverlight托管对象的大小以匹配顶级内容元素。 Silverlight只是调用一个Javascript方法来根据对根元素的大小更改来调整容器大小。

这样浏览器滚动条就会启动而不需要Silverlight滚动条。这也意味着就其而言,Silverlight页面总是“全尺寸”。

请记住,此代码来自我的Silverlight 2天(非常旧),概念没有改变。

在托管aspx页面中,我有这个Javascript函数:

<script language="javascript" type="text/javascript">
    function ResizeObject(height) {
        var host = document.getElementById("Xaml1");
        host.style.height = height + "px";
    }    
</script>

Xaml1 ID是旧学校asp:Silverlight对象,因此您可能需要更改目标。

在根页面的构造函数中,我添加了一个resize处理程序:

LayoutRoot.SizeChanged += new SizeChangedEventHandler(LayoutRoot_SizeChanged);

其中调用了以下事件处理程序和辅助方法(当时我的应用中只有高度感兴趣):

void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ResizeSilverlightObject(e.NewSize.Height);
}

private void ResizeSilverlightObject(double height)
{
    // Now resize the actual Silverlight container to match the layout size
    HtmlPage.Window.Invoke("ResizeObject", new object[] { height });
}

答案 1 :(得分:0)

正如HiTech Magic指出的那样,问题需要在托管Silverlight应用程序的页面中进行一些工作。

在托管页面的html中查找此标记。

<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

如果它不包含width="100%" height="100%",则可能需要为修复添加所有内容。