StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Might I suggest an alternative instead?</p> <ul> <li>Create an <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx"><code>ItemsControl</code></a> which utilizes the <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.aspx"><code>Canvas</code></a> panel as it's drawing surface.</li> <li>Bind the <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemssource.aspx"><code>ItemsControl.ItemsSource</code></a> to a collection of custom objects which contain coordinate information.</li> <li>Use a <a href="http://msdn.microsoft.com/en-us/library/system.windows.datatemplate.aspx"><code>DataTemplate</code></a> to control how each item is visually represented on the canvas. Alternatively, you could use multiple <code>DataTemplate</code>s and use a <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx"><code>DataTemplateSelector</code></a> to choose which one to apply conditionally.</li> </ul> <hr> <p><b>XAML:</b></p> <pre><code><ItemsControl ItemsSource="{Binding Path=MyObjectList}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Rectangle Canvas.Left="{Binding Path=X}" Canvas.Top="{Binding Path=Y}" Canvas.ZIndex="{Binding Path=Z}" ... /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </code></pre> <p><b>C#:</b></p> <pre><code>public class MyObject { public double X { get; set; } public double Y { get; set; } public int Z { get; set; } // Additional proeprties... } </code></pre> <p>This is probably a better alternative than stacking a bunch of canvas panels on top of each other.</p> <hr> <p>An excerpt from a <a href="http://drwpf.com/blog/2008/02/10/itemscontrol-p-is-for-panel/">very good resource</a>:</p> <blockquote> <p>Let’s just recap a couple of things before we get started… In ‘C’ is for Collection, we learned that an ItemsControl surfaces a collection of items in a very predictable way (namely, as a CollectionView). Then in ‘D’ is for DataTemplate, we learned that an item within the collection can be any CLR object and the visual representation of the item is defined using a template of visual elements (called a DataTemplate).</p> <p>The next question that logically arises is, “where do we put these visuals?” More specifically, once the data template for an item has been inflated, where should its visuals be positioned? To answer this question, we will now examine how “layout” is handled for items within an ItemsControl.</p> </blockquote> <p>Basically:</p> <ul> <li>ItemsControl - Collection of items</li> <li>DataTemplate - How each item is visually represented</li> <li>Panel - How each visual representation is laid out.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload