实现下拉列表支持DataGrid的AutoCompleteBox

Silverlight中的AutoCompleteBox是一个非常强大的输入控件，可以实现灵活的参照录入。如果参照内容具有多个属性，则下拉列表使用多列的DataGrid是一个比较好的选择。

依靠控件模板强大的功能，AutoCompleteBox是可以实现这个需求的，并在Silverlight ToolKit Samples（November 2009）中给出了一个示例：AutoCompleteBox widht a DataGrid DropDown。示例中使用了一个从DataGrid继承的自定义的选择适配器（实现ISelectionAdapter接口），并最终用自定义AutoCompleteBox的控件模板实现。

从示例的实现过程可以看出，实现这个功能的工作量还是相当大的，如果项目中多处有多该功能的需求，则工作量几乎是不可接受的。于是想到了创建模板化控件。。。

1、首先，在项目中添加Silverlight模板化控件，取名为：AutoCompleteBoxPlus。

添加以后，VS自动为我们生成了一个从Control继承的类，还有一个Themes文件夹下的Generic.xaml。

2、修改AutoCompleteBoxPlus的基类，由Control改为AutoCompleteBox。

3、为AutoCompleteBoxPlus定义两个属性：PopupWidth（下拉列表宽度）及PopupColumns（下拉列表列集合）。本来是下拉的，不知自己为何用了Popup这个单词，呵呵。

至此，AutoCompleteBoxPlus类基本完成，完整代码如下：

    /// <summary>
    /// 自动完成框扩展，支持下拉列表中使用DataGrid
    /// </summary>
    public class AutoCompleteBoxPlus : AutoCompleteBox
    {
        public AutoCompleteBoxPlus()
        {
            this.DefaultStyleKey = typeof(AutoCompleteBoxPlus);

            this.PopupWidth = this.Width;
        }

        private ObservableCollection<DataGridColumn> popupColumns = new ObservableCollection<DataGridColumn>();

        public static readonly DependencyProperty PopupWidthProperty =
            DependencyProperty.Register("PopupWidth", typeof(double), typeof(AutoCompleteBoxPlus), null);

        /// <summary>
        /// 下拉列表宽度。
        /// </summary>
        public double PopupWidth
        {
            get { return (double)GetValue(PopupWidthProperty); }
            set { SetValue(PopupWidthProperty, value); }
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            DataGrid dg = this.SelectionAdapter as DataGrid;
            foreach (var column in this.PopupColumns) dg.Columns.Add(column);
        }

        /// <summary>
        /// 下拉列表列集合。
        /// </summary>
        public ObservableCollection<DataGridColumn> PopupColumns
        {
            get { return this.popupColumns; }
        }
    }

4、在Generic.xaml中定义AutoCompleteBoxPlus控件的模板，模板大部分采用了Silverlight ToolKit Samples中的代码。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Demo">
    
    <Style TargetType="local:AutoCompleteBoxPlus">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:AutoCompleteBoxPlus">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PopupStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="PopupOpened" />
                                    <VisualTransition GeneratedDuration="0:0:0.5" To="PopupClosed" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="PopupOpened">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="1.0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PopupClosed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="0.0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <TextBox IsTabStop="True" x:Name="Text" Margin="0"/>
                        <Popup x:Name="Popup">
                            <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="0.0" BorderThickness="0"
                                    CornerRadius="3">
                                <local:DataGridSelectionAdapter x:Name="SelectionAdapter" AutoGenerateColumns="False" 
                                    IsReadOnly="True" HorizontalContentAlignment="Left" 
                                    Width="{TemplateBinding PopupWidth}" >
                                </local:DataGridSelectionAdapter>
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

