none
使用Silverlight Toolkit TreeView树形控件 RRS feed

  • 常规讨论

  • 尽管在Silverlight Toolkit中有相关的DEMO来演示如何使用TreeView控件,但其还是有一些功能没
    被演示出来。因为在我们平时开发过程中,数据是被动态查询获取的(不是DEMO中的静态文件方式)。
    因此今天就演示一下如何使用WCF来获取相应数据并使用TreeView来动态加载相应结点信息。

         首先,我们要创建一个WCF服务来获取相应的树形节点数据信息,如下:
        
    public class ForumInfo
    {
        
    public int ForumID { getset; }
        
    public int ParendID { getset; }
        
    public string ForumName { getset; }
    }

    [ServiceContract(Namespace 
    = "")]
    [AspNetCompatibilityRequirements(RequirementsMode 
    = AspNetCompatibilityRequirementsMode.Allowed)]
    public class DateService
    {
     
        [OperationContract]
        
    public List<ForumInfo> GetForumData()
        {
            List
    <ForumInfo> forumList = new List<ForumInfo>();
            forumList.Add(
    new ForumInfo() { ForumID = 1, ParendID = 0, ForumName = "笔记本版块"});
            forumList.Add(
    new ForumInfo() { ForumID = 2, ParendID = 0, ForumName = "台式机版块" });

            forumList.Add(
    new ForumInfo() { ForumID = 3, ParendID = 1, ForumName = "Dell笔记本" });
            forumList.Add(
    new ForumInfo() { ForumID = 4, ParendID = 1, ForumName = "IBM笔记本" });
            forumList.Add(
    new ForumInfo() { ForumID = 5, ParendID = 4, ForumName = "IBM-T系列" });
            forumList.Add(
    new ForumInfo() { ForumID = 6, ParendID = 4, ForumName = "IBM-R系列" });

            forumList.Add(
    new ForumInfo() { ForumID = 7, ParendID = 2, ForumName = "联想台式机" });
            forumList.Add(
    new ForumInfo() { ForumID = 8, ParendID = 2, ForumName = "方正台式机" });
            forumList.Add(
    new ForumInfo() { ForumID = 9, ParendID = 2, ForumName = "HP台式机" });
            forumList.Add(
    new ForumInfo() { ForumID = 10, ParendID = 7, ForumName = "联想家悦H系列" });
            forumList.Add(
    new ForumInfo() { ForumID = 11, ParendID = 7, ForumName = "联想IdeaCentre系列" });

            
    return forumList;
        }
    }




         从代码中可看出,ForumInfo是使用ParendID来记录父结点信息并以此来创建一个树形结构的,而方法:
    GetForumData()即是演示了我们平时查询数据的过程。我们在Silverlight中添加对该服务的引用即可。

         我们在Silverlight中添加对Silverlight Toolkit相关DLL引用,然后向XAML文件上拖入一个TREEVIEW
    控件。并将其命名为“TreeOfLife”,最后我们再放几个TextBlock来显示树形结点被点击后显示的相应的
    ForumInfo信息。最后XAML中的内容如下所示:
        

    <controls:TreeView x:Name="TreeOfLife" Margin="5" Grid.Column="0" Grid.Row="1"  
              SelectedItemChanged
    ="TreeOfLife_SelectedItemChanged" />

    <Border BorderBrush="Gray" BorderThickness="1" Padding="8" Margin="8,0,0,0" Grid.Row="1" Grid.Column="1">
        
    <StackPanel x:Name="DetailsPanel" Margin="4">
            
    <StackPanel Orientation="Horizontal">
                
    <TextBlock Text="版块ID: " FontWeight="Bold"  />
                
    <TextBlock Text="{Binding ForumID}" />
            
    </StackPanel>
            
    <StackPanel Orientation="Horizontal">
                
    <TextBlock Text="版块名称: " FontWeight="Bold"  />
                
    <TextBlock Text="{Binding ForumName}" />
            
    </StackPanel>
            
    <StackPanel Orientation="Horizontal">
                
    <TextBlock Text="版块信息: " FontWeight="Bold" />
                
    <TextBlock x:Name="DetailText" TextWrapping="Wrap" Text="{Binding ForumName}"/>
            
    </StackPanel>
        
    </StackPanel>
    </Border>



         下面是相应的XAML.CS文件中的内容,主要是使用递归方式遍历数据列表并创建相关的结点信息:
         

    public partial class Page : UserControl
    {
         DateServiceClient dataServiceClient 
    = new DateServiceClient();

         ObservableCollection
    <ForumInfo> forumList = new ObservableCollection<ForumInfo>();

         
    public Page()
         {
             InitializeComponent();

             
    //此样式只添加在根结点上
             
    //TreeOfLife.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;
                  
             dataServiceClient.GetForumDataCompleted
    +=new EventHandler<GetForumDataCompletedEventArgs>(dataServiceClient_GetForumDataCompleted);
             dataServiceClient.GetForumDataAsync();
         }

         
    void dataServiceClient_GetForumDataCompleted(object sender, GetForumDataCompletedEventArgs e)
         {
             
    try
             {
                 forumList 
    = e.Result;
                 AddTreeNode(
    0null);  
             }
             
    catch
             {
                 
    throw new NotImplementedException();
             }
         }

         
    private void AddTreeNode(int parentID, TreeViewItem treeViewItem)
         {
             List
    <ForumInfo> result = (from forumInfo in forumList
                                       
    where forumInfo.ParendID == parentID
                                       select forumInfo).ToList
    <ForumInfo>();

             
    if (result.Count > 0)
             {
                 
    foreach (ForumInfo foruminfo in result)
                 {
                     TreeViewItem objTreeNode 
    = new TreeViewItem();
                     objTreeNode.Header 
    = foruminfo.ForumName;
                     objTreeNode.DataContext 
    = foruminfo;

                     
    //此样式将会添加的所有叶子结点上
                     
    //objTreeNode.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;
     
                     
    //添加根节点
                     if (treeViewItem == null)
                     {
                         TreeOfLife.Items.Add(objTreeNode);
                     }
                     
    else
                     {                    
                         treeViewItem.Items.Add(objTreeNode);
                     }
                     AddTreeNode(foruminfo.ForumID, objTreeNode);
                 }
             }
         }


         
    private void TreeOfLife_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
         {
             TreeViewItem item 
    = e.NewValue as TreeViewItem;
             ForumInfo fi 
    = item.DataContext as ForumInfo;

             DetailsPanel.DataContext 
    = fi;
         }
    }



        下面演示一下效果,如下图所示:
        
       
        
        
          当前TreeView控件还支持样式定义,比如可以给每个树形结点前添加CheckBox和一个小图标,这里我们使用下
    面样式:
       

    <UserControl.Resources>
            
    <Style x:Key="RedItemStyle" TargetType="controls:TreeViewItem">
                
    <Setter Property="HeaderTemplate">
                    
    <Setter.Value>
                        
    <DataTemplate>
                            
    <StackPanel Orientation="Horizontal">
                                
    <CheckBox />
                                
    <Image Source="image/default.png"/>
                                
    <TextBlock Text="{Binding}" Foreground="Red" FontStyle="Italic" />
                            
    </StackPanel>
                        
    </DataTemplate>
                    
    </Setter.Value>
                
    </Setter>
                
    <Setter Property="IsExpanded" Value="True" />
            
    </Style>
    </UserControl.Resources>

        
        然后在cs文件中使用下面语句将该样式绑定到TreeView上:
        
       

    TreeOfLife.ItemContainerStyle = this.Resources["RedItemStyle"as Style;

        
        下面就是应用了该样式的运行效果:
        
       
        

        当前TreeView中定义样式模版还可以使用ItemTemplate,下面是一段样式代码:

    <controls:TreeView.ItemTemplate>
        
    <controls:HierarchicalDataTemplate ItemsSource="{Binding Subclasses}"
                ItemContainerStyle
    ="{StaticResource ExpandedItemStyle}">
            
    <StackPanel>
                
    <TextBlock Text="{Binding Rank}" FontSize="8" FontStyle="Italic" Foreground="Gray" Margin="0 0 0 -5" />
                
    <TextBlock Text="{Binding Classification}" />
            
    </StackPanel>
        
    </controls:HierarchicalDataTemplate>
    </controls:TreeView.ItemTemplate>



        运行该样式的效果如下图所示:
        
       
        
        
        好了,今天的内容就先到这里了。
        
        DEMO下载,请点击这里:)
        


        作者: daizhj, 代震军

        Tags: silverlight,treeview,树形,控件
        
        网址: http://blog.csdn.net/daizhj  

    2009年5月27日 3:29