稳扎稳打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

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

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

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

OK
[源码下载]