WinRT Windows Phone 8.1: Copy and past TextBox text within the app, beginners tutorials (C#-XAML)

Advertisemen

Introduction:

TextBox control that can be used to display or edit unformatted text. And some times we may need to manipulate the TextBox text to create cut and paste within the app. So we can learn how to create custom ClipBoard functionality from this article

Requirements:

• This sample is targeted for windows phone WinRT 8.1 OS,So make sure you’ve downloaded and installed the Windows Phone 8.1 SDK or later. For more information, see Get the SDK.
• I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
• This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows or Later.

Description:

Step 1:

1. Open Microsoft Visual Studio Express 2013 for Windows (or) later.

2. Create new windows phone WinRT project using the "Blank App" template available under Visual C# -> Store Apps -> Windows Phone Apps. (for example project name : WinrtCut_Paste)

Step 2: And lets add below code in MainPage.xaml, which is having mainly three buttons for performing copy,cut & paste operation on entered text in TextBox.

1. <Grid>  
2.         <StackPanel>              
3.             <!--Sample Tile-->  
4.             <TextBlock Text="WinRT Copy & Past Text:" FontSize="25" />  
5.               
6.             <!--Textbox for entering text-->  
7.             <TextBox Name="TbxEnteredText" Header="Entered Text:" MinHeight="100" TextWrapping="Wrap" AcceptsReturn="True"/>  
8.               
9.             <!--Three buttons for copy,cut & paste operations-->  
10.             <Button Content="Copy" HorizontalAlignment="Stretch" Click="CopyClick"/>  
11.             <Button Content="Cut" HorizontalAlignment="Stretch" Click="CutClick" />  
12.             <Button Content="Paste" HorizontalAlignment="Stretch" Click="PasteClick"/>  
13.         </StackPanel>  
14.     </Grid>  

Press F5 to run the our project and screen could be like below:

Step 3: 
1. How to copy text from TextBox?

In generally to select text, we need to double tap on textbox text, In TextBox,we have property like SelectedText can used to get content of the current selection in the text box. So I taken one global string variable name is ClipboardText for storing selected text of TextBox

1.        private string ClipboardText;  
2.         private async void CopyClick(object sender, RoutedEventArgs e)  
3.         {  
4.             if (TbxEnteredText .SelectedText != "" && ClipboardText != "")  
5.             {  
6.                 //Copy selected text to CustomClipboard  
7.                 this.ClipboardText = TbxEnteredText .SelectedText;  
8.             }  
9.             else  
10.             {  
11.                 MessageDialog messageDialog = new MessageDialog("Please select text for copy operation");  
12.                 await messageDialog.ShowAsync();  
13.             }  
14.         }  

2. How to cut text from TextBox?

When user can select the text by double tap on it and press the cut operation button, we need to remove the selected text from the textbox.
It means we need to replace the TextBox original text with the text before and after the selection like below:

1. private async void CutClick(object sender, RoutedEventArgs e)  
2.         {  
3.             if (TbxEnteredText .SelectedText != "" && ClipboardText != "")  
4.             {  
5.                 //Copy selected text to CustomClipboard  
6.                 this.ClipboardText = TbxEnteredText .SelectedText;  
7.   
8.                 var removeAt = TbxEnteredText .SelectionStart;  
9.   
10.                 var AfterSelectionLocText = TbxEnteredText .Text.Substring(removeAt + TbxEnteredText .SelectionLength);  
11.   
12.                 var BeforeSelectionLocText = TbxEnteredText .Text.Substring(0, removeAt);  
13.   
14.                 TbxEnteredText .Text = BeforeSelectionLocText + AfterSelectionLocText;  
15.   
16.                 TbxEnteredText .SelectionStart = BeforeSelectionLocText.Length;  
17.             }  
18.             else  
19.             {  
20.                 MessageDialog messageDialog = new MessageDialog("Please select text for cut operation");   
21.                 await messageDialog.ShowAsync();  
22.             }  
23.         }  

In above code, I am using SelectionStart property which is useful to get character index for the beginning of the current selection.

3. How to paste text in TextBox?

Upto now, when user copy the text or cut the text from textbox, it can stored in our global string is 'ClipboardText '. So to perform paste operation, first we need to get position where user place the cursor on textbox and after that we need to place the our ClipboardText on that selection position.

1. private async void PasteClick(object sender, RoutedEventArgs e)  
2.        {  
3.            if (ClipboardText != "" && ClipboardText != null)  
4.            {  
5.                var SelectionLocation = TbxEnteredText .SelectionStart;  
6.                var BeforeSelectionLocText = TbxEnteredText .Text.Substring(0, SelectionLocation);  
7.                var AfterSelectionLocText = TbxEnteredText .Text.Substring(SelectionLocation + TbxEnteredText .SelectionLength);  
8.   
9.                TbxEnteredText .Text = BeforeSelectionLocText +  
10.                          this.ClipboardText +  
11.                          AfterSelectionLocText;  
12.   
13.                TbxEnteredText .SelectionStart = SelectionLocation + this.ClipboardText.Length;  
14.                TbxEnteredText .SelectionLength = 0;  
15.            }  
16.            else  
17.            {  
18.                MessageDialog messageDialog = new MessageDialog("No selected text for paste operation");  
19.                await messageDialog.ShowAsync();  
20.            }  
21.        }  

4. Demo:

4.1 Type some text in TextBox like below:

4.2 double tap on text which you want to copy, and press copy Button

4.3 Place cursor where you want to paste the your copied text and click on the paste button.

Important Notes:

1. In WinRT, there are more properties added for TextBox control compare to Silverlight platfrom (Ex: Header, PlaceholderText..etc)

2. Just reminder is, this sample can also run for windowsphone silverligh platform. Because this  sample used very basic coding to perform copy,cut & paste operation within the app.

3. This sample will be work on windows phone 8.1 OS devices or later. and this sample was tested in Emulator,Nokia Lumia 530, Nokia Lumia 735& Microsoft 535.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Advertisemen