Windows Phone 绑定图像位置答案

【问题标题】：Windows Phone Binding Image LocationWindows Phone 绑定图像位置
【发布时间】：2013-01-29 15:38:39
【问题描述】：

我正在尝试通过 Binding 在画布上的特定位置放置一组图像。

由于某种原因，图像正在显示，但不在我指定的位置。

_roomView.Room = new Room
{
   Items = new List<Item> {
   new Item {ImageUri = "/Escape;component/Images/Items/a.jpg", XPosition = 190, YPosition = 50},
   new Item {ImageUri = "/Escape;component/Images/Items/b.png", XPosition = 390, YPosition = 100},
   new Item {ImageUri = "/Escape;component/Images/Items/b.png", XPosition = 490, YPosition = 600}}
};

listBoxItems.ItemsSource = _roomView.Room.Items;

XML

<Canvas>
     <Image Source="{Binding ImageUri}" Stretch="None" Canvas.Left="{Binding Room.Items.XPosition}" Canvas.Top="{Binding Room.Items.YPosition}"/>
</Canvas>

XPosition 和 YPosition 是 int 类型。我尝试将它们更改为加倍，但图像仍然没有显示在我想要的位置。它们只会显示在屏幕的左上角 - 彼此重叠。

谁能看出问题所在？

【问题讨论】：

标签： silverlight windows-phone-7 binding windows-phone-8 windows-phone

【解决方案1】：

您正在使用包URI 格式，该格式仅在您的图像具有“Embedded Resource”的Build Action 时有效。即使那样，我也不确定Image.Source 是否真的支持这种URI 格式，如果URI 必须是Relative 或Absolute。检查图像Build Action（这些文件上的Right click --> Properties）并尝试更改UriKind。

无论哪种方式，除非您有充分的理由，否则最好将媒体资产保留为：
Build Action = Content 并使用正常路径 URIs。将图像添加到 DLLs 作为嵌入式资源不利于启动性能，因为将较大的 DLLs 加载到 AppDomain 需要更长的时间。
从内存使用的角度来看，这也很糟糕，因为加载到内存中的DLLs 现在更大了。

底线：

<Image Source="myPicture.png" /> 格式的性能比

<Image Source="myAssemblyName;component/myPicture.png" /> 语法。

【讨论】：

URI 不是问题。这是 Canvas.Left 和 Canvas.Top 属性不起作用。 URI 的绑定非常好。是 XPosition 和 YPosition 没有跨越 - 即图像不在它们应该在的位置。
项目是集合吗？请问“Room.Items”究竟如何那些属性？或者“Room.Items”集合中的项目是否具有该属性？
Items 是一个集合，是的。是的，Item 具有 XPosition 和 YPosition 的属性。
好的，但是项目集合本身没有“XPosition”和“YPosition”。你明白为什么你的绑定表达式不起作用了吗？此处更好的绑定表达式可能是 Canvas.Top="{Binding Room.Items[0].YPosition}"。
但是如果我做 [0] 那么他们都会在同一个地方。

【解决方案2】：

您的 C# 代码包含图像集合。

您的 XAML 仅显示单个图像。如果 XAML 在列表框数据模板中，您将获得多个画布，每个画布有 1 张图像。

要在单个 Canvas 上显示一组图像，您可以使用例如<ItemsControl>，将 ItemsPanel 设置为 Canvas，并在数据模板中指定带有源、canvas.left 和 canvas.top 的单个图像。

如果您尝试使用 ListBox 而不是 ItemsControl 来执行我所描述的操作，它不会起作用，因为它在 ItemsPanel 和 item 之间多了一层 UI 元素，即 item 容器。

附：解决此类 GUI 问题的最快方法 - XAML Spy，我已经为自己购买了个人许可证。评估为期 21 天，功能齐全。

【讨论】：

谢谢你。您能否制作 XAML，以便我可以准确了解您的意思？请问？