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

2016-08-20 10:56:32来源:http://webabcd.blog.51cto.com/1787395/342756作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强作者:webabcd介绍Silverlight 3.0控件一览:

TreeView-树控件
ListBox -改进:支持多选
DataGrid-改进:结合 PagedCollectionView 实现数据分组, 增加了一些编辑数据的相关事件, 结合 DataAnnotations 实现数据验证, 等。。。
MediaElement -增加了对视频 H.264 编码格式的支持,和对音频 AAC 编码格式的支持
在线DEMOhttp://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[源码下载]


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台