# How to: Create a Functional ButtonEdit | WPF Controls | DevExpress Documentation
[ButtonEdit](/WPF/DevExpress.Xpf.Editors.ButtonEdit) is a text editor which can display an unlimited number of fully customizable buttons.
This document demonstrates how to create a [ButtonEdit](/WPF/DevExpress.Xpf.Editors.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](/WPF/DevExpress.Xpf.Editors.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
1. Right click the **ButtonEdit** and select **Properties**. Hide the default button by setting the [ButtonEdit.AllowDefaultButton](/WPF/DevExpress.Xpf.Editors.ButtonEdit.AllowDefaultButton) property to **false**.
2. 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
1. 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");
}
}
}
2. Run the application to see the result.
