有关AutoCompleteBox组件的研究[4]_下拉框内嵌DataGrid与被嵌入DataGrid——Silverlight学习笔记[39]

在AutoCompleteBox组件下拉框中嵌入DataGrid可以让我们更好地组织候选数据以达到更好的显示效果。与此类似的，在DataGrid组件中嵌入AutoCompleteBox组件可以便于我们进行数据的输入。本文将为大家讲述如何实现这两种效果。

※内嵌DataGrid

为了能实现在AutoCompleteBox组件的下拉框中成功地嵌入DataGrid，我们需要用到微软提供给我们的一个辅助类DataGridSelectionAdapter，该类继承自DataGrid并实现了ISelectionAdapter接口。该类的代码如下：

DataGridSelectionAdapter.cs（将该文件保存在Silverlight项目文件夹下）

using System;

using System.Collections;

using System.Collections.ObjectModel;

using System.Collections.Specialized;

using System.Windows;

using System.Windows.Automation.Peers;

using System.Windows.Controls;

using System.Windows.Input;

namespace SilverlightClient

{

public class DataGridSelectionAdapter : DataGrid, ISelectionAdapter

{

private bool IgnoreAnySelection { get; set; }

private bool IgnoringSelectionChanged { get; set; }

public new event SelectionChangedEventHandler SelectionChanged;

public event RoutedEventHandler Commit;

public event RoutedEventHandler Cancel;

public DataGridSelectionAdapter()

{

base.SelectionChanged += OnSelectionChanged;

MouseLeftButtonUp += OnSelectorMouseLeftButtonUp;

}

public new object SelectedItem

{

get

{

return base.SelectedItem;

}

set

{

IgnoringSelectionChanged = true;

base.SelectedItem = value;

IgnoringSelectionChanged = false;

}

}

private void OnSelectorMouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

IgnoreAnySelection = false;

OnSelectionChanged(this, null);

OnCommit(this, new RoutedEventArgs());

}

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (IgnoringSelectionChanged)

{

return;

}

if (IgnoreAnySelection)

{

return;

}

SelectionChangedEventHandler handler = this.SelectionChanged;

if (handler != null)

{

handler(sender, e);

}

}

public new IEnumerable ItemsSource

{

get { return base.ItemsSource; }

set

{

if (base.ItemsSource != null)

{

INotifyCollectionChanged notify = base.ItemsSource as INotifyCollectionChanged;

if (notify != null)

{

notify.CollectionChanged -= OnCollectionChanged;

}

}

base.ItemsSource = value;

if (base.ItemsSource != null)

{

INotifyCollectionChanged notify = base.ItemsSource as INotifyCollectionChanged;

if (notify != null)

{

notify.CollectionChanged += OnCollectionChanged;

}

}

}

}

private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

{

IgnoreAnySelection = true;

}

private ObservableCollection<object> Items

{

get { return ItemsSource as ObservableCollection<object>; }

}

private void SelectedIndexIncrement()

{

SelectedIndex = SelectedIndex + 1 >= Items.Count ? -1 : SelectedIndex + 1;

ScrollIntoView(SelectedItem, this.Columns[0]);

}

private void SelectedIndexDecrement()

{

int index = SelectedIndex;

if (index >= 0)

{

SelectedIndex--;

}

else if (index == -1)

{

SelectedIndex = Items.Count - 1;

}

ScrollIntoView(SelectedItem, this.Columns[0]);

}

public void HandleKeyDown(KeyEventArgs e)

{

switch (e.Key)

{

case Key.Enter:

OnCommit(this, e);

e.Handled = true;

break;

case Key.Up:

IgnoreAnySelection = false;

SelectedIndexDecrement();

e.Handled = true;

break;

case Key.Down:

if ((ModifierKeys.Alt & Keyboard.Modifiers) == ModifierKeys.None)

{

IgnoreAnySelection = false;

SelectedIndexIncrement();

e.Handled = true;

}

break;

case Key.Escape:

OnCancel(this, e);

e.Handled = true;

break;

default:

break;

}

}

private void OnCommit(object sender, RoutedEventArgs e)

{

RoutedEventHandler handler = Commit;

if (handler != null)

{

handler(sender, e);

}

AfterAdapterAction();

}

private void OnCancel(object sender, RoutedEventArgs e)

{

RoutedEventHandler handler = Cancel;

if (handler != null)

{

handler(sender, e);

}

AfterAdapterAction();

}

private void AfterAdapterAction()

{

IgnoringSelectionChanged = true;

SelectedItem = null;

SelectedIndex = -1;

IgnoringSelectionChanged = false;

// Reset, to ignore any future changes

IgnoreAnySelection = true;

}

public AutomationPeer CreateAutomationPeer()

{

return new DataGridAutomationPeer(this);

}

}

}

※DataGrid中嵌入AutoCompleteBox

主要用到的方法是使用DataGrid组件中的DataGridTemplateColumn标签。

完整的实例代码：

详细的说明在代码注释中给出。

MainPage.xaml文件代码：

<UserControl

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"

xmlns:samples="clr-namespace:SilverlightClient"

mc:Ignorable="d" xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightClient.MainPage"

d:DesignWidth="320" d:DesignHeight="480">

<Grid x:Name="LayoutRoot" Width="320" Height="480" Background="White">

<Grid.Resources>

<!--AutoCompleteBox组件数据网格样式设定-->

<Style x:Key="DataGridAutoCompleteTemplate" TargetType="input:AutoCompleteBox">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="input:AutoCompleteBox">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="PopupStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" To="PopupOpened" />

