如何通过 Binding 在 Canvas 中显示项目答案

【问题标题】：How to display items in Canvas through Binding如何通过 Binding 在 Canvas 中显示项目
【发布时间】：2011-11-02 21:28:31
【问题描述】：

我有想要使用数据绑定在 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 是一个简单的类，具有 Text、Top 和 Left 值的自动属性

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>

【问题讨论】：

ItemsControl 使用 Stackpanel 作为默认项目面板。您添加的文本块实际上是添加到堆栈面板而不是画布。 ItemsControl 正在添加到画布中。尝试将项目面板更改为画布
感谢您的回答。我尝试将 ItemsPanel 作为 Canvas 但它没有用。这些项目开始一个接一个地显示。添加 ItemContainerStyle 工作。
WPF: Is it possible to bind a Canvas's Children property in XAML?的可能重复
@H.B.绝对重复。另一方面，可能的重复：stackoverflow.com/questions/1265364/…stackoverflow.com/questions/2415580/…stackoverflow.com/questions/4708151/…stackoverflow.com/questions/5261640/…。感觉这里的每个问题都至少回答了 10 次 :)

标签： c# wpf xaml data-binding wpf-controls

【解决方案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>

【讨论】：

如果我有一个Shape 而不是TextBlock，我可以简单地用另一个替换一个吗？
另外，ItemsControl 驻留在文档树的什么位置？
ItemsControl.ItemsContainerStyle 正是我所需要的，我让其余的工作。非常感谢。