How to display items in Canvas through Binding
up vote
27
down vote
favorite
8
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>
c# wpf xaml data-binding wpf-controls
edited Sep 18 '16 at 14:21
SmiLe
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
add a comment |
up vote
27
down vote
favorite
8
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>
c# wpf xaml data-binding wpf-controls
edited Sep 18 '16 at 14:21
SmiLe
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
2
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53
add a comment |
up vote
27
down vote
favorite
8
up vote
27
down vote
favorite
8
8
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>
c# wpf xaml data-binding wpf-controls
edited Sep 18 '16 at 14:21
SmiLe
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
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>
c# wpf xaml data-binding wpf-controls
c# wpf xaml data-binding wpf-controls
edited Sep 18 '16 at 14:21
SmiLe
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
edited Sep 18 '16 at 14:21
SmiLe
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
edited Sep 18 '16 at 14:21
SmiLe
9612
edited Sep 18 '16 at 14:21
SmiLe
9612
edited Sep 18 '16 at 14:21
SmiLe
9612
9612
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
asked Aug 24 '11 at 14:45
Souvik Basu
1,86142136
1,86142136
2
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53
add a comment |
2
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53
2
2
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53
add a comment |
1 Answer
1
active
oldest
votes
up vote
40
down vote
accepted
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>
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
If I have aShapeinstead of aTextBlockcan I simply replace one with the other?
– IAbstract
Sep 12 '15 at 19:35
Also, where does theItemsControlreside in the document tree?
– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
40
down vote
accepted
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>
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
If I have aShapeinstead of aTextBlockcan I simply replace one with the other?
– IAbstract
Sep 12 '15 at 19:35
Also, where does theItemsControlreside in the document tree?
– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
add a comment |
up vote
40
down vote
accepted
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>
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
If I have aShapeinstead of aTextBlockcan I simply replace one with the other?
– IAbstract
Sep 12 '15 at 19:35
Also, where does theItemsControlreside in the document tree?
– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
add a comment |
up vote
40
down vote
accepted
up vote
40
down vote
accepted
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>
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
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>
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.6k18214251
69.6k18214251
If I have aShapeinstead of aTextBlockcan I simply replace one with the other?
– IAbstract
Sep 12 '15 at 19:35
Also, where does theItemsControlreside in the document tree?
– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
add a comment |
If I have aShapeinstead of aTextBlockcan I simply replace one with the other?
– IAbstract
Sep 12 '15 at 19:35
Also, where does theItemsControlreside in the document tree?
– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
If I have a
Shape instead of a TextBlock can I simply replace one with the other?– IAbstract
Sep 12 '15 at 19:35
If I have a
Shape instead of a TextBlock can I simply replace one with the other?– IAbstract
Sep 12 '15 at 19:35
Also, where does the
ItemsControl reside in the document tree?– IAbstract
Sep 12 '15 at 19:48
Also, where does the
ItemsControl reside in the document tree?– IAbstract
Sep 12 '15 at 19:48
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
ItemsControl.ItemsContainerStyle was just what I needed I have the rest working. Thank a bunch.
– Grenter
Jan 5 '16 at 15:14
1
1
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
This also doesn't work for UWP apps.
– Maciej Klemarczyk
Jun 7 '16 at 16:15
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7177432%2fhow-to-display-items-in-canvas-through-binding%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
ItemsControl uses Stackpanel as default itemspanel. the textblock you are adding is actually adding to a stackpanel but not to canvas. The ItemsControl is adding to canvas. Try changing itemspanel to canvas
– Bathineni
Aug 24 '11 at 14:51
Thanks for the answer bathineni. I tried putting ItemsPanel as Canvas but it didnt work. The items started showing one over the other. Adding the ItemContainerStyle worked.
– Souvik Basu
Aug 24 '11 at 15:07
possible duplicate of WPF: Is it possible to bind a Canvas's Children property in XAML?
– H.B.
Aug 24 '11 at 15:34
@H.B. Definetely duplicate. On the other hand, possible duplicates: stackoverflow.com/questions/1265364/… stackoverflow.com/questions/2415580/… stackoverflow.com/questions/4708151/… stackoverflow.com/questions/5261640/…. Feels like every question here has been answered at least 10 times :)
– Fredrik Hedblad
Aug 24 '11 at 19:53