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">
<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}&level={1}&x={2}&y={3}");
}

If it did, I would've marked it as the answer. – Jeff Putz Jul 09 '10 at 17:15 — Jeff Putz, Jul 09 '10 at 17:15

score 1 · Answer 1 · answered Jan 09 '10 at 20:55

1

It fills Row 0 for me just fine when I set h/w to Auto, like this:

<MultiScaleImage x:Name="Viewer" Margin="1,1,1,0" Height="Auto" Width="Auto"  />

You can even throw in the Row for extra measure, but it wasn't needed when I did it:

<MultiScaleImage Grid.Row="0" x:Name="Viewer" Margin="1,1,1,0" Height="Auto" Width="Auto"  />

answered Jan 09 '10 at 20:55

Todd Main

28,951
11
82
146

Doesn't work. There has to be something deeper going on with my issue. I have a Javascript call to set the image source (via the bridge), set to fire on the object's onload param. Again, it works when I have an explicit height/width set. – Jeff Putz Jan 10 '10 at 07:35
Do consider posting more of your code, including the js call and other items that may be helpful in reproducing the issue. – Todd Main Jan 10 '10 at 09:04

AnthonyWJones · Answer 2 · 2010-01-08T08:24:13.507

0

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.

edited Jan 08 '10 at 08:24

answered Jan 06 '10 at 09:12

AnthonyWJones

187,081
35
232
306

Nope... no joy here. I thought for sure you'd be right, but the MSI still has no height or width. – Jeff Putz Jan 08 '10 at 03:10
Nope... no change. If I bind a text block to it for width, it always shows 0: – Jeff Putz Jan 08 '10 at 22:55

Silverlight MultiScaleImage won't fill available space

2 Answers2