如果您要在Silverlight中构建组织结构图构建器,您将使用什么基类来创建图表框?

时间:2009-09-05 22:18:57

标签: silverlight

对于这个问题,让我们假设我们想要展示员工,头衔,部门的面貌,以及他们是否喜欢Piñacoladas/在雨中被抓住。

也许它看起来像下面这样: http://www.edrawsoft.com/images/examples/Photo-Org-Chart-Full.png

你会用...

  • System.Windows.Control.UserControl?
  • FrameworkElement的?
  • 的UIElement?
  • 帆布

为什么呢?一如既往,谢谢你的建议!我非常感谢!

3 个答案:

答案 0 :(得分:2)

如果我必须使用高级布局创建组织结构图控件,我可能会从Control派生,并以与例如{1}}类似的方式创建“真实”模板化控件。 TreeView控件。TreeView这可能是创建新控件的最先进的路径,但也是最强大的。

您也可以修改TreeViewItem的控制模板,并使其从中心向下增长,而不是从左上角向左和向下增长,但可能很难或无法自定义TreeView的各个级别的布局没有任何额外的信息来描述特定节点的布局。

事实上,我最近做了一些修改TreeView控制模板的实验,但我偶然发现了一些我不理解的东西。幸运的是,我弄清楚我做错了什么,你可以看到如何在我的question here on Stack Overflow中将{{1}}子项目的方向从垂直更改为水平。

答案 1 :(得分:0)

我见过一个使用TreeViewItem和ControlTemplates的网站,但我现在找不到它,我认为它出现在CodeProject上。

我最近玩的另一个想法是使用2个usercontrols,itemcontrols和stackpanels。

这是一个带有文本的OrgBar矩形的示例,它通过递归地将ItemSource设置为它的子集合,在OrgGroup控件中呈现它的子节点。您可以将根orgbar放在画布上,并使用箭头的路径。我试图指出基础知识,但如果你需要更多,我可以填补空白。

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

<UserControl x:Class="OrgBar">
<Grid>
    <StackPanel ToolTipService.ToolTip="{Binding BarName}" Cursor="Hand">
        <Rectangle Fill="{Binding BarColor}" Style="{StaticResource RecStyle}"/>
        <TextBlock Text="{Binding BarName}" HorizontalAlignment="Center"               
        Margin="0,10,0,0" />
        <local:OrgGroup Margin="0,20" HorizontalAlignment="Center" 
  DataContext="{Binding Children}" />
    </StackPanel>
    </Grid>
 </UserControl>

 <UserControl x:Class="OrgGroup">
  <Grid>
    <!-- this {Binding} to nothing means bind to DataContext}--> 
    <ItemsControl ItemsSource="{Binding}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:OrgBar Style="{StaticResource OrgBarStyle}"  
                 DataContext="{Binding}" /> 
             <!-- this {Binding} refers to the the child node this time}  -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
   </Grid>
  </UserControl>

答案 2 :(得分:0)

这实际上是一个树结构,就像Paully建议的那样,我将从TreeView(Silverlight Toolkit)开始,并自定义控件模板和树视图。