Lesson 3 - Creating a TextEdit with a Dropdown

• Aug 03, 2020
• 2 minutes to read

This document demonstrates how to create a TextEdit control with a custom dropdown.

Follow these steps.

1. Run MS Visual Studio 2015.

2. Create a new Windows Universal Application project. Choose New Project on the File menu or press Ctrl+Shift+N, choose the Windows Universal template category, and then choose Blank App (XAML).

   

3. Open the Visual Studio toolbox, locate the “DX.19.2: Common Controls” tab, choose the TextEdit toolbox item and drop it onto the window.

   Note

   Dropping the TextEdit toolbox item onto the window will automatically add all the required references (DevExpress.Core and DevExpress.Controls). To add the TextEdit in code, reference these assemblies manually.

4. Press the F4 key to invoke the Properties window. Position the TextEdit in the center of the screen by setting its HorizontalAlignment and VerticalAlignment properties to Center. Set the editor’s Width property to 300. Set the Name property to “textEdit”.

   XAML

   <Editors:TextEdit Name=""textEdit" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
   

5. Locate the Buttons property. Invoke Collection Editor: Buttons.

   

6. In the Collection Editor, select Other type from the dropdown menu to invoke the Select Object dialog window. Select PopupButtonInfo and press OK. Add a PopupButtonInfo object and set its PopupSettings property to PopupSettings.

   

7. Specify the popup content. The following code shows how to set a ButtonsControl with five buttons as the dropdown content in XAML.

   XAML

   <Editors:TextEdit Name="textEdit" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
       <Editors:TextEdit.Buttons>
           <Editors:PopupButtonInfo>
               <Editors:PopupButtonInfo.PopupSettings>
                   <Editors:PopupSettings PopupAutoWidth="True" PopupMaxHeight="200">
                       <Editors:PopupSettings.PopupContent>
                           <Editors:ButtonsControl>
                               <Editors:ButtonsControl.Items>
                                   <Editors:ButtonInfo Content="Button1" />
                                   <Editors:ButtonInfo Content="Button2" />
                                   <Editors:ButtonInfo Content="Button3" />
                                   <Editors:ButtonInfo Content="Button4" />
                                   <Editors:ButtonInfo Content="Button5" />
                               </Editors:ButtonsControl.Items>
                           </Editors:ButtonsControl>
                       </Editors:PopupSettings.PopupContent>
                   </Editors:PopupSettings>
               </Editors:PopupButtonInfo.PopupSettings>
           </Editors:PopupButtonInfo>
       </Editors:TextEdit.Buttons>
   </Editors:TextEdit>
   

8. Run the application to see the result.