Сетка Silverlight с автоматической шириной и высотой - PullRequest
Новая
       12

Сетка Silverlight с автоматической шириной и высотой

4 голосов
/ 30 ноября 2009

Silverlight девственница здесь. Как сделать так, чтобы пользовательский контроль, окружающий мою сетку, автоматически изменял размеры, чтобы вместить ширину сетки внутри? В настоящее время usercontrol отображает около 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>

РЕДАКТИРОВАТЬ: я должен добавить, что я использую контейнеры по умолчанию в Visual Studio 2010, созданные при добавлении приложения silverlight в существующий проект веб-приложения.

Ниже приведена разметка со страницы хостинга: 

<%@ 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 Ответ

5 голосов
/ 30 ноября 2009

Вам нужно разместить ширину: 100% и высоту: 100% в стиле тега объекта в HTML-коде, который его держит. Вы также должны убедиться, что содержащий элемент (вероятно, тело) имеет высоту порта просмотра. Это делается путем обеспечения стиля "высота: 100%; переполнение: скрыто;" находится на теге html и теге body. Поместите margin: 0px на тело и поместите атрибут scroll = "no" на тело также для хорошей меры. Теперь ваш элемент управления Silverlight имеет размеры и соответствует области окна клиента браузера.

Также удалите Width = "Auto" и Height = "Auto" из UserControl.

...