使用 ItemsControl 时如何将 X/Y 位置转换为 Canvas Left/Top 属性

Question

我正在尝试使用画布来显示具有“世界”位置（而不是“屏幕”位置）的对象。画布是这样定义的：

<Canvas Background="AliceBlue">
    <ItemsControl Name="myItemsControl" ItemsSource="{Binding MyItems}">
        <Image x:Name="myMapImage" Panel.ZIndex="-1" />
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <TextBlock Canvas.Left="{Binding WorldX}" Canvas.Top="{Binding WorldY}"
                               Text="{Binding Text}"
                               Width="Auto" Height="Auto" Foreground="Red" />
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

MyItem 是这样定义的：

public class MyItem
{
    public MyItem(double worldX, double worldY, string text)
    {
        WorldX = worldX;
        WorldY = worldY;
        Text = text;
    }
    public double WorldX { get; set; }
    public double WorldY { get; set; }
    public string Text { get; set; }
}

另外，我有一个在世界坐标和屏幕坐标之间进行转换的方法：

Point worldToScreen(double worldX, double worldY)
{
    // Note that the conversion uses an internal m_mapData object
    var size = m_mapData.WorldMax - m_mapData.WorldMin;
    var left = ((worldX - m_currentMap.WorldMin.X) / size.X) * myMapImage.ActualWidth;
    var top = ((worldY - m_currentMap.WorldMin.Y) / size.Y) * myMapImage.ActualHeight;
    return new Point(left, top);
}

在当前的实现中，项目被定位在错误的位置，因为它们的位置没有转换为屏幕坐标。

在将 MyItem 对象添加到画布之前，如何在它们上应用 worldToScreen 方法？

---

编辑：

我有点困惑我是否走正确的路，所以我发布了另一个问题： 如何使用 WPF 可视化一个简单的 2D 世界（地图和元素）

对于这个问题，这里也有一个有用且完整的答案

Answer 1

您提供的代码的主要问题是 Canvas.Left 和 Canvas.Top 属性与 Canvas 中的 Canvas 相关。 ItemsControl 的 code>DataTemplate。这会不断“重置”原点。相反，您可以：

• 从 DataTemplate 中删除 Canvas
• 使 ListBox 的 ItemsPanel 成为 Canvas< /code>
• 使用 Canvas.Top 和 Canvas.Left 定位包裹 ItemsControl 项的 ItemsPresenter
• ，确保Image 和 Canvas 具有相同的坐标，或者切换到使用 `Canvas

这里是一个完整的仅 XAML 示例，用于将 ItemsControl 项定位在一个 Canvas，Canvas 后面有一个 Image：

<Grid>
    <Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png"/>
    <ItemsControl Name="myItemsControl">
        <ItemsControl.ItemsSource>
            <PointCollection>
                <Point X="10" Y="10"/>
                <Point X="30" Y="30"/>
            </PointCollection>
        </ItemsControl.ItemsSource>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="Text" Foreground="Red"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

Answer 2

您可以在绑定中的值转换器中应用此转换。值转换器实现 IValueConverter 接口 (http://msdn. microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx）。问题是您的转换需要项目的 X 和 Y 分量。对此的一个简单解决方案是绑定到 MyItem，而不是 MyItem.WorldX。您可以通过使用“Path=.”来实现此目的，如果您创建以下值转换器...

public class CoordinateLeftConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        MyItem item = value as MyItem;
        return worldToScreen(item.WorldX, item.WorldY).X;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
    }
}

您可以在绑定中使用它，如下所示：

<TextBlock Canvas.Left="{Binding Path=.,Converter={StaticResource CoordinateLeftConverter}" ... />

在页面资源中创建 CooperativeLeftConverter 实例的位置：

<UserControl.Resources>
  <CoordinateLeftConverter x:Key="CoordinateLeftConverter"/> 
</UserControl.Resources>

您当然可以需要为 Canvas.Top 属性添加另一个转换器，或者提供 ConverterParameter 以在转换后的 Point 的 X / Y 属性之间切换。

然而，更简单的解决方案可能是在 MyItem 类中执行转换，从而无需转换器！

Answer 3

当我尝试将 Canvas.Top 属性绑定到具有 CanvasTop 属性的 ViewModel 对象时，我遇到了类似的问题，Canvas.Top 属性将首先获取该值，但随后它会以某种方式重置并丢失绑定表达式。但我从这里的代码中做了一些工作。由于我使用的是 Silverlight，因此没有 ItemsContainerStyle 属性，因此我使用了 ItemsControl.Resources，因此鉴于上面的示例，我的代码如下所示：

<Grid>
<Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png"/>
<ItemsControl Name="myItemsControl">
    <ItemsControl.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemsSource>
        <PointCollection>
            <Point X="10" Y="10"/>
            <Point X="30" Y="30"/>
        </PointCollection>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="Text" Foreground="Red"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>