How to: Create a SearchLookUpEdit and Bind it to Data

• Aug 03, 2020
• 3 minutes to read

The SearchLookUpEdit editor combines the functionality of the LookUpEdit with the built-in Find box feature that allows you to quickly locate data.

This document demonstrates how to create a SearchLookUpEdit control and bind it to data.

Create a New Project and Add a SearchLookUpEdit

1. Run MS Visual Studio.
2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose the WPF Application.

3. Add a LookUpEdit component to the project.

   To do this, open the Visual Studio toolbox, choose the LookUpEdit toolbox item and drop it onto the window.

   

   XAML

   <Window x:Class="SearchLookUpEdit.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
           xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
           xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxg:LookUpEdit VerticalAlignment="Top" HorizontalAlignment="Stretch" Name="searchLookUpEdit" Height="30" />
       </Grid>
   </Window>
   

   Note

   To apply the custom “Office2010Black” theme, manually add a reference to the DevExpress.Xpf.Core.v24.1.dll library.

4. To enable the Find box feature, set the StyleSettings property to “SearchLookUpEditStyleSettings”:

   XAML

   <Window x:Class="SearchLookUpEdit.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
           xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
           xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxg:LookUpEdit Name="searchLookUpEdit" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="30">
               <dxg:LookUpEdit.StyleSettings>
                   <dxg:SearchLookUpEditStyleSettings/>
               </dxg:LookUpEdit.StyleSettings>
           </dxg:LookUpEdit>
       </Grid>
   </Window>
   

Create Data Objects

Add a data source to your WPF Application. For this, follow the steps below.

5. Open the Data menu and click the Add New Data Source item.

   

6. Choose a Database as a type of a data source.

   

7. Then choose a Dataset as a Database Model.

   

8. As a data source, choose the Microsoft Access Database File. As a data connection, choose the nwind database. By default, it is stored in the following path.C:\Users\Public\Documents\DevExpress Demos 24.1\Components\Data

   

9. In the Tables menu, choose Customers.

   

10. After this, click Finish to close the wizard.

Bind SearchLookUpEdit to Data

11. Bind the SearchLookUpEdit to the data source. Add the following code.

    C#

    using System.Windows;
    
    namespace SearchLookUpEdit
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                searchLookUpEdit.ItemsSource = new nwindDataSetTableAdapters.CustomersTableAdapter().GetData();
            }
        }
    }
    

    Set the ValueMember property to “CustomerID”. Set the DisplayMember property to “ContactName”:

    XAML

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit
                    Name="searchLookUpEdit"
                    DisplayMember="ContactName"
                    ValueMember="CustomerID"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch"
                    Height="30">
                <dxg:LookUpEdit.StyleSettings>
                    <dxg:SearchLookUpEditStyleSettings/>
                </dxg:LookUpEdit.StyleSettings>
            </dxg:LookUpEdit>
        </Grid>
    </Window>
    

12. To disable automatic column creation, set the AutoPopulateColumns property to “False”. Create required columns and bind them to corresponding data fields:

    XAML

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit
                    Name="searchLookUpEdit"
                    AutoPopulateColumns="False"
                    DisplayMember="ContactName"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch"
                    Height="30">
                <dxg:LookUpEdit.StyleSettings>
                    <dxg:SearchLookUpEditStyleSettings/>
                </dxg:LookUpEdit.StyleSettings>
                <dxg:LookUpEdit.PopupContentTemplate>
                    <ControlTemplate>
                        <dxg:GridControl Name="PART_GridControl">
                            <dxg:GridControl.Columns>
                                <dxg:GridColumn FieldName="CompanyName"/>
                                <dxg:GridColumn FieldName="ContactName"/>
                                <dxg:GridColumn FieldName="ContactTitle"/>
                                <dxg:GridColumn FieldName="City"/>
                            </dxg:GridControl.Columns>
                            <dxg:GridControl.View>
                                <dxg:TableView AutoWidth="True"/>
                            </dxg:GridControl.View>
                        </dxg:GridControl>
                    </ControlTemplate>
                </dxg:LookUpEdit.PopupContentTemplate>
            </dxg:LookUpEdit>
        </Grid>
    </Window>
    

13. Run the application to see the result.