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时，它可以很好地填充Row 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控件来说，为图像指定一个“自然”大小是没有意义的(这将是很大的)。因此，它需要给定大小或伸展到可用大小。您需要在网格行/列定义中使用*，以确保在放置MultiscaleImage控件的单元格位置上传递网格所在控件的剩余可用大小。

编辑

还可以添加

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

属性添加到MSI控件。