稳扎稳打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", Salary = 1111 });

            employees.Add(new EmployeeModel 

{ Name = "abcc", Salary = 1122 });

            employees.Add(new EmployeeModel 

{ Name = "abbc", Salary = 1122 });

            employees.Add(new EmployeeModel 

{ Name = "aaab", Salary = 1122 });

            employees.Add(new EmployeeModel 

{ Name = "bcca", Salary = 1122 });

            employees.Add(new EmployeeModel 

{ Name = "bbac", Salary = 1133 });

            employees.Add(new EmployeeModel 

{ Name = "cbaa", Salary = 1133 });

            employees.Add(new EmployeeModel 

{ Name = "ccaa", Salary = 1133 });

            employees.Add(new EmployeeModel 

{ Name = "cccb", Salary = 1144 });

            employees.Add(new EmployeeModel 

{ Name = "cccc", Salary = 1155 });

            employees.Add(new EmployeeModel 

{ Name = "cabc", Salary = 1155 });

            employees.Add(new EmployeeModel 

{ Name = "cabb", 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
[源码下载]