How to enable auto-scroll for silverlight page

Question

There is a Silverlight page, it's width is 810 pixels, height is not specified:

<NavigationControls:Page x:Class="VfmElitaSilverlightClientView.Pages.SquadView" 
       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:NavigationControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
       xmlns:DataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
       xmlns:InputControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"
       xmlns:ToolkitControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" 
       xmlns:Pages="clr-namespace:VfmElitaSilverlightClientView.Pages" 
       xmlns:Controls="clr-namespace:VfmElitaSilverlightClientView.Controls"
       xmlns:Converter="clr-namespace:SilverlightCommonView.Converter;assembly=SilverlightCommonView" 
       mc:Ignorable="d" Width="810"
       Title="SquadView Page">
<NavigationControls:Page.Resources>
    <Converter:BooleanToVisibilityConverter x:Key="resourceBooleanToVisibilityConverter" />
    <Converter:BooleanToVisibilityInvertedConverter x:Key="resourceBooleanToVisibilityInvertedConverter" />
</NavigationControls:Page.Resources>
<ToolkitControls:BusyIndicator IsBusy="{Binding IsBusy}" DisplayAfter="0" BusyContent="{Binding BusyContent}">
    <StackPanel Background="Transparent" HorizontalAlignment="Stretch">

        <StackPanel ... ></StackPanel>
        <StackPanel ... ></StackPanel>
        <StackPanel ... ></StackPanel>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

            <Grid Margin="5" Width="500">...</Grid>

            <Canvas Height="180" Width="210">...</Canvas>

        <DataControls:DataGrid
                   IsReadOnly="True" HorizontalAlignment="Stretch" Margin="5" MinHeight="60" MaxHeight="460"
                   HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
                   RowHeight="18" VerticalAlignment="Top"
                   >
        </DataControls:DataGrid>

        <Button Content="Save" HorizontalAlignment="Center"
                Padding="10" Command="{Binding SaveButtonClickCommand,Mode=OneWay}"/>

    </StackPanel>
</ToolkitControls:BusyIndicator>

Page is displayed with the following html-code:

<div id="silverlightControlHost" style="height:<%=Height%>px;margin: auto;">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="/ClientBin/app.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="transparent" />
          <param name="windowless" value="true" />
      <param name="initParams" value="<%=InitParams %>" /> 
      <param name="minRuntimeVersion" value="3.0.40624.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration:none">
          <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 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>

Among other controls there is a grid inside of page, number of grid rows is data dependent (from 17 up to 25-28), the grid row height is 22pixels. It is necessary to display all controls and all grid rows without scrolling.

For my example, value of 'Height' property for page is set to '930'. For users that have a lot of data (25-28 rows in the data grid) most of the page is busy with data. But other users (18-20 rows) see big "empty" space, that is reserved for control.

I tried to decrease height for the DIV that hosts Silverlight app - that cut off controls for 'big-data' case. Attempt to set style 'height' to 'auto' causes empty HTML-page (Silverlight control is not visible at all).

Could you please advise, how to setup page height in order to be automatically stretched to fit whole controls?

I not sure is this a Silverlight issue or HTML...

Thanks!

Answer 1

Best to first separate the HTML Silverlight sizing issue from all other layout issues.

Your Silverlight object should occupy 100% of the browser height and width unless you are reserving space for other HTML elements. That way all layout and spacing is under the control of Silverlight objects.

The only time you do not do this is when you want the Silverlight object to be larger than the browser and make use of browser scrollbars (not recommended). If you make the Silverlight object smaller than the browser you lose any mouse interaction on the unused area of the browser you might otherwise do something with. Again 100% is easiest to work with.

More info please:

Rather than the HTML, can you provide more of your XAML (screenshots or simple mockups in Paint would be great), so I can let you know exactly what type of layout and spacing you require for your particular screen?