稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager

2016-08-20 10:54:30来源:http://webabcd.blog.51cto.com/1787395/342747作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager作者:webabcd介绍Silverlight 3.0控件一览:

AutoCompleteBox-自动完成控件。当用户输入部分信息后,此控件可以基于指定的过滤算法在一个下拉框中陈列出匹配项
DataPager -分页控件
在线DEMOhttp://webabcd.blog.51cto.com/1787395/342289示例1、演示 AutoCompleteBox(一次绑定全部数据或按需加载相关数据)AutoCompleteBox.xaml

<navigation:Page xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"x:Class="Silverlight30.Control.AutoCompleteBox" 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="AutoCompleteBox Page"> <Grid x:Name="LayoutRoot"> <Grid.Resources> <!--用于在 AutoCompleteBox 中显示数据的模板--> <DataTemplate x:Key="dataTemplate"> <StackPanel Orientation="Horizontal"> <TextBlock Text="名字: " /> <TextBlock Text="{Binding Name}" /> <TextBlock Text="薪水: " /> <TextBlock Text="{Binding Salary}" /> </StackPanel> </DataTemplate> </Grid.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <!-- MinimumPrefixLength - 如需显示自动完成的匹配项,所需输入的最少字符数 IsTextCompletionEnabled - 是否在 Text 中显示当前匹配项的全部内容 MaxDropDownHeight - 下拉框的最大长度 FilterMode - 根据用户的输入,对数据源做过滤的方式,默认值:StartsWith [System.Windows.Controls.AutoCompleteFilterMode 枚举] 本例演示如何实现自定义的过滤 DropDownOpening, DropDownOpened, DropDownClosing, DropDownClosed - 顾名思义的几个事件 --> <input:AutoCompleteBox x:Name="autoCompleteBox" Width="100" Height="30" Margin="10" MinimumPrefixLength="0" IsTextCompletionEnabled="True" MaxDropDownHeight="100" FilterMode="Custom"> <!-- 呈现数据的方式如下,也可以设置 AutoCompleteBox 的 ValueMemberBinding 属性 --> <input:AutoCompleteBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding}" /> </StackPanel> </DataTemplate> </input:AutoCompleteBox.ItemTemplate> </input:AutoCompleteBox> <!-- ValueMemberPath - 在此属性指定的成员中做过滤,过滤参数为用户的输入 ItemTemplate - 指定用于显示数据的模板 --> <input:AutoCompleteBox x:Name="autoCompleteBoxTemplate" Width="100" Height="30" Margin="10" ValueMemberPath="Salary" ItemTemplate="{StaticResource dataTemplate}" /> <!-- Populating, Populated - 调用 按需加载数据服务 的一对事件 MinimumPopulateDelay - 调用 按需加载数据服务 的延迟时间。即在用户的输入发生改变时,此时间后调用指定的服务 --> <input:AutoCompleteBox x:Name="autoCompleteBoxPopulate" Width="100" Height="30" Margin="10" Populating="autoCompleteBoxPopulate_Populating" MinimumPopulateDelay="500"> <input:AutoCompleteBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding}" /> </StackPanel> </DataTemplate> </input:AutoCompleteBox.ItemTemplate> </input:AutoCompleteBox> </StackPanel> </Grid> </navigation:Page>

EmployeeModel.cs

using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace Silverlight30.Model { public class EmployeeModel { public string Name { get; set; } public double Salary { get; set; } public DateTime DateOfBirty { get; set; } } }