<VisualTransition GeneratedDuration="0:0:0.2" 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">

<Border.RenderTransform>

<TranslateTransform X="2" Y="2" />

</Border.RenderTransform>

<Border.Background>

<SolidColorBrush Color="#11000000" />

</Border.Background>

<Border HorizontalAlignment="Stretch" BorderThickness="0" CornerRadius="3">

<Border.Background>

<SolidColorBrush Color="#11000000" />

</Border.Background>

<Border.RenderTransform>

<TransformGroup>

<ScaleTransform />

<SkewTransform />

<RotateTransform />

<TranslateTransform X="-1" Y="-1" />

</TransformGroup>

</Border.RenderTransform>

<Border HorizontalAlignment="Stretch" Opacity="1.0" Padding="1" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">

<Border.RenderTransform>

<TransformGroup>

<ScaleTransform />

<SkewTransform />

<RotateTransform />

<TranslateTransform X="-2" Y="-2" />

</TransformGroup>

</Border.RenderTransform>

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFDDDDDD" Offset="0"/>

<GradientStop Color="#AADDDDDD" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<!--为DataGridSelectionAdapter绑定数据字段-->

<samples:DataGridSelectionAdapter

x:Name="SelectionAdapter"

AutoGenerateColumns="False"

IsReadOnly="True" FontSize="14">

<samples:DataGridSelectionAdapter.Columns>

<data:DataGridTextColumn Header="员工号" Binding="{Binding EmployeeID}" />

<data:DataGridTextColumn Header="员工姓名" Binding="{Binding EmployeeName}" />

<data:DataGridTextColumn Header="员工年龄" Binding="{Binding EmployeeAge}" />

</samples:DataGridSelectionAdapter.Columns>

</samples:DataGridSelectionAdapter>

</Border>

</Border>

</Border>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<input:AutoCompleteBox x:Name="acb" Height="26" Margin="8,32,132,0" VerticalAlignment="Top" Style="{StaticResource DataGridAutoCompleteTemplate}" ValueMemberBinding="{Binding EmployeeName}"/>

<data:DataGrid x:Name="dgEmployee" Height="209" Margin="8,0,8,8" VerticalAlignment="Bottom" AutoGenerateColumns="False" FontSize="14">

<data:DataGrid.Columns>

<data:DataGridTextColumn Header="员工号" Binding="{Binding EmployeeID}" IsReadOnly="True" />

<data:DataGridTemplateColumn Header="员工姓名" Width="90">

<!--设置AutoCompleteBox模板-->

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding EmployeeName,Mode=TwoWay}"/>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

<data:DataGridTemplateColumn.CellEditingTemplate>

<DataTemplate>

<input:AutoCompleteBox x:Name="embeddedACB" Text="{Binding EmployeeName,Mode=TwoWay}" ValueMemberPath="EmployeeName" Loaded="embeddedACB_Loaded" Width="90">

<input:AutoCompleteBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding EmployeeName}"/>

</DataTemplate>

</input:AutoCompleteBox.ItemTemplate>

</input:AutoCompleteBox>

</DataTemplate>

</data:DataGridTemplateColumn.CellEditingTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTextColumn Header="员工年龄" Binding="{Binding EmployeeAge,Mode=TwoWay}" />

</data:DataGrid.Columns>

</data:DataGrid>

</Grid>

</UserControl>

MainPage.xaml.cs文件代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Controls.Common;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.ComponentModel;

namespace SilverlightClient

{

//业务对象类

public class Employees

{

public int EmployeeID { get; set; }

public string EmployeeName { get; set; }

public int EmployeeAge { get; set; }

}

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

//注册事件触发

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

//为AutoCompleteBox和DataGrid填充数据

acb.ItemsSource = GetEmployees();

acb.FilterMode = AutoCompleteFilterMode.Contains;

dgEmployee.ItemsSource = GetEmployees();

}

//为DataGrid组件中的AutoCompleteBox组件提供数据

void embeddedACB_Loaded(object sender, RoutedEventArgs e)

{

AutoCompleteBox myacb = sender as AutoCompleteBox;

myacb.ItemsSource = GetEmployees();

}

//数据源

ObjectCollection GetEmployees()

{

ObjectCollection returnedValue = new ObjectCollection();

returnedValue.Add(new Employees() { EmployeeID = 1, EmployeeName = "Alice", EmployeeAge = 21 });

returnedValue.Add(new Employees() { EmployeeID = 2, EmployeeName = "Allen", EmployeeAge = 22 });

returnedValue.Add(new Employees() { EmployeeID = 3, EmployeeName = "Benedict", EmployeeAge = 23 });

returnedValue.Add(new Employees() { EmployeeID = 4, EmployeeName = "Ben", EmployeeAge = 24 });

returnedValue.Add(new Employees() { EmployeeID = 5, EmployeeName = "Black", EmployeeAge = 25 });

returnedValue.Add(new Employees() { EmployeeID = 6, EmployeeName = "Charles", EmployeeAge = 26 });

returnedValue.Add(new Employees() { EmployeeID = 7, EmployeeName = "Chasel", EmployeeAge = 27 });

returnedValue.Add(new Employees() { EmployeeID = 8, EmployeeName = "Dave", EmployeeAge = 28 });

returnedValue.Add(new Employees() { EmployeeID = 9, EmployeeName = "David", EmployeeAge = 29 });

returnedValue.Add(new Employees() { EmployeeID = 10, EmployeeName = "Dean", EmployeeAge = 30 });

return returnedValue;

}

}

}

最终效果图：





作者：Kinglee
文章出处：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。