博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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
[源码下载]