[索引頁]
[源碼下載]


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

作者：webabcd


介紹
Silverlight 3.0?控件一覽：

• AutoCompleteBox?-?自動完成控件。當用戶輸入部分信息后，此控件可以基于指定的過濾算法在一個下拉框中陳列出匹配項
• DataPager -?分頁控件?

在線DEMO
http://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、演示 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
[源碼下載]


本文轉自webabcd 51CTO博客，原文鏈接：http://blog.51cto.com/webabcd/342747，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。