Silverlight MultiScaleImage won't fill available space

Question

Is it me or does the MultiScaleImage not even display without explicit width and height? I can't get it to fill a grid cell for some reason. It behaves differently from most other elements.

If I ditch the height and width on the Viewer, it doesn't display at all.

EDIT: Here's the complete picture... XAML:

<UserControl x:Class="CliqueSite.DeepZoom.Viewer.ZoomPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
<Grid x:Name="LayoutRoot" Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="34" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <MultiScaleImage x:Name="Viewer" Margin="1,1,1,0" Height="675" Width="900" />
    <Rectangle Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000"/>
                <GradientStop Color="#FF808080" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Button HorizontalAlignment="Right" Margin="0,0,4,4" VerticalAlignment="Bottom" Padding="6" Grid.Row="1"
            Content="Zoom Reset" x:Name="ZoomReset" FontSize="9" FontFamily="Verdana" />
</Grid>

Relevant code behind:

[ScriptableMember]
public void SetSource(int width, int height, int tileSize, int id, string urlToFormat)
{
    Viewer.Source = new ViewerSource(width, height, tileSize, id, urlToFormat);
    double x = 0;
    double y = 0;
    double w = 1;
    if ((width > height && Viewer.Width > Viewer.Height) || (width > height && Viewer.Width < Viewer.Height))
    {
        double scaleFactor = Viewer.Width / width;
        double adjustedHeight = height * scaleFactor;
        double topSpace = (Viewer.Height - adjustedHeight) / 2;
        y = -(topSpace / Viewer.Height) * (Viewer.Height / Viewer.Width);
    }
    else
    {
        double scaleFactor = Viewer.Height / height;
        double adjustedWidth = width * scaleFactor;
        w = Viewer.Width / adjustedWidth;
        double leftSpace = (Viewer.Width - adjustedWidth) / 2;
        x = -(leftSpace / Viewer.Width) * w;
    }
    _viewportOrigin = new Point(x, y);
    _viewportWidth = w;
    ResetZoom();
}

Javascript code (run from embedded object's onload param):

   function LoadImage() {
    var viewer = $("#DeepZoomViewer")[0];
    viewer.content.Bridge.SetSource(<%= Model.ZoomProperties.Width %>, <%= Model.ZoomProperties.Height %>, 256, <%=  Model.Photo.ID %>, "http://localhost:7070/TileHandler.ashx?id={0}&amp;level={1}&amp;x={2}&amp;y={3}");
}

Answer 1

Try changing the Grid Cell Definitions as follows:-

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="34" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width=*" />
</Grid.ColumnDefinitions>

It doesn't make sense for the MultiscaleImage control to specify a "natural" size for the image (which would be huge). Hence it expects to be given size or to stretch to the available size. You need to use * in the gird row/column definitions to ensure that the remaining available size of the control in which the Grid is places is passed on the cell location that the MultiscaleImage control is placed in.

Edit

Also add

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

properties to the MSI control.