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

Question

我正在尝试使用 Canvas 来显示具有“世界”位置(而不是“屏幕”位置)的对象。 Canvas 定义如下:

<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 对象添加到 Canvas 之前，如何对其应用 worldToScreen 方法？

<小时/>

编辑:

我有点困惑我是否走对了路，所以我发布了另一个问题:How to use WPF to visualize a simple 2D world (map and elements)

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

Answer 1

您提供的代码的主要问题是 Canvas.Left和Canvas.Top属性是相对于 Canvas那是在 DataTemplate对于ItemsControl 。这不断“重置”原点。相反，您可以:

• 删除 Canvas来自DataTemplate
• 制作ItemsPanel对于ListBox一个Canvas
• 定位ItemsPresenter包裹 ItemsControl带有 Canvas.Top 的项目和Canvas.Left
• 确保Image和 Canvas具有相同的坐标，或者切换到使用`Canvas

这是一个完整的仅 XAML 定位示例 ItemsControl Canvas 上的项目与 Image背后Canvas :

<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>