[索引页]
[×××]


稳扎稳打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
InBlock.gifusing System;
InBlock.gifusing System.Net;
InBlock.gifusing System.Windows;
InBlock.gifusing System.Windows.Controls;
InBlock.gifusing System.Windows.Documents;
InBlock.gifusing System.Windows.Ink;
InBlock.gifusing System.Windows.Input;
InBlock.gifusing System.Windows.Media;
InBlock.gifusing System.Windows.Media.Animation;
InBlock.gifusing System.Windows.Shapes;
InBlock.gif
InBlock.gifnamespace Silverlight30.Model
InBlock.gif{
InBlock.gif        public class EmployeeModel
InBlock.gif        {
InBlock.gif                public string Name { get; set; }
InBlock.gif
InBlock.gif                public double Salary { get; set; }
InBlock.gif
InBlock.gif                public DateTime DateOfBirty { get; set; }
InBlock.gif        }
InBlock.gif}
AutoCompleteBox.xaml.cs
InBlock.gifusing System;
InBlock.gifusing System.Collections.Generic;
InBlock.gifusing System.Linq;
InBlock.gifusing System.Net;
InBlock.gifusing System.Windows;
InBlock.gifusing System.Windows.Controls;
InBlock.gifusing System.Windows.Documents;
InBlock.gifusing System.Windows.Input;
InBlock.gifusing System.Windows.Media;
InBlock.gifusing System.Windows.Media.Animation;
InBlock.gifusing System.Windows.Shapes;
InBlock.gifusing System.Windows.Navigation;
InBlock.gif
InBlock.gifusing Silverlight30.Model;
InBlock.gifusing System.Xml.Linq;
InBlock.gif
InBlock.gifnamespace Silverlight30.Control
InBlock.gif{
InBlock.gif        public partial class AutoCompleteBox : Page
InBlock.gif        {
InBlock.gif                public AutoCompleteBox()
InBlock.gif                {
InBlock.gif                        InitializeComponent();
InBlock.gif
InBlock.gif                        this.Loaded += new RoutedEventHandler(AutoCompleteBox_Loaded);
InBlock.gif                }
InBlock.gif
InBlock.gif                void AutoCompleteBox_Loaded(object sender, RoutedEventArgs e)
InBlock.gif                {
InBlock.gif                        Init();
InBlock.gif                        Init2();
InBlock.gif                }
InBlock.gif
InBlock.gif                private void Init()
InBlock.gif                {
InBlock.gif                        // IsDropDownOpen - 是否显示自定完成的下拉框
InBlock.gif                        autoCompleteBox.GotFocus += delegate { autoCompleteBox.IsDropDownOpen = true; };
InBlock.gif                        autoCompleteBox.Focus();
InBlock.gif
InBlock.gif
InBlock.gif                        List<string> collection = new List<string>();
InBlock.gif                        collection.Add("aabb");
InBlock.gif                        collection.Add("aabc");
InBlock.gif                        collection.Add("abcc");
InBlock.gif                        collection.Add("abbc");
InBlock.gif                        collection.Add("aaab");
InBlock.gif                        collection.Add("bcca");
InBlock.gif                        collection.Add("bbac");
InBlock.gif                        collection.Add("cbaa");
InBlock.gif                        collection.Add("ccaa");
InBlock.gif                        collection.Add("cccb");
InBlock.gif                        collection.Add("cccc");
InBlock.gif                        collection.Add("cabc");
InBlock.gif                        collection.Add("cabb");
InBlock.gif
InBlock.gif                        autoCompleteBox.ItemsSource = collection;
InBlock.gif
InBlock.gif
InBlock.gif                        /*
InBlock.gif                         * ItemFilter - 过滤下拉框内的对象
InBlock.gif                         * TextFilter - 过滤下拉框内的字符串
InBlock.gif                         * SearchText - 以此值为参数,过滤下拉框中的数据
InBlock.gif                         * SelectedItem - 下拉框当前所选中的对象
InBlock.gif                         */

InBlock.gif
InBlock.gif                        // 自定义 FilterMode
InBlock.gif                        // 第一个参数:用户输入的值;第二个参数:下拉框中的对象
InBlock.gif                        autoCompleteBox.ItemFilter += (search, value) =>
InBlock.gif                        {
InBlock.gif                                if (value.ToString().ToLower().StartsWith(search.ToLower()) || value.ToString().ToLower().EndsWith(search.ToLower()))
InBlock.gif                                        return true;
InBlock.gif
InBlock.gif                                return false;
InBlock.gif                        };
InBlock.gif                }
InBlock.gif
InBlock.gif                private void Init2()
InBlock.gif                {
InBlock.gif                        List<EmployeeModel> employees = new List<EmployeeModel>();
InBlock.gif                        employees.Add(new EmployeeModel { Name = "aabb", DateOfBirty = DateTime.Now, Salary = 111 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "aabc", DateOfBirty = DateTime.Now, Salary = 112 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "abcc", DateOfBirty = DateTime.Now, Salary = 113 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "abbc", DateOfBirty = DateTime.Now, Salary = 114 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "aaab", DateOfBirty = DateTime.Now, Salary = 115 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "bcca", DateOfBirty = DateTime.Now, Salary = 116 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "bbac", DateOfBirty = DateTime.Now, Salary = 117 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "cbaa", DateOfBirty = DateTime.Now, Salary = 118 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "ccaa", DateOfBirty = DateTime.Now, Salary = 119 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "cccb", DateOfBirty = DateTime.Now, Salary = 1111 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "cccc", DateOfBirty = DateTime.Now, Salary = 1112 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "cabc", DateOfBirty = DateTime.Now, Salary = 1113 });
InBlock.gif                        employees.Add(new EmployeeModel { Name = "cabb", DateOfBirty = DateTime.Now, Salary = 1114 });
InBlock.gif
InBlock.gif                        autoCompleteBoxTemplate.ItemsSource = employees;
InBlock.gif                }
InBlock.gif
InBlock.gif                /// <summary>
InBlock.gif                /// 演示如何实现按需加载下拉框的数据
InBlock.gif                /// </summary>
InBlock.gif                private void autoCompleteBoxPopulate_Populating(object sender, PopulatingEventArgs e)
InBlock.gif                {
InBlock.gif                        // Populate 是异步的,调用服务也是异步的
InBlock.gif                        // 所以要先在 Populating 中 Cancel 掉 Populate,以便异步调用服务
InBlock.gif                        // 服务返回结果后再调用 PopulateComplete() 方法,以便触发 Populated 事件
InBlock.gif
InBlock.gif                        e.Cancel = true;
InBlock.gif
InBlock.gif                        List<string> names = new List<string>();
InBlock.gif                        Uri uri = new Uri("http://localhost:8616/Employee.svc/names/" + e.Parameter, UriKind.Absolute);
InBlock.gif
InBlock.gif                        WebClient client = new WebClient();
InBlock.gif                        client.DownloadStringCompleted += (s, args) =>
InBlock.gif                        {
InBlock.gif                                if (args.Error != null)
InBlock.gif                                {
InBlock.gif                                        MessageBox.Show("调用服务出错" + args.Error.ToString());
InBlock.gif                                        return;
InBlock.gif                                }
InBlock.gif
InBlock.gif                                XDocument xml = XDocument.Parse(args.Result);
InBlock.gif                                XNamespace ns = "http://schemas.microsoft.com/2003/10/Serialization/Arrays";
InBlock.gif                                autoCompleteBoxPopulate.ItemsSource = xml.Root.Elements(ns + "string").Select(p => p.Value).ToList();
InBlock.gif                                autoCompleteBoxPopulate.PopulateComplete();
InBlock.gif                        };
InBlock.gif                        client.DownloadStringAsync(uri);
InBlock.gif                }
InBlock.gif        }
InBlock.gif}


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

OK
[×××]