如何通过绑定在Canvas中显示项目

Question

我有一组项目，想要使用数据绑定在Canvas中显示。

ItemsToShowInCanvas = new ObservableCollection<ItemDetail>
   {
       new ItemDetail {Text = "ABC", Top = 10, Left = 200},
       new ItemDetail {Text = "DEF", Top = 100, Left = 300},
       new ItemDetail {Text = "PQR", Top = 50, Left = 150}
   };

ItemDetail是一个简单的类，具有用于文本、顶部和左侧值的自动属性。

public class ItemDetail
{
    public string Text { get; set; }
    public double Top { get; set; }
    public double Left { get; set; }
}

当我绑定数据项时，它们确实出现在画布中。但是使用Top和Left属性指定的位置上没有显示这些项目。

<Canvas>
    <ItemsControl ItemsSource="{Binding Path=ItemsToShowInCanvas}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=Text}" Canvas.Top="{Binding Path=Top}" Canvas.Left="{Binding Path=Left}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

- Souvik Basu

---

ItemsControl 使用 StackPanel 作为默认的 ItemsPanel。你正在添加的 TextBlock 实际上是添加到了 StackPanel 而不是 Canvas 上。ItemsControl 是添加到 Canvas 上的。尝试将 ItemsPanel 更改为 Canvas。 - Bathineni

谢谢您的回答，bathineni。我尝试把 ItemsPanel 设置为 Canvas，但是它没起作用。项目开始互相重叠显示。添加 ItemContainerStyle 后，问题得到解决。 - Souvik Basu

可能是WPF：是否可以在XAML中绑定Canvas的Children属性？的重复问题。 - H.B.

@H.B. 绝对是重复的。另一方面，可能的重复问题链接如下：https://dev59.com/Y3M_5IYBdhLWcg3wslfs https://dev59.com/ZHE95IYBdhLWcg3wMrAB https://dev59.com/KFPTa4cB1Zd3GeqPjXIg http://stackoverflow.com/questions/5261640/how-can-i-position-viewmodels-in-an-itemscontrol。感觉这里的每个问题都已经被回答了至少10次 :) - Fredrik Hedblad

Answer 1

将 ItemsPanel 设置为 Canvas，并绑定容器而不是在 DataTemplate 中使用 TextBlock

<ItemsControl ItemsSource="{Binding Path=ItemsToShowInCanvas}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding Left}"/>
            <Setter Property="Canvas.Top" Value="{Binding Top}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Text}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

- Fredrik Hedblad

---

如果我有一个“形状（Shape）”而不是“文本块（TextBlock）”，我能不能简单地用一个替换另一个？ - IAbstract

另外，ItemsControl 在文档树中的哪个位置？ - IAbstract

ItemsControl.ItemsContainerStyle正是我所需要的，其余部分已经运作良好。非常感谢。 - Grenter