Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've seen a website that uses TreeViewItem and ControlTemplates, but I can't find it at the moment, I think it was on CodeProject.</p> <p>Another idea I was playing with recently is use 2 usercontrols, itemcontrols and stackpanels.</p> <p>Here's an example of a an OrgBar rectangle with text under it and it renders it's children in OrgGroup control by setting the ItemSource to it's children collection recursively. You can put the root orgbar on a canvas and play around with paths for the arrows. I tried to point out the basics but if you need more I can fill in the blanks.</p> <pre><code>Public Class OrgBarDataNode Public Property BarColor as New SolidColorBrush(Colors.Red) Public Property BarName As String Public Property Children as New ObservableCollection(Of OrgBarDataNode) End Class Class MainPage ... Public Sub Loaded Dim Root as New OrgBarDataNode With {.BarName = "Root"} Dim Child1 as New OrgBarDataNode With {.Barname = "Child1"} Root.Children.Add(Child1) LayoutRoot.Children.Add(Root) End Sub ... End Class &lt;UserControl x:Class="OrgBar"&gt; &lt;Grid&gt; &lt;StackPanel ToolTipService.ToolTip="{Binding BarName}" Cursor="Hand"&gt; &lt;Rectangle Fill="{Binding BarColor}" Style="{StaticResource RecStyle}"/&gt; &lt;TextBlock Text="{Binding BarName}" HorizontalAlignment="Center" Margin="0,10,0,0" /&gt; &lt;local:OrgGroup Margin="0,20" HorizontalAlignment="Center" DataContext="{Binding Children}" /&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/UserControl&gt; &lt;UserControl x:Class="OrgGroup"&gt; &lt;Grid&gt; &lt;!-- this {Binding} to nothing means bind to DataContext}--&gt; &lt;ItemsControl ItemsSource="{Binding}" &gt; &lt;ItemsControl.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Center" /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/ItemsControl.ItemsPanel&gt; &lt;ItemsControl.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;local:OrgBar Style="{StaticResource OrgBarStyle}" DataContext="{Binding}" /&gt; &lt;!-- this {Binding} refers to the the child node this time} --&gt; &lt;/DataTemplate&gt; &lt;/ItemsControl.ItemTemplate&gt; &lt;/ItemsControl&gt; &lt;/Grid&gt; &lt;/UserControl&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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