具有自动宽度和高度的Silverlight网格

时间:2009-11-30 10:41:47

标签: silverlight xaml silverlight-3.0

Silverlight处女在这里。如何使我的网格周围的用户控件自动调整大小以适应内部的网格宽度?目前,当浏览器窗口更宽时,用户控件显示大约300或400像素。它渲染数据网格周围的垂直和水平滚动条,这是丑陋的。我想将控件宽度设置为“100%”,但似乎不支持。我错过了什么?

到目前为止,这是我的xaml:

<UserControl x:Class="RichMedia.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
    <Grid x:Name="LayoutRoot" Background="White">
        <data:DataGrid Name="dataGrid1" AutoGenerateColumns="False"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            DataContext="{Binding}" />
    </Grid>
</UserControl>

编辑:我应该补充一点,我在使用Silverlight应用程序添加到现有Web应用程序项目时创建的Visual Studio 2010中使用默认容器。

以下是托管页面的标记:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        ...
        <style type="text/css">
            html, body { height: 100%; overflow: hidden; }
            body { padding: 0; margin: 0; }
            html, body { height: 100%; overflow: hidden; }
            #silverlightControlHost { height: 100%; text-align:center; }
        </style>
        <script type="text/javascript" src="Scripts/Silverlight.js"></script>
        ...
    </head>
    <body>
        <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%">
                    <param name="source" value="ClientBin/RichMedia.xap"/>
                    <param name="onError" value="onSilverlightError" />
                    <param name="background" value="white" />
                    <param name="minRuntimeVersion" value="3.0.40818.0" />
                    <param name="autoUpgrade" value="true" />
                    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" 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>
    </body>
</html>

1 个答案:

答案 0 :(得分:5)

您需要将宽度:100%和高度:100%放在包含它的HTML中的对象标记样式中。您还需要确保包含元素(可能是正文)具有视图端口的高度。这是通过确保样式“高度:100%;溢出:隐藏;”来完成的。在html标签和body标签上。将边距:0px放在身体上,并将属性scroll =“no”放在身体上以便进行测量。现在,您的Silverlight控件拥有并扩展到浏览器客户端窗口区域。

同时从UserControl中删除宽度=“自动”和高度=“自动”。