稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强

[索引页]
[源码下载]

稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强

作者： webabcd


介绍
Silverlight 3.0 控件一览：

• TreeView - 树控件
• ListBox - 改进：支持多选
• DataGrid - 改进：结合 PagedCollectionView 实现数据分组, 增加了一些编辑数据的相关事件, 结合 DataAnnotations 实现数据验证, 等。。。
• MediaElement - 增加了对视频 H.264 编码格式的支持，和对音频 AAC 编码格式的支持 

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html


示例
1、演示 TreeView 的使用
TreeView.xml（数据源）

<? xml version="1.0" encoding="utf-8"  ?>
< root >
     < node  name ="a level 1" >
         < node  name ="a level 2" >
             < node  name ="a level 3" >
                 < node  name ="a level 4"   />
             </ node >
         </ node >
     </ node >
     < node  name ="b level 1" >
         < node  name ="b level 2" >
             < node  name ="b level 3" >
                 < node  name ="b level 4" >
                     < node  name ="b level 5"   />
                 </ node >
             </ node >
         </ node >
     </ node >
     < node  name ="c level 1" >
         < node  name ="c level 2" >
             < node  name ="c level 3" >
                 < node  name ="c level 4"   />
             </ node >
         </ node >
     </ node >
     < node  name ="d level 1" >
         < node  name ="d level 2" >
             < node  name ="d level 3"   />
         </ node >
     </ node >
</ root >

TreeView.xaml

< navigation:Page  x:Class ="Silverlight30.Control.TreeView"  
           xmlns:controls ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"   
           xmlns:common ="clr-namespace:System.Windows;assembly=System.Windows.Controls"
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable ="d"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="TreeView Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >

             < StackPanel.Resources >
            
                 <!--
                    HierarchicalDataTemplate - 呈现层级数据的数据模板
                        ItemsSource - 指定下一级数据的数据源
                        ItemTemplate - 指定下一级数据的数据模板
                 -->
                 < common:HierarchicalDataTemplate  x:Key ="childTemplate"  
                    ItemsSource =" {Binding Path=Children} " >
                     < StackPanel  Orientation ="Horizontal" >
                         < CheckBox  />
                         < TextBlock  Text =" {Binding Path=Title} "  FontStyle ="Italic"   />
                     </ StackPanel >
                 </ common:HierarchicalDataTemplate >
                 < common:HierarchicalDataTemplate  x:Key ="treeTemplate"  
                    ItemsSource =" {Binding Path=Children} "  
                    ItemTemplate =" {StaticResource childTemplate} " >
                     < TextBlock  Text =" {Binding Path=Title} "  FontWeight ="Bold"   />
                 </ common:HierarchicalDataTemplate >
                
             </ StackPanel.Resources >
            
            
             <!--
                ItemsSource - 数据源
                ItemTemplate - 指定层级显示数据的模板
             -->
             < controls:TreeView  x:Name ="treeView"  Margin ="5"
                ItemsSource =" {Binding} "  
                ItemTemplate =" {StaticResource treeTemplate} "
                SelectedItemChanged ="treeView_SelectedItemChanged" >
             </ controls:TreeView >
            
            
             <!--
                TreeViewItem - TreeView 的项
                    Header - 项的标题
                    HeaderTemplate - 项的标题模板
             -->
             < controls:TreeView  x:Name ="treeView2"  Margin ="5" >
                 < controls:TreeViewItem  Header ="level 1" >
                     < controls:TreeViewItem  Header ="level 2" >
                         < controls:TreeViewItem >
                             < controls:TreeViewItem.HeaderTemplate >
                                 < DataTemplate >
                                     < TextBlock  Text ="level 3"  FontWeight ="Bold"   />
                                 </ DataTemplate >
                             </ controls:TreeViewItem.HeaderTemplate >
                         </ controls:TreeViewItem >
                     </ controls:TreeViewItem >
                 </ controls:TreeViewItem >
             </ controls:TreeView >             
            
         </ StackPanel >
     </ Grid >
</ navigation:Page >

TreeView.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

using  System.Xml.Linq;
using  Silverlight30.Model;

namespace  Silverlight30.Control
{
    public partial class TreeView : Page
    {
        public TreeView()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(TreeView_Loaded);
        }

        void TreeView_Loaded(object sender, RoutedEventArgs e)
        {
            XElement root = XElement.Load("Control/TreeView.xml");

            // 构造带层级关系的数据源（递归方式）
            var result = LoadData(root);

            treeView.DataContext = result;
        }

        private List<TreeViewModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new TreeViewModel
                        {
                            Title = (string)n.Attribute("name"),
                            Children = LoadData(n)
                        };

            return items.ToList();
        }

        private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            MessageBox.Show(((TreeViewModel)e.NewValue).Title);
        }
    }
}

2、演示 ListBox 增加的一个功能：多选
ListBox.xaml

< navigation:Page  x:Class ="Silverlight30.Control.ListBox"  
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable ="d"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="ListBox Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel >
        
             <!--
                ListBox - 新增特性：可以多选
                SelectionMode - 选择模式 [System.Windows.Controls.SelectionMode 枚举]
                    Single - 只允许单选
                    Multiple - 可以多选（不需要任何辅助键）
                    Extended - 可以多选（需要 Ctrl 或 Shift 的配合）
             -->
             < ListBox  x:Name ="listBox"  Margin ="5"  Width ="200"  Height ="100"  SelectionMode ="Extended" >
                 < ListBox.ItemTemplate >
                     < DataTemplate >
                         < StackPanel  Orientation ="Horizontal" >
                             < TextBlock  Text =" {Binding} "  Margin ="5"   />
                         </ StackPanel >
                     </ DataTemplate >
                 </ ListBox.ItemTemplate >
             </ ListBox >
            
             < Button  Content ="获取选中项"  Click ="Button_Click"   />
             < TextBlock  x:Name ="lblResult"   />
            
         </ StackPanel >
     </ Grid >
