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

最新推荐文章于 2022-09-26 14:22:51 发布
最新推荐文章于 2022-09-26 14:22:51 发布
阅读量54 收藏
点赞数

在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/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
weixin_34104341
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python tkinter 下拉框_python tkinter（二） 下拉框（combobox）组件的属性说明及示例...
weixin_33594195的博客
01-28 8427
Python tkinter 下拉框(combobox)组件用于tkinter GUI里添加下拉框，下拉框可以添加文本和设置默认选项。当选中下拉框时，可以返回指定的值，通过不同的值，执行不同的函数。使用语法：self.drop_down_box = ttk.Combobox(master)master：按钮控件的父容器参数说明：value插入下拉选项.current()默认显示的下拉选项框.get...
cellEditing_in_datagrid.zip
07-27
EasyUI是一个基于jQuery的轻量级前端框架，它提供了一系列组件，包括DataGrid，用于展示和管理数据。DataGrid是一个功能强大的表格控件，支持排序、分页、过滤等多种功能，并且可以通过设置编辑器实现单元格级别的...
实现下拉列表支持DataGrid的AutoCompleteBox
weixin_34049948的博客
04-21 85
Silverlight中的AutoCompleteBox是一个非常强大的输入控件，可以实现灵活的参照录入。如果参照内容具有多个属性，则下拉列表使用多列的DataGrid是一个比较好的选择。 依靠控件模板强大的功能，AutoCompleteBox是可以实现这个需求的，并在Silverlight ToolKit Samples（November 2009）中给出了一个示例：AutoCompleteB...
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题——基础积累
yehaocheng520的博客
05-09 4915
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题
Vue自定义组件——自定义下拉框
qq_39522549的博客
09-18 2178
组件自定义 props props传入数据。 $emit this.$emit(“input”,param);调用组件外部的监听。 v-model 自定义组件要使用v-model实现双向绑定，会使用名称为value的props，和名称为input的事件。下面有实现。 下拉框实现代码 /* 自定义下拉列表组件样式 */ .custom-select-box{ min-height: 30px; width: 100%; position: relative; } .custom-sel
.NET MAUI学习笔记——2.构建第一个程序_初级篇
三千幻想乡
09-26 2550
想了一下，MAUI主打的是跨平台，号称『一次编写，随处运行』，如果还要出专门针对某个平台的构建指南，岂不是砸了自己的招牌。因此，不管是Windows、Android、iOS还是macOS，在构建第一个程序上，是大同小异的，官方文档中并没有给每种设备的构建列出单独的大章节，。不过安装环境这个东西，应该不需要单独开一篇文章讲吧，因为是在VS2022下开发，只需要在安装VS2022时勾选上MAUI环境即可（如果VS已经装完了但没有装MAUI的，可以再次打开安装器，重装并勾选MAUI）。
1key_cd.rar_下拉框 MFC
09-24
4. **填充下拉框**：在对话框的 OnInitDialog() 函数或其他适当位置，使用CComboBox::AddString()添加列表项。例如： ``` for (int i = 0; i ; i++) { m.comboBox.AddString(_T("Item ") + CString(i)); } ``` ...
dhtmlxCombo.zip_WEB ActiveX_dhtmlxcom_js dhtmlXCombo_下拉框_过滤 下拉
09-21
**标题与描述解析** 标题 "dhtmlxCombo.zip_WEB ActiveX_dhtmlxcom_js dhtmlXCombo_下拉框_过滤 下拉" 提供了关键信息，表明这是一个关于`dhtmlXCombo`的软件组件，它是一个具有Web ActiveX支持的JavaScript实现的...
TypeSens-Popup.rar_LabVIEW 下拉_Labview 表格_labview表格_typesens_下拉框
07-15
在LabVIEW编程环境中，"TypeSens-Popup.rar_LabVIEW 下拉_Labview 表格_labview表格_typesens_下拉框"这个标题和描述提到了几个关键概念，包括LabVIEW、表格、下拉框以及TypeSens。让我们一一深入探讨这些知识点。 ...
test_ss.rar_下拉框
09-22
在IT行业中，尤其是在网页开发领域，下拉框（Dropdown List）是一种常见的用户界面元素，用于提供用户选择选项的交互方式。在ASP（Active Server Pages）技术框架下，结合Access数据库，我们可以实现动态的搜索功能...
xuesheng.rar_下拉框动态_动态下拉框
09-20
《学生管理系统中的动态下拉框实现》 在信息化管理的时代，学生管理系统已经成为教育机构不可或缺的一部分。这个系统旨在高效地管理学生的各类信息，如个人信息、成绩、出勤等。在这个系统中，动态下拉框是一种常见...
textarea_useto_select.rar_javascript_下拉框
09-21
而“textarea自动下拉.files”可能包含与此示例相关的其他文件，如CSS样式表或额外的JavaScript库，用于优化视觉效果或增加更复杂的功能。 总的来说，这个示例展示了如何利用JavaScript将Textarea和Select结合，...
vue自定义ComboBox下拉框多选组件.zip
04-06
用途：一般用于系统管理中多选角色，涉及 1、css样式：flex布局，postion之absolute，relative，画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值
INSPC.rar_VB登录界面_inspc_下拉框
09-20
下拉框的使用可能与系统权限或特定功能的访问有关。例如，用户选择不同角色后，登录后展示的功能模块或权限可能会有所不同。 在实际开发中，为了确保安全性，通常会将用户名和密码的验证过程与数据库进行交互。VB...
DWR util.js 学习笔记 整理
10-30
DWR util.js 学习笔记整理 DWR util.js 是一个功能强大的 JavaScript 库，它提供了许多有用的函数，可以帮助开发者在客户端页面上实现各种操作。下面是对 DWR util.js 的学习笔记整理。 1. $() 函数 DWRUtil 中的...
CooliteToolkit.rar_Coolite Exampl_Coolite.Utilities.d_CooliteToo
09-21
《酷莱特工具集——构建高效Ajax界面的实用控件库》 在现代Web开发中，用户界面的设计和交互体验愈发重要。酷莱特（Coolite）工具集，以其独特的CooliteExampl和Coolite.Utilities.D组件，为开发者提供了一套全面且...
iFIX_Menu.rar_IFIX VBA_ifix下拉框_ifix下拉选择_ifix弹出菜单_ifix菜单
07-14
iFIX中实现下拉式菜单的例子iFIX中实现下拉式菜单的例子
DataGridFilter_demo.zip
07-21
在.NET开发环境中，DataGrid控件是用于展示数据表格的常用组件，通常在Windows Forms或WPF应用中使用。在“DataGridFilter_demo.zip”这个压缩包中，我们看到一个示例项目，它展示了如何通过扩展DataGrid的功能，...
ct下拉框插件.rar_ct下拉框插件_timeymj
09-23
《jQuery模拟select下拉框插件的深度解析与应用》 在网页开发中，下拉框（Dropdown）是常见的交互元素，它能够有效地节省页面空间并提供用户友好的选择方式。"ct下拉框插件"是专为jQuery设计的一款高效、灵活的...
locator = tuple(Add_regular_quotation.LOC_Property_address_下拉框选择.value) self.click_by_js(locator) 报错：ttributeError: &#39;tuple&#39; object has no attribute &#39;value&#39; 如何修改
最新发布
05-28
locator_value = Add_regular_quotation.LOC_Property_address_下拉框选择.value locator = tuple(locator_value) self.click_by_js(locator) ``` 这样，你先将定位器的值单独取出来，然后再将其转换成元组对象，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值