web-dev-qa-db-ja.com

バインディングを介してCanvasにアイテムを表示する方法

データバインディングを使用して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>
c#wpfxamldata-bindingwpf-controls
29
Souvik Basu

ItemsPanelをCanvasに設定し、TextBlockの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>
44
Fredrik Hedblad