</ navigation:Page >

ListBox.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight30.Control
{
    public partial class ListBox : Page
    {
        public ListBox()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ListBox_Loaded);
        }

        void ListBox_Loaded(object sender, RoutedEventArgs e)
        {
            List<string> items = new List<string>();
            for (int i = 0; i < 30; i++)
            {
                items.Add(i.ToString().PadLeft(10, '0'));
            }

            listBox.ItemsSource = items;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            lblResult.Text = "";
            // ListBox.SelectedItems - 选中的对象集合
            foreach (string s in listBox.SelectedItems)
            {
                lblResult.Text += s + "\r\n";
            }
        }
    }
}

3、演示 DataGrid 的几个新增的功能
DataGrid.xaml

< navigation:Page  xmlns:data ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   x:Class ="Silverlight30.Control.DataGrid"  
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable ="d"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="DataGrid Page" >
     < Grid  x:Name ="LayoutRoot" >
    
         <!--
            新增功能：结合 PagedCollectionView 实现数据分组；增加了一些编辑数据的相关事件；结合 DataAnnotations 实现数据验证
         -->
         < data:DataGrid  x:Name ="dataGrid"  AutoGenerateColumns ="False" >
             < data:DataGrid.Columns >
                 < data:DataGridTextColumn  Binding =" {Binding Name} "  Header ="名字"   />
                 < data:DataGridTextColumn  Binding =" {Binding DateOfBirth} "  Header ="生日"   />
             </ data:DataGrid.Columns >
         </ data:DataGrid >

     </ Grid >
</ navigation:Page >

DataGrid.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

using  System.Xml.Linq;
using  Silverlight30.Model;
using  System.Windows.Data;

namespace  Silverlight30.Control
{
    public partial class DataGrid : Page
    {
        public DataGrid()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(DataGrid_Loaded);
        }

        void DataGrid_Loaded(object sender, RoutedEventArgs e)
        {
            List<EmployeeModel> employees = new List<EmployeeModel>();
            employees.Add(new EmployeeModel { Name = "aabb", DateOfBirth = DateTime.Now, Salary = 1111 });
            employees.Add(new EmployeeModel { Name = "aabc", DateOfBirth = DateTime.Now, Salary = 1111 });
            employees.Add(new EmployeeModel { Name = "abcc", DateOfBirth = DateTime.Now, Salary = 1122 });
            employees.Add(new EmployeeModel { Name = "abbc", DateOfBirth = DateTime.Now, Salary = 1122 });
            employees.Add(new EmployeeModel { Name = "aaab", DateOfBirth = DateTime.Now, Salary = 1122 });
            employees.Add(new EmployeeModel { Name = "bcca", DateOfBirth = DateTime.Now, Salary = 1122 });
            employees.Add(new EmployeeModel { Name = "bbac", DateOfBirth = DateTime.Now, Salary = 1133 });
            employees.Add(new EmployeeModel { Name = "cbaa", DateOfBirth = DateTime.Now, Salary = 1133 });
            employees.Add(new EmployeeModel { Name = "ccaa", DateOfBirth = DateTime.Now, Salary = 1133 });
            employees.Add(new EmployeeModel { Name = "cccb", DateOfBirth = DateTime.Now, Salary = 1144 });
            employees.Add(new EmployeeModel { Name = "cccc", DateOfBirth = DateTime.Now, Salary = 1155 });
            employees.Add(new EmployeeModel { Name = "cabc", DateOfBirth = DateTime.Now, Salary = 1155 });
            employees.Add(new EmployeeModel { Name = "cabb", DateOfBirth = DateTime.Now, Salary = 1166 });

            // 通过 PagedCollectionView 的 GroupDescriptions 设置需要分组的字段，绑定到 DataGrid 后，DataGrid会自动对数据做分组显示
            PagedCollectionView view = new PagedCollectionView(employees);
            view.GroupDescriptions.Add(new PropertyGroupDescription("Salary"));

            dataGrid.ItemsSource = view;
        }
    }
}

4、演示 MediaElement 的增强点：以 H.264 编码，MP4为容器做演示
MediaElement.xaml

< navigation:Page  x:Class ="Silverlight30.Control.MediaElement"  
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable ="d"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="MediaElement Page" >
     < Grid  x:Name ="LayoutRoot" >
    
         <!--
            增加了对视频 H.264 编码格式的支持，和对音频 AAC 编码格式的支持
            本例以 H.264 编码，MP4为容器做演示
         -->
         < MediaElement  x:Name ="mediaElement"  Source ="/Resource/Demo.mp4"  Width ="320"  Height ="240"
            AutoPlay ="True"  MediaEnded ="mediaElement_MediaEnded"   />
            
     </ Grid >
</ navigation:Page >

MediaElement.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight30.Control
{
    public partial class MediaElement : Page
    {
        public MediaElement()
        {
            InitializeComponent();
        }

        private void mediaElement_MediaEnded(object sender, RoutedEventArgs e)
        {
            // 重播
            mediaElement.Stop();
            mediaElement.Play();
        }
    }
}

OK
[源码下载]