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

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

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

作者：webabcd

介绍

Silverlight 3.0 控件一览：

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

在线DEMO

示例

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、演示 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>

</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

​