需注意的是，模板中用到了一个自定义的类：DataGridSelectionAdapter，即上文介绍示例时提到的选择适配器了。该类直接从Silverlight ToolKit Samples中Reflector，然后略加修改。完整代码如下：

    /// <summary>
    /// DataGrid选择适配器。
    /// </summary>
    public class DataGridSelectionAdapter : DataGrid, ISelectionAdapter
    {
        public DataGridSelectionAdapter()
        {
            base.SelectionChanged += new SelectionChangedEventHandler(this.OnSelectionChanged);
            MouseLeftButtonUp += new MouseButtonEventHandler(this.OnSelectorMouseLeftButtonUp);
        }

        // Properties
        private bool IgnoreAnySelection { get; set; }

        private bool IgnoringSelectionChanged { get; set; }

        // Events
        public event RoutedEventHandler Cancel;

        public event RoutedEventHandler Commit;

        public new event SelectionChangedEventHandler SelectionChanged;

        private void AfterAdapterAction()
        {
            this.IgnoringSelectionChanged = true;
            this.SelectedItem = null;
            SelectedIndex = -1;
            this.IgnoringSelectionChanged = false;
            this.IgnoreAnySelection = true;
        }

        public AutomationPeer CreateAutomationPeer()
        {
            return new DataGridAutomationPeer(this);
        }

        public void HandleKeyDown(KeyEventArgs e)
        {
            Key key = e.Key;
            if (key != Key.Enter)
            {
                switch (key)
                {
                    case Key.Up:
                        this.IgnoreAnySelection = false;
                        this.SelectedIndexDecrement();
                        e.Handled = true;
                        return;

                    case Key.Right:
                        return;

                    case Key.Down:
                        if ((ModifierKeys.Alt & Keyboard.Modifiers) == ModifierKeys.None)
                        {
                            this.IgnoreAnySelection = false;
                            this.SelectedIndexIncrement();
                            e.Handled = true;
                        }
                        return;

                    case Key.Escape:
                        this.OnCancel(this, e);
                        e.Handled = true;
                        return;
                }
            }
            else
            {
                this.OnCommit(this, e);
                e.Handled = true;
            }
        }

        private void OnCancel(object sender, RoutedEventArgs e)
        {
            RoutedEventHandler cancel = this.Cancel;
            if (cancel != null)
            {
                cancel(sender, e);
            }
            this.AfterAdapterAction();
        }

        private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            this.IgnoreAnySelection = true;
        }

        private void OnCommit(object sender, RoutedEventArgs e)
        {
            RoutedEventHandler commit = this.Commit;
            if (commit != null)
            {
                commit(sender, e);
            }
            this.AfterAdapterAction();
        }

        private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (!this.IgnoringSelectionChanged && !this.IgnoreAnySelection)
            {
                SelectionChangedEventHandler selectionChanged = this.SelectionChanged;
                if (selectionChanged != null)
                {
                    selectionChanged(sender, e);
                }
            }
        }

        private void OnSelectorMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            this.IgnoreAnySelection = false;
            this.OnSelectionChanged(this, null);
            this.OnCommit(this, new RoutedEventArgs());
        }

        private void SelectedIndexDecrement()
        {
            int selectedIndex = SelectedIndex;
            if (selectedIndex >= 0)
            {
                SelectedIndex--;
            }
            else if (selectedIndex == -1)
            {
                SelectedIndex = this.Items.Count - 1;
            }
            ScrollIntoView(this.SelectedItem, Columns[0]);
        }

        private void SelectedIndexIncrement()
        {
            SelectedIndex = ((SelectedIndex + 1) >= this.Items.Count) ? -1 : (SelectedIndex + 1);
            ScrollIntoView(this.SelectedItem, Columns[0]);
        }


        private ObservableCollection<object> Items
        {
            get
            {
                return (this.ItemsSource as ObservableCollection<object>);
            }
        }

        public new IEnumerable ItemsSource
        {
            get
            {
                return base.ItemsSource;
            }
            set
            {
                INotifyCollectionChanged itemsSource;
                if (base.ItemsSource != null)
                {
                    itemsSource = base.ItemsSource as INotifyCollectionChanged;
                    if (itemsSource != null)
                    {
                        itemsSource.CollectionChanged -= new NotifyCollectionChangedEventHandler(this.OnCollectionChanged);
                    }
                }
                base.ItemsSource = value;
                if (base.ItemsSource != null)
                {
                    itemsSource = base.ItemsSource as INotifyCollectionChanged;
                    if (itemsSource != null)
                    {
                        itemsSource.CollectionChanged += new NotifyCollectionChangedEventHandler(this.OnCollectionChanged);
                    }
                }
            }
        }

        public new object SelectedItem
        {
            get
            {
                return base.SelectedItem;
            }
            set
            {
                this.IgnoringSelectionChanged = true;
                base.SelectedItem = value;
                this.IgnoringSelectionChanged = false;
            }
        }
    }

至此，一个支持DataGrid下拉列表的AutoCompleteBox控件就实现了。使用示例代码：

<local:AutoCompleteBoxPlus x:Name="acbp" ValueMemberPath="Name">
       <local:AutoCompleteBoxPlus.PopupColumns>                
            <data:DataGridTextColumn Header="Code" Binding="{Binding Code}" Width="80" />
            <data:DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="120" />
       </local:AutoCompleteBoxPlus.PopupColumns>
</local:AutoCompleteBoxPlus>

不过在实现过程中也着实遇到了一些问题，记录一下权作备忘：

A、自定义类中可以使用控件模板中的命名控件，但只能在重写的OnApplyTemplate方法中用GetTemplateChild方法获取，在不正确的时机或FindName方法是无法获取到的。

B、重写OnApplyTemplate方法时必须调用基类的该方法。

C、自定义的选择适配器必须命名为SelectionAdapter。全部AutoCompleteBox 控件的命名的部件可参见Silverlight文档中的“AutoCompleteBox 样式和模板”。