views:

2182

answers:

1

Silverlight virgin here. How do I make the usercontrol surrounding my grid automatically resize to accomodate the grid width inside? Currently the usercontrol is displaying at about 300 or 400 pixels when the browser window is much wider. It renders both vertical and horizontal scroll bars around the data grid which is ugly. I want to set the control width to "100%", but this does not appear to be supported. What am I missing?

Here's my xaml so far:

<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>

EDIT: I should add that I am using the default containers in Visual Studio 2010 created when adding a silverlight app to an existing Web Application Project.

Below is the markup from the hosting page:

<%@ 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"&gt;
<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&amp;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  A: 

You need place Width:100% and Height:100% in the style of the object tag in the HTML holding it. You also need to make sure the containing element (probably the body) has the height of the view port. This is done by ensuring the style "height:100%; overflow:hidden;" is on the html tag and the body tag. Put margin:0px on the body and place the attribute scroll="no" on the body as well for good measure. Now your Silverlight control owns and sizes to the browsers client window area.

Also remove the Width="Auto" and Height="Auto" from the UserControl.

AnthonyWJones
Thanks for the response. I've edited the question as I believe all of your suggestions (bar my UC width/height) were already taken care of by the VS template. But I still have a little window showing the grid. Still scratching my head...
grenade
It turned out that my 'HorizontalAlignment="Stretch" VerticalAlignment="Stretch"' was causing the problem. When I remved these attributes from the data:DataGrid element the grid occupied all the available space.
grenade