稳扎稳打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://webabcd.blog.51cto.com/1787395/342289


示例
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
[源码下载]