如何通过绑定在Canvas中显示项目 [英] How to display items in Canvas through Binding

问题描述

我有使用数据绑定在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;组; } 
 public double Top {get;组; } 
 public double Left {get;组; } 
} 
  

当我对数据进行数据绑定时，它们会出现在画布中。但是这些项目不会出现在使用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> 
  

解决方案

设置 ItemsPanel 到 Canvas ，并绑定中的 TextBlock DataTemplate

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




I have list of items that I want to display in Canvas using data binding.

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 is a simple class with auto properties for Text, Top and Left values

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

When I databind the items, they do appear in canvas. But the items do not appear at positions mentioned using Top and Left properties.

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

解决方案

Set the ItemsPanel to a Canvas and bind the containers instead of the TextBlock in the 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>

这篇关于如何通过绑定在Canvas中显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！