Silverlight MultiScaleImage 不会填满可用空间

Question

是我还是 MultiScaleImage 在没有明确的宽度和高度的情况下甚至不显示？由于某种原因，我无法让它填充网格单元格。它的行为与大多数其他元素不同。

如果我放弃查看器的高度和宽度，它根本不会显示。

编辑：这是完整的图片... 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>

相关代码：

[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 代码（从嵌入对象的 onload 参数运行）：

   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}");
}

Answer 1

当我将 h/w 设置为 Auto 时，它可以很好地填充第 0 行，如下所示：

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

你甚至可以在 Row 中加入额外的措施，但我这样做时不需要它：

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

Answer 2

尝试如下更改网格单元定义：-

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

MultiscaleImage 控件为图像指定“自然”大小是没有意义的（这会很大）。因此，它期望被赋予大小或伸展到可用大小。您需要在网格行/列定义中使用 * 以确保将放置 Grid 的控件的剩余可用大小传递到放置 MultiscaleImage 控件的单元格位置。

编辑

同时添加

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

MSI 控件的属性。