How to display items in Canvas through Binding
up vote
29
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
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
add a comment |
up vote
29
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
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
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
29
down vote
favorite
8
up vote
29
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
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
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
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
edited Sep 18 '16 at 14:21
SmiLe
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
edited Sep 18 '16 at 14:21
SmiLe
10112
edited Sep 18 '16 at 14:21
SmiLe
10112
edited Sep 18 '16 at 14:21
SmiLe
10112
10112
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
asked Aug 24 '11 at 14:45
Souvik Basu
1,87142136
1,87142136
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
42
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.9k18215252
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
1
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 |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
42
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.9k18215252
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
1
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
42
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.9k18215252
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
1
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
42
down vote
accepted
up vote
42
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.9k18215252
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.9k18215252
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.9k18215252
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.9k18215252
answered Aug 24 '11 at 14:54
Fredrik Hedblad
69.9k18215252
69.9k18215252
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
1
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
1
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
1
1
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
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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