Lesson 1 - Creating a TextEdit With a Custom Button

• Aug 03, 2020
• 2 minutes to read

This document demonstrates how to create and customize the TextEdit.

Do the following:

1. Run MS Visual Studio 2017.

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

   

3. Open the Visual Studio toolbox, locate the “DX.19.2: 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”.

   XAML

   <Editors:TextEdit Name="textEdit" Text="TextEdit" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
   

5. Locate the Buttons property. Invoke Collection Editor: Buttons.

   

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

   

7. Handle the Click event of the “Colorize” button to change the editor’s foreground color.

   XAML

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

   C#

   using System;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml.Media;
   
   namespace Text_Edit {
       public sealed partial class MainPage : Page {
           public MainPage() {
               this.InitializeComponent();
           }
   
           private void ButtonInfo_Click(object sender, EventArgs e) {
               Random random = new Random();
               Windows.UI.Color randomColor = Windows.UI.Color.FromArgb(255, (byte)random.Next(20, 255), (byte)random.Next(20, 255), (byte)random.Next(20, 255));
               textEdit.Foreground = new SolidColorBrush(randomColor);
           }
       }
   }
   

8. Run the application to see the result.