博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强...
阅读量:5861 次
发布时间:2019-06-19

本文共 11045 字,大约阅读时间需要 36 分钟。




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


作者:



介绍

Silverlight 3.0 控件一览:

  • TreeView - 树控件
  • ListBox - 改进:支持多选
  • DataGrid - 改进:结合 PagedCollectionView 实现数据分组, 增加了一些编辑数据的相关事件, 结合 DataAnnotations 实现数据验证, 等。。。
  • MediaElement - 增加了对视频 H.264 编码格式的支持,和对音频 AAC 编码格式的支持 
在线DEMO
示例
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
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Linq; 

InBlock.gif
using System.Net; 

InBlock.gif
using System.Windows; 

InBlock.gif
using System.Windows.Controls; 

InBlock.gif
using System.Windows.Documents; 

InBlock.gif
using System.Windows.Input; 

InBlock.gif
using System.Windows.Media; 

InBlock.gif
using System.Windows.Media.Animation; 

InBlock.gif
using System.Windows.Shapes; 

InBlock.gif
using System.Windows.Navigation; 

InBlock.gif 

InBlock.gif
using System.Xml.Linq; 

InBlock.gif
using Silverlight30.Model; 

InBlock.gif 

InBlock.gif
namespace Silverlight30.Control 

InBlock.gif

InBlock.gif        
public partial 
class TreeView : Page 

