Silverlight MultiScaleImage 不会填充可用空间

发布于 2024-08-17 03:01:50 字数 2770 浏览 4 评论 0原文

是我的问题还是 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}");
}

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

朦胧时间 2024-08-24 03:01:50

当我将 h/w 设置为“自动”时,它会很好地填充第 0 行,如下所示:

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

您甚至可以放入该行以进行额外测量,但当我这样做时不需要它:

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

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"  /> 
雪若未夕 2024-08-24 03:01:50

尝试按如下方式更改网格单元定义:-

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

MultiscaleImage 控件为图像指定“自然”尺寸(这将是巨大的)是没有意义的。因此,它期望得到给定的大小或拉伸到可用的大小。您需要在网格行/列定义中使用 * 来确保放置 Grid 的控件的剩余可用大小传递到放置 MultiscaleImage 控件的单元格位置。

编辑

还要

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

向 MSI 控件添加属性。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文