AutoCompleteBox.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 Silverlight30.Model; using System.Xml.Linq; namespace Silverlight30.Control { public partial class AutoCompleteBox : Page { public AutoCompleteBox() { InitializeComponent(); this.Loaded += new RoutedEventHandler(AutoCompleteBox_Loaded); } void AutoCompleteBox_Loaded(object sender, RoutedEventArgs e) { Init(); Init2(); } private void Init() { // IsDropDownOpen - 是否显示自定完成的下拉框 autoCompleteBox.GotFocus += delegate { autoCompleteBox.IsDropDownOpen = true; }; autoCompleteBox.Focus(); List<string> collection = new List<string>(); collection.Add("aabb"); collection.Add("aabc"); collection.Add("abcc"); collection.Add("abbc"); collection.Add("aaab"); collection.Add("bcca"); collection.Add("bbac"); collection.Add("cbaa"); collection.Add("ccaa"); collection.Add("cccb"); collection.Add("cccc"); collection.Add("cabc"); collection.Add("cabb"); autoCompleteBox.ItemsSource = collection; /* * ItemFilter - 过滤下拉框内的对象 * TextFilter - 过滤下拉框内的字符串 * SearchText - 以此值为参数,过滤下拉框中的数据 * SelectedItem - 下拉框当前所选中的对象 */ // 自定义 FilterMode // 第一个参数:用户输入的值;第二个参数:下拉框中的对象 autoCompleteBox.ItemFilter += (search, value) => { if (value.ToString().ToLower().StartsWith(search.ToLower()) || value.ToString().ToLower().EndsWith(search.ToLower())) return true; return false; }; } private void Init2() { List<EmployeeModel> employees = new List<EmployeeModel>(); employees.Add(new EmployeeModel { Name = "aabb", DateOfBirty = DateTime.Now, Salary = 111 }); employees.Add(new EmployeeModel { Name = "aabc", DateOfBirty = DateTime.Now, Salary = 112 }); employees.Add(new EmployeeModel { Name = "abcc", DateOfBirty = DateTime.Now, Salary = 113 }); employees.Add(new EmployeeModel { Name = "abbc", DateOfBirty = DateTime.Now, Salary = 114 }); employees.Add(new EmployeeModel { Name = "aaab", DateOfBirty = DateTime.Now, Salary = 115 }); employees.Add(new EmployeeModel { Name = "bcca", DateOfBirty = DateTime.Now, Salary = 116 }); employees.Add(new EmployeeModel { Name = "bbac", DateOfBirty = DateTime.Now, Salary = 117 }); employees.Add(new EmployeeModel { Name = "cbaa", DateOfBirty = DateTime.Now, Salary = 118 }); employees.Add(new EmployeeModel { Name = "ccaa", DateOfBirty = DateTime.Now, Salary = 119 }); employees.Add(new EmployeeModel { Name = "cccb", DateOfBirty = DateTime.Now, Salary = 1111 }); employees.Add(new EmployeeModel { Name = "cccc", DateOfBirty = DateTime.Now, Salary = 1112 }); employees.Add(new EmployeeModel { Name = "cabc", DateOfBirty = DateTime.Now, Salary = 1113 }); employees.Add(new EmployeeModel { Name = "cabb", DateOfBirty = DateTime.Now, Salary = 1114 }); autoCompleteBoxTemplate.ItemsSource = employees; } /// <summary> /// 演示如何实现按需加载下拉框的数据 /// </summary> private void autoCompleteBoxPopulate_Populating(object sender, PopulatingEventArgs e) { // Populate 是异步的,调用服务也是异步的 // 所以要先在 Populating 中 Cancel 掉 Populate,以便异步调用服务 // 服务返回结果后再调用 PopulateComplete() 方法,以便触发 Populated 事件 e.Cancel = true; List<string> names = new List<string>(); Uri uri = new Uri("http://localhost:8616/Employee.svc/names/" + e.Parameter, UriKind.Absolute); WebClient client = new WebClient(); client.DownloadStringCompleted += (s, args) => { if (args.Error != null) { MessageBox.Show("调用服务出错" + args.Error.ToString()); return; } XDocument xml = XDocument.Parse(args.Result); XNamespace ns = "http://schemas.microsoft.com/2003/10/Serialization/Arrays"; autoCompleteBoxPopulate.ItemsSource = xml.Root.Elements(ns + "string").Select(p => p.Value).ToList(); autoCompleteBoxPopulate.PopulateComplete(); }; client.DownloadStringAsync(uri); } } }

2、演示 DataPagerDataPager.xaml

<navigation:Page xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"x:Class="Silverlight30.Control.DataPager" 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="DataPager Page"> <Grid x:Name="LayoutRoot"> <StackPanel> <!-- PageSize - 页大小 NumericButtonCount - 数字分页按钮的数量 AutoEllipsis - 当页总数大于分页按钮的数量时,是否自动显示省略号 IsTotalItemCountFixed - 数据量是否是不变的(即是否没有对当前绑定数据的添加/删除操作) DisplayMode - 分页控件的显示模式 [System.Windows.Controls.Data.PagerDisplayMode 枚举] --> <StackPanel Margin="10" > <data:DataPager x:Name="dataPager" PageSize="6" NumericButtonCount="10" AutoEllipsis="True" DisplayMode="FirstLastPreviousNext"IsTotalItemCountFixed="True"> </data:DataPager> <ListBox x:Name="listBox" /> <data:DataPager x:Name="dataPager2" PageSize="6" NumericButtonCount="10" AutoEllipsis="True" DisplayMode="FirstLastPreviousNextNumeric"IsTotalItemCountFixed="True"> </data:DataPager> </StackPanel> </StackPanel> </Grid> </navigation:Page>

DataPager.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.Windows.Data; using System.Xml.Linq; namespace Silverlight30.Control { public partial class DataPager : Page { public DataPager() { InitializeComponent(); this.Loaded += new RoutedEventHandler(DataPager_Loaded); } void DataPager_Loaded(object sender, RoutedEventArgs e) { Init(); } void Init() { List<string> items = new List<string>(); for (int i = 0; i < 100; i++) { items.Add(i.ToString().PadLeft(10, '0')); } // PagedCollectionView - 使一个 IEnumerable 集合具有分页功能 PagedCollectionView view = new PagedCollectionView(items); // 设置 DataPager 的 Source 属性 和 对应的显示数据的控件的 ItemsSource 属性 为同一个 PagedCollectionView 对象 dataPager.Source = view; dataPager2.Source = view; listBox.ItemsSource = view; } } }


OK[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台