Lesson 1 - Creating a TextEdit With a Custom Button

This document demonstrates how to create and customize the TextEdit.

Do the following:

  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).

    New_Project

  3. Open the Visual Studio toolbox, locate the "DX.18.1: 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" and the Text property to "TextEdit".

    <Editors:TextEdit Name="textEdit" Text="TextEdit" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
    
  5. Locate the Buttons property. Invoke Collection Editor: Buttons.

    Buttons property

  6. In the Collection Editor, add a ButtonInfo item. Set the Content property to "Colorize" and IsLeft property to true.

    Button Collection Editor

  7. Handle the Click event of the "Colorize" button to change the editor's foreground color.

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Text_Edit"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Editors="using:DevExpress.UI.Xaml.Editors"
        x:Class="Text_Edit.MainPage"
        mc:Ignorable="d">
    
        <Grid >
    
            <Editors:TextEdit Name="textEdit" Text="TextEdit" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
                <Editors:TextEdit.Buttons>
                    <Editors:ButtonInfo Content="Colorize" IsLeft="True" Click="ButtonInfo_Click"/>
                </Editors:TextEdit.Buttons>
            </Editors:TextEdit>
    
        </Grid>
    </Page>
    
  8. Run the application to see the result.

    Colorize_button