Silverlight实例教程9：Silverlight主页面布局

说到页面布局在asp.net中我们已经尝试过很多种了。但最经典的还是类似左树右表的结构。今天我们就来说说XCenter主页面的结构。先看下面的截图，

   工具栏在前几节已经说过了。下面说左树右表结构，这个结构得益于EasySL的UI框架这里再次谢过。XCenter项目中XCenter.UI.Page就是这个主界面的实现。左边其实就是一个Accordion控件。这个控件位于System.Windows.Controls.Layout.Tookit程序集。

Code
<slTookit:Accordion x:Name="functionList"
      SelectionMode="One"
      ExpandDirection="Down" Width="170"
      Background="AliceBlue">
 <slTookit:AccordionItem Background="AliceBlue">
   <slTookit:AccordionItem.Header>
   <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
    <Image Source="/XCenter.Framework.Client;component/Images/Menu/web_icon_012.png" Height="16" Width="16"></Image>
    <TextBlock Text="报表工具" Padding="3"/>
   </StackPanel>
   </slTookit:AccordionItem.Header>
  <ScrollViewer Height="250"   Width="170" HorizontalScrollBarVisibility="Hidden"  VerticalScrollBarVisibility="Auto">
   <controls:TreeView x:Name="trQE" BorderThickness="0" Background="#F5F5F5" FontSize="12" Width="170">
    <controls:TreeViewItem Header="报表工具管理" IsExpanded="True" Foreground="#15428b" x:Name="QEMain" MouseLeftButtonUp="report_MouseLeftButtonUp2"/>
    <controls:TreeViewItem Header="报表工具环境设置" IsExpanded="True" Foreground="#15428b"/>
    <controls:TreeViewItem Header="报表设计" IsExpanded="True" Foreground="#15428b"/>
   </controls:TreeView>
  </ScrollViewer>
 </slTookit:AccordionItem>
 <slTookit:AccordionItem Background="AliceBlue">
  <slTookit:AccordionItem.Header>
   <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
    <Image Source="/XCenter.Framework.Client;component/Images/Menu/web_icon_035.png" Height="16" Width="16"></Image>
    <TextBlock Text="数据字典" Padding="3"/>
   </StackPanel>
  </slTookit:AccordionItem.Header>
  <ScrollViewer Height="250"   Width="170" HorizontalScrollBarVisibility="Hidden"  VerticalScrollBarVisibility="Auto">
   <controls:TreeView x:Name="trDatadic" BorderThickness="0" Background="#F5F5F5" FontSize="12" Width="170">
    <controls:TreeViewItem Header="数据字典管理" IsExpanded="True" Foreground="#15428b" x:Name="datadicMain" MouseLeftButtonUp="report_MouseLeftButtonUp2"/>
   </controls:TreeView>
  </ScrollViewer>
 </slTookit:AccordionItem>
 <slTookit:AccordionItem Background="AliceBlue">
  <slTookit:AccordionItem.Header>
   <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
    <Image Source="/XCenter.Framework.Client;component/Images/Menu/web_icon_016.png" Height="16" Width="16"></Image>
    <TextBlock Text="系统管理" Padding="3"/>
   </StackPanel>
  </slTookit:AccordionItem.Header>
  <ScrollViewer Height="250"   Width="170" HorizontalScrollBarVisibility="Hidden"  VerticalScrollBarVisibility="Auto">
   <controls:TreeView x:Name="trSystem" BorderThickness="0" Background="#F5F5F5" FontSize="12" Width="170">
    <controls:TreeViewItem Header="帐套管理" IsExpanded="True" Foreground="#15428b"/>
    <controls:TreeViewItem Header="角色管理" IsExpanded="True" Foreground="#15428b"/>
    <controls:TreeViewItem Header="用户管理" IsExpanded="True" Foreground="#15428b"/>
    <controls:TreeViewItem Header="数据源管理" IsExpanded="True" Foreground="#15428b"/>
   </controls:TreeView>
  </ScrollViewer>
 </slTookit:AccordionItem>
</slTookit:Accordion>