談一談TREEVIEW控件的樣式

http://msdn.microsoft.com/zh-cn/library/dd728671%28v=VS.95%29.aspx里面有詳細的MS官方的TREEVIEW控件的介紹。我只是談一談我接觸的treeview的一些收獲。

或許我是比較習慣MS的控件以及控件預設的一些屬性，被他們開玩笑說不是正宗的程序員，maybe，我不是吧。好了，言歸正傳。

treeview控件在asp.net和wpf中都有，在asp.net中可以再css文件中設置其樣式，同時其各個屬性也是發揮着很重要的作用。如果是需要引用css文件，則其格式和其他標簽引用的方法是一樣，在頁面head里面引入css文件，具體到某樣式則是：如“cssclass=“wrap””。如果不是導入外部css文件，則是在頁面控件中設置各種屬性，常見的width，height等等，具體到某控件的特有屬性等等。那相對於treeview來說，更多的會關注於RootNodeStyle、ParentStyle、LeafNodeStyle等等。先看一個例子，然后仔細介紹。

<asp:TreeView ID="trPage" runat="server"   ShowExpandCollapse="true"  CollapseImageUrl="~/images/img08.png" ExpandImageUrl="~/images/img13.png"
            ForeColor="#412112" HoverNodeStyle-BackColor="AliceBlue"   LeafNodeStyle-CssClass="tex"
            RootNodeStyle-BackColor="Aqua" ParentNodeStyle-BackColor="BlanchedAlmond"  NodeIndent="0" RootNodeStyle-NodeSpacing="2px" ParentNodeStyle-NodeSpacing="2px"
            LeafNodeStyle-BackColor="ButtonShadow" RootNodeStyle-Width="70px"  ParentNodeStyle-Width="70px" LeafNodeStyle-Width="60px" LeafNodeStyle-NodeSpacing="2px" LeafNodeStyle-VerticalPadding="5px">
             <Nodes>
              <asp:TreeNode Text="1" >
               <asp:TreeNode Text="11"/>
               <asp:TreeNode Text="111" />
              </asp:TreeNode>

              <asp:TreeNode Text="2">
               <asp:TreeNode Text="22" />
               <asp:TreeNode Text="222">
                 <asp:TreeNode Text="2222" />
               </asp:TreeNode>
              </asp:TreeNode>

              <asp:TreeNode Text="3">
               <asp:TreeNode Text="33" />
               <asp:TreeNode Text="333">
                <asp:TreeNode Text="3333">
                  <asp:TreeNode Text="33333" />
                </asp:TreeNode>
               </asp:TreeNode>
              </asp:TreeNode>

             </Nodes>            
            </asp:TreeView>

首先需要設置treeview樣式，那基本的tree結構心中是有底的，將若干個treenode嵌套或者堆砌就是一棵tree了，或者將需要用treeview顯示的數據binding到treeview上，然后再設計自己想要的樣式。或簡約或專業，但是都可以根據自己的風格設置。在tree中，結點預設的圖片可能不能滿足你的要求，那你可以自己設置collapseImageUrl（折疊結點）、ExpandImageUrl（展開結點）、NoExpandImageUrl（不能展開結點）。如：CollapseImageUrl="~/images/img08.png"。接着你就可以開始根據你想要的效果設置其他樣式了，比如HoverNodeStyle、SelectedNodeStyle、RootNodeStyle、ParentNodeStyle、LeafNodeStyle、NodeStyle等等，在每一個Style中有可以具體的設置BackColor、BorderStyle、ChildNodePadding、FontStyle等等，當然在treeview中還可以設定各種事件等，這就需要讀者自己動手嘗試了。

在wpf中，treeview一般會和mvvm模式中的viewmodel相聯系，先看一個簡單的例子。

    <TreeView Name="" Width="250" Padding="0" Margin="0" BorderThickness="1">
            <TreeView.ItemTemplate>
               <HierarchicalDataTemplate DataType="" ItemsSource="">
                  <StackPanel Orientation="Horizontal">
                     <TextBlock VerticalAlignment="Center" Text=""></TextBlock>
               </StackPanel>
             </HierarchicalDataTemplate>
          </TreeView.ItemTemplate>
      </TreeView>

可以在<Style>中設置樣式，如：

<Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="" />
            <Setter Property="IsSelected" Value="" />
            <Setter Property="FontWeight" Value="Normal" />              
</Style>
在WPF中還有一個類似的控件expander，也是可伸縮展開的樹形控件，不過它相對來說靈活很多，方向可上可下可左可右。具體可以參考MSDN。
這是開張第一篇，接着周五上班時間的尾巴，就這樣收筆吧。