wpf-devexpress-dot-xpf-dot-editors-4383574f.md
A text editor with embedded buttons.
Namespace : DevExpress.Xpf.Editors
Assembly : DevExpress.Xpf.Core.v25.2.dll
NuGet Package : DevExpress.Wpf.Core
[DXLicenseWpfEditors]
public class ButtonEdit :
TextEdit
<DXLicenseWpfEditors>
Public Class ButtonEdit
Inherits TextEdit
The following members return ButtonEdit objects:
ButtonEdit editors are text editors that allow you to display buttons within the edit box.
Tip
The ButtonEdit class inherits its features from the TextEdit class.
Refer to the TextEdit class description for information on derived features and API.
Use the BaseEdit.EditValue property to specify the editor’s value:
<Window ...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<dxe:ButtonEdit EditValue="Hello World!"/>
Handle the BaseEdit.EditValueChanged event to get a notification when the editor’s value is changed. To validate the new value, handle the BaseEdit.Validate event.
The editor initially displays one button (the default button). The default button visibility is specified by the ButtonEdit.AllowDefaultButton property.
When a user clicks the default button, the editor fires the ButtonEdit.DefaultButtonClick event.
<dxe:ButtonEdit x:Name="buttonEdit1"
AllowDefaultButton="True"
DefaultButtonClick="buttonEdit1_DefaultButtonClick"/>
You can create ButtonInfoBase descendants (ButtonInfo, SpinButtonInfo, ImageButtonInfo, DeleteButtonInfo, or LoadingIndicatorButtonInfo) and add them to the ButtonEdit.Buttons collection to display additional buttons:
<dxe:ButtonEdit AllowDefaultButton="False">
<dxe:ButtonEdit.Buttons>
<dxe:ButtonInfo Command="ApplicationCommands.Copy" GlyphKind="User">
<dxe:ButtonInfo.ContentTemplate>
<DataTemplate>
<dx:DXImage Source="{dx:DXImage 'SvgImages/Edit/Copy.svg'}" Height="20" Width="20"/>
</DataTemplate>
</dxe:ButtonInfo.ContentTemplate>
</dxe:ButtonInfo>
<dxe:ButtonInfo Command="ApplicationCommands.Cut" GlyphKind="User">
<dxe:ButtonInfo.ContentTemplate>
<DataTemplate>
<dx:DXImage Source="{dx:DXImage 'SvgImages/Edit/Cut.svg'}" Height="20" Width="20"/>
</DataTemplate>
</dxe:ButtonInfo.ContentTemplate>
</dxe:ButtonInfo>
<dxe:ButtonInfo Command="ApplicationCommands.Paste" GlyphKind="User">
<dxe:ButtonInfo.ContentTemplate>
<DataTemplate>
<dx:DXImage Source="{dx:DXImage 'SvgImages/Edit/Paste.svg'}" Height="20" Width="20"/>
</DataTemplate>
</dxe:ButtonInfo.ContentTemplate>
</dxe:ButtonInfo>
</dxe:ButtonEdit.Buttons>
</dxe:ButtonEdit>
Handle the CommandButtonInfo.Click event or specify a command to get a notification when the editor’s custom button is clicked.
Set the ButtonInfoBase.IsDefaultButton property to true if you want your custom button to act like the editor’s default button.
You can add a null value button that allows users to clear an editor value.
Use one of the following techniques to add the delete button:
Set the ButtonEdit.NullValueButtonPlacement (or ButtonEditSettings.NullValueButtonPlacement for the in-place ButtonEdit) property to EditBox to display the delete button in the editor’s edit box.
Add a DeleteButtonInfo class instance to the editor’s ButtonEdit.Buttons (ButtonEditSettings.Buttons for the in-place ButtonEdit) collection. In this case, you can fully customize the delete button’s behavior and appearance. To set the default button’s behavior, set the DeleteButtonInfo.IsDefault property to true.
You can load a set of custom buttons from a ViewModel and display them in the ButtonEdit. Use the ButtonEdit.ButtonsSource property to specify a collection of objects providing information to generate and initialize buttons for the current ButtonEdit. The ButtonTemplate property specifies the data template used to render buttons from the collection.
<dxe:ButtonEdit.ButtonTemplate>
<DataTemplate>
<ContentControl>
<dxe:ButtonInfo
Command="{Binding Command}"
Content="{Binding Content}"
IsLeft="{Binding IsLeft}" />
</ContentControl>
</DataTemplate>
</dxe:ButtonEdit.ButtonTemplate>
If you want to declare several data templates and apply one of them according to your own logic, use the ButtonEdit.ButtonTemplateSelector property.
If the ShowText property is set to false , the edit box is hidden and only editor buttons are displayed (see the image below). If no buttons are visible, the editor displays an empty region.
The ShowEditorButtons property specifies whether the editor should display its buttons.
Set the IsTextEditable property to false to prevent end users from editing an editor’s text values.
If the IsTextEditable property is set to false , end users are not allowed to change, select, and copy the text displayed in the edit box, but can click editor buttons (if any).
Tip
Refer to the following topic for more information: Appearance Customization.
The following example shows how to create a ButtonEdit with the Clear button that clears the editor's value.
<dxe:ButtonEdit x:Name="buttonEdit" Width="100"
AllowDefaultButton="False">
<dxe:ButtonEdit.Buttons>
<dxe:ButtonInfo Content="Clear" Click="ButtonInfo_Click" />
</dxe:ButtonEdit.Buttons>
</dxe:ButtonEdit>
private void ButtonInfo_Click(object sender, RoutedEventArgs e) {
buttonEdit.EditValue = string.Empty;
}
Private Sub ButtonInfo_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
buttonEdit.EditValue = String.Empty
End Sub
The following code snippets (auto-collected from DevExpress Examples) contain references to the ButtonEdit class.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.
<dxlc:LayoutItem AddColonToLabel="True" Label="Home Phone">
<dxe:ButtonEdit
AllowDefaultButton="False"
wpf-create-a-fluent-design-using-appearance-options/CS/FluentDesignTemplate/MainWindow.xaml#L43
</dx:WpfSvgPalette.Palette>
<dxe:ButtonEdit Background="#1FFFFFFF" Margin="0,0,30,0" Width="230" NullText="Search everywhere..." BorderThickness="0" BorderBrush="Transparent" AllowDefaultButton="False">
<dxe:ButtonInfo IsLeft="True" GlyphKind="Custom">
wpf-docklayoutmanager-move-a-layout-item-in-code/CS/DockLayoutManager_MoveItem/Window1.xaml#L23
<dxdo:LayoutControlItem x:Name="layoutItemEditor1">
<dxe:ButtonEdit x:Name="editor1" Text="(555) 123 45 67 89" />
</dxdo:LayoutControlItem>
wpf-data-grid-change-cell-template-based-on-custom-logic/CS/Window1.xaml#L18
<DataTemplate x:Key="buttonEditor">
<dxe:ButtonEdit Name="PART_Editor" />
</DataTemplate>
<DataTemplate x:Key="ButtonEditTemplate">
<dxe:ButtonEdit Name="PART_Editor"
IsTextEditable="False"
Show 32 items
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control BaseEdit TextEditBase TextEdit ButtonEdit BrowsePathEdit
See Also