Cách hiển thị các mục trong Canvas qua Binding

Question

Tôi có danh sách các mục mà tôi muốn hiển thị trong Canvas bằng cách sử dụng ràng buộc dữ liệu.

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 là một lớp đơn giản với tính chất tự động cho Text, Top và Left giá trị

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

Khi tôi DataBind các mục, họ xuất hiện trong canvas. Nhưng các mục không xuất hiện ở các vị trí được đề cập bằng cách sử dụng thuộc tính trên cùng và bên trái.

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

Answer 1

Đặt ItemsPanel đến một Canvas và ràng buộc container thay vì TextBlock trong DataTemplate

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