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

本文链接：https://blog.csdn.net/webabcd/article/details/4608320

[索引页]
[源码下载]

稳扎稳打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 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 name ="c level 1" >

< node name ="c level 2" >

< node name ="c level 3" >

< node name ="c level 4" />

</ node >

< node name ="d level 1" >

< node name ="d level 2" >

< node name ="d level 3" />

</ 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: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
[源码下载]