InBlock.gif        { 

InBlock.gif                
public TreeView() 

InBlock.gif                { 

InBlock.gif                        InitializeComponent(); 

InBlock.gif 

InBlock.gif                        
this.Loaded += 
new RoutedEventHandler(TreeView_Loaded); 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
void TreeView_Loaded(
object sender, RoutedEventArgs e) 

InBlock.gif                { 

InBlock.gif                        XElement root = XElement.Load(
"Control/TreeView.xml"); 

InBlock.gif 

InBlock.gif                        
// 构造带层级关系的数据源(递归方式) 

InBlock.gif                        var result = LoadData(root); 

InBlock.gif 

InBlock.gif                        treeView.DataContext = result; 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
private List<TreeViewModel> LoadData(XElement root) 

InBlock.gif                { 

InBlock.gif                        
if (root == 
null

InBlock.gif                                
return 
null

InBlock.gif 

InBlock.gif                        var items = from n 
in root.Elements(
"node"

InBlock.gif                                                select 
new TreeViewModel 

InBlock.gif                                                { 

InBlock.gif                                                        Title = (
string)n.Attribute(
"name"), 

InBlock.gif                                                        Children = LoadData(n) 

InBlock.gif                                                }; 

InBlock.gif 

InBlock.gif                        
return items.ToList(); 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
private 
void treeView_SelectedItemChanged(
object sender, RoutedPropertyChangedEventArgs<
object> e) 

InBlock.gif                { 

InBlock.gif                        MessageBox.Show(((TreeViewModel)e.NewValue).Title); 

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
 
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
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Linq; 

InBlock.gif
using System.Net; 

InBlock.gif
using System.Windows; 

InBlock.gif
using System.Windows.Controls; 

InBlock.gif
using System.Windows.Documents; 

InBlock.gif
using System.Windows.Input; 

InBlock.gif
using System.Windows.Media; 

InBlock.gif
using System.Windows.Media.Animation; 

InBlock.gif
using System.Windows.Shapes; 

InBlock.gif
using System.Windows.Navigation; 

InBlock.gif 

InBlock.gif
namespace Silverlight30.Control 

InBlock.gif

InBlock.gif        
public partial 
class ListBox : Page 

InBlock.gif        { 

InBlock.gif                
public ListBox() 

InBlock.gif                { 

InBlock.gif                        InitializeComponent(); 

InBlock.gif 

InBlock.gif                        
this.Loaded += 
new RoutedEventHandler(ListBox_Loaded); 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
void ListBox_Loaded(
object sender, RoutedEventArgs e) 

InBlock.gif                { 

InBlock.gif                        List<
string> items = 
new List<
string>(); 

InBlock.gif                        
for (
int i = 0; i < 30; i++) 

InBlock.gif                        { 

InBlock.gif                                items.Add(i.ToString().PadLeft(10, '0')); 

InBlock.gif                        } 

InBlock.gif 

InBlock.gif                        listBox.ItemsSource = items; 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
private 
void Button_Click(
object sender, RoutedEventArgs e) 

InBlock.gif                { 

InBlock.gif                        lblResult.Text = ""; 

InBlock.gif                        
// ListBox.SelectedItems - 选中的对象集合 

InBlock.gif                        
foreach (
string s 
in listBox.SelectedItems) 

InBlock.gif                        { 

InBlock.gif                                lblResult.Text += s + 
"\r\n"

InBlock.gif                        } 

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
 
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
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Linq; 

InBlock.gif
using System.Net; 

InBlock.gif
using System.Windows; 

InBlock.gif
using System.Windows.Controls; 

InBlock.gif
using System.Windows.Documents; 

InBlock.gif
using System.Windows.Input; 

InBlock.gif
using System.Windows.Media; 

InBlock.gif
using System.Windows.Media.Animation; 

InBlock.gif
using System.Windows.Shapes; 

InBlock.gif
using System.Windows.Navigation; 

InBlock.gif 

InBlock.gif
using System.Xml.Linq; 

InBlock.gif
using Silverlight30.Model; 

InBlock.gif
using System.Windows.Data; 

InBlock.gif 

InBlock.gif
namespace Silverlight30.Control 

InBlock.gif

InBlock.gif        
public partial 
class DataGrid : Page 

InBlock.gif        { 

InBlock.gif                
public DataGrid() 

InBlock.gif                { 

InBlock.gif                        InitializeComponent(); 

InBlock.gif 

InBlock.gif                        
this.Loaded += 
new RoutedEventHandler(DataGrid_Loaded); 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
void DataGrid_Loaded(
object sender, RoutedEventArgs e) 

InBlock.gif                { 

InBlock.gif                        List<EmployeeModel> employees = 
new List<EmployeeModel>(); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"aabb", DateOfBirth = DateTime.Now, Salary = 1111 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"aabc", DateOfBirth = DateTime.Now, Salary = 1111 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"abcc", DateOfBirth = DateTime.Now, Salary = 1122 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"abbc", DateOfBirth = DateTime.Now, Salary = 1122 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"aaab", DateOfBirth = DateTime.Now, Salary = 1122 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"bcca", DateOfBirth = DateTime.Now, Salary = 1122 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"bbac", DateOfBirth = DateTime.Now, Salary = 1133 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"cbaa", DateOfBirth = DateTime.Now, Salary = 1133 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"ccaa", DateOfBirth = DateTime.Now, Salary = 1133 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"cccb", DateOfBirth = DateTime.Now, Salary = 1144 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"cccc", DateOfBirth = DateTime.Now, Salary = 1155 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"cabc", DateOfBirth = DateTime.Now, Salary = 1155 }); 

InBlock.gif                        employees.Add(
new EmployeeModel { Name = 
"cabb", DateOfBirth = DateTime.Now, Salary = 1166 }); 

InBlock.gif 

InBlock.gif                        
// 通过 PagedCollectionView 的 GroupDescriptions 设置需要分组的字段,绑定到 DataGrid 后,DataGrid会自动对数据做分组显示 

InBlock.gif                        PagedCollectionView view = 
new PagedCollectionView(employees); 

InBlock.gif                        view.GroupDescriptions.Add(
new PropertyGroupDescription(
"Salary")); 

InBlock.gif 

InBlock.gif                        dataGrid.ItemsSource = view; 

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
 
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
InBlock.gif
using System; 

InBlock.gif
using System.Collections.Generic; 

InBlock.gif
using System.Linq; 

InBlock.gif
using System.Net; 

InBlock.gif
using System.Windows; 

InBlock.gif
using System.Windows.Controls; 

InBlock.gif
using System.Windows.Documents; 

InBlock.gif
using System.Windows.Input; 

InBlock.gif
using System.Windows.Media; 

InBlock.gif
using System.Windows.Media.Animation; 

InBlock.gif
using System.Windows.Shapes; 

InBlock.gif
using System.Windows.Navigation; 

InBlock.gif 

InBlock.gif
namespace Silverlight30.Control 

InBlock.gif

InBlock.gif        
public partial 
class MediaElement : Page 

InBlock.gif        { 

InBlock.gif                
public MediaElement() 

InBlock.gif                { 

InBlock.gif                        InitializeComponent(); 

InBlock.gif                } 

InBlock.gif 

InBlock.gif                
private 
void mediaElement_MediaEnded(
object sender, RoutedEventArgs e) 

InBlock.gif                { 

InBlock.gif                        
// 重播 

InBlock.gif                        mediaElement.Stop(); 

InBlock.gif                        mediaElement.Play(); 

InBlock.gif                } 

InBlock.gif        } 

InBlock.gif}
 
 
OK
 
      本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/342756,如需转载请自行联系原作者
你可能感兴趣的文章
BZOJ 1912 巡逻(算竞进阶习题)
查看>>
谈谈企业的数据工作!——企业的数据分析能力金字塔
查看>>
js 添加事件 attachEvent 和 addEventListener
查看>>
git基础问题
查看>>
修改MFC主窗口界面标题和图标的方法
查看>>
android 系统重启与关机:java 代码实现
查看>>
html-切换360浏览器的极速模式
查看>>
Js点餐加减数量
查看>>
luoguP2664 树上游戏
查看>>
php不使用copy()函数复制文件的方法
查看>>
bat批处理运用
查看>>
使用android x86进行android应用开发.
查看>>
第二周作业
查看>>
Action获取请求参数的三种方式中的第一种
查看>>
使用SQL访问MongoDB
查看>>
function 与 => 的区别
查看>>
GitHub
查看>>
kali linux常用wifi攻击工具
查看>>
JS字符串数组转换
查看>>
2019年全国统一高考数学试卷理科新课标Ⅲ
查看>>