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

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

作者： webabcd

介绍
Silverlight 3.0 控件一览：

autocompletebox - 自动完成控件。当用户输入部分信息后，此控件可以基于指定的过滤算法在一个下拉框中陈列出匹配项
DataPager - 分页控件

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html

示例
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 >

< 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", Salary = 112 });

employees.Add(new EmployeeModel { Name = "abcc", Salary = 113 });

employees.Add(new EmployeeModel { Name = "abbc", Salary = 114 });

employees.Add(new EmployeeModel { Name = "aaab", Salary = 115 });

employees.Add(new EmployeeModel { Name = "bcca", Salary = 116 });

employees.Add(new EmployeeModel { Name = "bbac", Salary = 117 });

employees.Add(new EmployeeModel { Name = "cbaa", Salary = 118 });

employees.Add(new EmployeeModel { Name = "ccaa", Salary = 119 });

employees.Add(new EmployeeModel { Name = "cccb", Salary = 1111 });

employees.Add(new EmployeeModel { Name = "cccc", Salary = 1112 });

employees.Add(new EmployeeModel { Name = "cabc", Salary = 1113 });

employees.Add(new EmployeeModel { Name = "cabb", 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、演示 DataPager
DataPager.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 >

</ 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
[源码下载]

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

相关推荐