稳扎稳打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

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

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

OK
[源码下载]