Silverlight MultiScaleImage 不会填充可用空间
是我的问题还是 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
当我将 h/w 设置为“自动”时,它会很好地填充第 0 行,如下所示:
您甚至可以放入该行以进行额外测量,但当我这样做时不需要它:
It fills Row 0 for me just fine when I set h/w to Auto, like this:
You can even throw in the Row for extra measure, but it wasn't needed when I did it:
尝试按如下方式更改网格单元定义:-
MultiscaleImage 控件为图像指定“自然”尺寸(这将是巨大的)是没有意义的。因此,它期望得到给定的大小或拉伸到可用的大小。您需要在网格行/列定义中使用 * 来确保放置 Grid 的控件的剩余可用大小传递到放置 MultiscaleImage 控件的单元格位置。
编辑
还要
向 MSI 控件添加属性。
Try changing the Grid Cell Definitions as follows:-
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
properties to the MSI control.