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

[索引页]
[源码下载]

[align=center]稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强[/align]

作者：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
[源码下载]