How to: Create a Functional ButtonEdit

• May 22, 2020
• 2 minutes to read

ButtonEdit is a text editor which can display an unlimited number of fully customizable buttons.

This document demonstrates how to create a ButtonEdit control and customize its buttons.

Create a New Project and Add a ButtonEdit

1. Run MS Visual Studio and create a new WPF Application project.

2. Add a ButtonEdit component to the project.

   To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” category, choose the ButtonEdit toolbox item and drop it onto the window.

   

   XAML

   <Window x:Class="ButtonEdit_with_functionality.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="250" Width="350" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxe:ButtonEdit HorizontalAlignment="Left" Margin="25,75,0,0" VerticalAlignment="Top" Width="275" Height="35"/>
       </Grid>
   </Window>
   

Add Buttons to the ButtonEdit

3. Right click the ButtonEdit and select Properties. Hide the default button by setting the ButtonEdit.AllowDefaultButton property to false.

   

4. Select the Buttons property. Invoke Collection Editor: Buttons.

   

   In the Collection Editor, add two ButtonInfo items. Select the first ButtonInfo item, and set the Content property to “Clear” and IsLeft property to true. Select the second ButtonInfo item and set the GlyphKind property to “Apply”.

   

   XAML

   <Window x:Class="ButtonEdit_with_functionality.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="250" Width="350" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxe:ButtonEdit x:Name="ButtonEdit" HorizontalAlignment="Left" Margin="25,75,0,0" VerticalAlignment="Top" Width="275" Height="35" AllowDefaultButton="False" >
               <dxe:ButtonInfo Content="Clear" IsLeft="True"/>
               <dxe:ButtonInfo GlyphKind="Apply" />
           </dxe:ButtonEdit>
       </Grid>
   </Window>
   

Add Functionality to the Buttons

5. Handle the Click event of the “Apply” button to invoke a message box with information about the ButtonEdit control. Handle the Click event of the “Clear” button to clear the text in the ButtonEdit.

   XAML

   <Window x:Class="ButtonEdit_with_functionality.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="250" Width="350" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxe:ButtonEdit x:Name="ButtonEdit" HorizontalAlignment="Left" Margin="25,75,0,0" VerticalAlignment="Top" Width="275" Height="35" AllowDefaultButton="False" >
               <dxe:ButtonInfo Click="Clear_Button_Click" Content="Clear" IsLeft="True"/>
               <dxe:ButtonInfo Click="Apply_Button_Click" GlyphKind="Apply" />
           </dxe:ButtonEdit>
       </Grid>
   </Window>
   

   C#

   namespace ButtonEdit_with_functionality {
   
       public partial class MainWindow : Window {
           public MainWindow() {
               InitializeComponent();
           }
           private void Clear_Button_Click(object sender, RoutedEventArgs e) {
               ButtonEdit.EditValue = string.Empty;
           }
   
           private void Apply_Button_Click(object sender, RoutedEventArgs e) {
               string Info = "";
               string EOL = "\n";
               Info += " Text: " + ButtonEdit.Text + EOL;
               Info += " Margin: " + ButtonEdit.Margin + EOL;
               Info += " Width: " + ButtonEdit.Width + EOL;
               Info += " Height: " + ButtonEdit.Height + EOL;
               Info += " Mask: " + ButtonEdit.Mask + EOL;
               MessageBox.Show(Info, "ButtonEdit properties");
           }
       }
   }
   

6. Run the application to see the result.