Silverlight grid with auto width and height

silverlightsilverlight-3.0xaml

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

Best Answer

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.

Related Topic