稳扎稳打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 >
             <!-- 用于在 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
[源码下载]