2011-08-24 4 views
25

Mam listę elementów, które chcę wyświetlić w obszarze Canvas przy użyciu powiązania danych.Jak wyświetlić elementy na płótnie przez powiązanie

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 jest prosty klasy z właściwości auto dla tekstu, Top i Left wartości

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

Kiedy databind elementy, one pojawiają się w płótnie. Ale elementy nie pojawiają się na pozycjach wymienionych przy użyciu właściwości Góra i Lewa.

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

ItemsControl używa StackPanel jako domyślny itemspanel. dodawany blok tekstowy faktycznie dodaje się do panelu stosu, ale nie do obszaru roboczego. ItemsControl dodaje do płótna. Spróbuj zmienić itemspanel na canvas – Bathineni

+0

Dzięki za odpowiedź bathineni. Próbowałem umieścić ItemsPanel jako Canvas, ale nie działało. Elementy zaczęły się pokazywać jedna nad drugą. Dodanie ItemContainerStyle zadziałało. –

+0

możliwy duplikat [WPF: Czy możliwe jest powiązanie właściwości Children's Canvas w XAML?] (Http://stackoverflow.com/questions/889825/wpf-is-it-possible-to-bind-a-canvass-children -property-in-xaml) –

Odpowiedz

37

Ustaw ItemsPanel do Canvas i wiążą pojemników zamiast TextBlock w 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> 
+0

Jeśli mam "Kształt" zamiast "TextBlock", czy mogę po prostu zastąpić jeden z drugim? – IAbstract

+0

Ponadto, gdzie znajduje się 'ItemsControl' znajdujący się w drzewie dokumentu? – IAbstract

+0

ItemsControl.ItemsContainerStyle było tym, czego potrzebowałem, aby reszta działała. Dziękuję. – Grenter