AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-13 1028
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


索引页]

[源码下载]


稳扎稳打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(); 
                } 
        } 
}
 
 
 
      本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342756，如需转载请自行联系原作者



文章标签：
Windows
关键词：
silverlight listbox
silverlight listbox mediaelement
silverlight控件listbox
silverlight datagrid
silverlight控件
技术小胖子
目录
相关文章
杰克.陈
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章，如需转载，请注明出处。   最近在一直研究Silverlight下的数据绑定控件，发现有这样两个接口IEditableObject 和IEditableCollectionView，记录一下结论，欢迎交流指正。
杰克.陈
959 0
技术小甜
|
前端开发
[Silverlight]TextBlock控件全攻略
技术小甜
1154 0
技术小牛人
|
数据安全/隐私保护
silverlight-带水印的自定义TextBox控件（版本2）
技术小牛人
854 0
科技小能手
|
XML 开发工具 数据格式
6.Silverlight弹出窗口以及DataGrid分页
科技小能手
1222 0
科技小能手
|
Web App开发
Silverlight实用窍门系列：39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
科技小能手
1467 0
科技小能手
Silverlight实用窍门系列：42.读取拖动到控件上的外部txt和jpg文件，多外部文件的拖动
科技小能手
987 0
科技小能手
|
前端开发
Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox
科技小能手
1031 0
科技小能手
|
数据安全/隐私保护
Silverlight实用窍门系列：14.Visifire图表控件的使用一(图表的创建和基础使用)
科技小能手
1344 0
技术小牛人
|
Windows 容器 存储
[翻译]Windows Phone（Silverlight） 控件数据绑定
技术小牛人
872 0
技术小胖子
Silverlight中的ListBox横向显示CheckBox
技术小胖子
1132 0

热门文章

最新文章

  • 1
    Silverlight——施工计划日报表（三）
  • 2
    Silverlight 访问WCF的跨域
  • 3
    上接游戏人生Silverlight(6) - 贪吃蛇[Silverlight 3.0(c#)]
  • 4
    SilverLight开发系列第3步：制作鼠标跟随效果，顺便熟悉一些基本概念：群组 和 动画
  • 5
    Silverlight 结合ArcGis 在地图上画线
  • 6
    Silverlight 5 RC新特性探索系列:12.Silverlight 5 RC 窗口模式下访问自定义DLL和WIN32 API
  • 7
    Silverlight实用窍门大集合+Silverlight 5 最全新特性【目录索引】
  • 8
    也说说Silverlight动态加载DLL
  • 9
    解决ArcGIS API for Silverlight 加载地图的内外网访问问题
  • 10
    WPF/Silverlight Layout 系统概述——Measure
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1146
  • 2
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1203
  • 3
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    1042
  • 4
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    954
  • 5
    silverlight起步（二）——第一个silverligth
    988
  • 6
    Silverlight4Beta之鼠标右键支持
    959
  • 7
    Silverlight4Beta之Binding的新特性（上）
    1285
  • 8
    Flash 与 Silverlight 终极大比拼
    1547
  • 9
    Silverlight访问摄像头和麦克风(2)视频对话
    1023
  • 10
    Silverlight与WCF之间的通信(2)利用WCF的双工通信“推送”给SL数据
    1252

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格