How to: Customize the Appearance of a Standalone Editor

• Jun 07, 2019

The following example shows how to customize the visual appearance of a standalone editor.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appearance-of-a-standalone-editor-e1980.

Window1.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="BaseEdit_CustomizingAppearance.Window1"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="130" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="32" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <dxe:TextEdit BorderThickness="0" EditValue="USA" ShowBorder="False"
                      Grid.Column="1" Grid.Row="1">
            <dxe:TextEdit.EditTemplate>
                <ControlTemplate>
                    <Border CornerRadius="7" BorderBrush="Orange" BorderThickness="3">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Margin="2" VerticalAlignment="Center"
                                       Foreground="Gray" Text="Country:" />
                            <TextBox Text="{Binding EditValue, Mode=TwoWay}"
                                     Grid.Column="1" Margin="2"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </dxe:TextEdit.EditTemplate>
        </dxe:TextEdit>
    </Grid>
</Window>