Tuesday 15 May 2018

Copy and Paste using Clipboard in Xamarin.Forms

Introduction

Copy and paste is used to sharing data between apps, or within an app, and almost all the platforms supporting clipboard operations. So, in this article we can achieve this functionality using DependencyServices concept in Xamarin.Forms.

Requirements:
  • This article's source code is prepared by using Visual Studio. And it is better to install the latest Visual Studio updates from here.
  • This article is prepared on a MAC machine.
  • This sample project is Xamarin.Forms PCL project.
  • This sample app is targeted for Android, iOS. And, tested for Android & iOS.
Description:
Let's start
Step 1:
First, follow the below steps to create the new Xamarin.Forms project.
Open Visual Studio for Mac.
  • Click on the File menu, and select New Solution.
  • In the left pane of the dialog, let's select the type of templates to display. Multiplatform > App > Xamarin.Forms > Blank Forms App and click on Next.
  • Next Enter your app name (Ex: ClipbordDemo). At the bottom select target platforms to Android & iOS and shared code to Portable Class Library and click on Next button.
  • Then choose project location with the help of Browse button and click on create.
Now project structure will be created like below.

ClipboardDemo: It  is for shared code.
ClipboardDemo.Droid: It is for Android.
ClipboardDemo.iOS: It is for iOS.

Step 2: 

Portable Class Library(PCL):

Create an interface IClipboardService inside the Interfaces folder and having method declaration of CopyToClipboard.

IClipboardService.cs
  1. namespace ClipboardDemo.Interfaces  
  2. {  
  3.     public interface IClipboardService  
  4.     {  
  5.         void CopyToClipboard(string text);  
  6.     }  


Xamarin.Android:
Create a class ClipboardService and need to implement CopyToClipboard method like below.

ClipboardService.cs
  1. using System;  
  2. using ClipboardDemo.Interfaces;  
  3. using Xamarin.Forms;  
  4. using Android.Content;  
  5. using ClipboardDemoDroid.DepencencyServices;  
  6.   
  7. [assembly: Dependency(typeof(ClipboardService))]  
  8. namespace ClipboardDemoDroid.DepencencyServices  
  9. {  
  10.     public class ClipboardService : IClipboardService  
  11.     {  
  12.         public void CopyToClipboard(string text)  
  13.         {  
  14.             var clipboardManager = (ClipboardManager)Forms.Context.GetSystemService(Context.ClipboardService);  
  15.   
  16.             ClipData clip = ClipData.NewPlainText("Android Clipboard", text);  
  17.   
  18.             clipboardManager.PrimaryClip = clip;  
  19.         }  
  20.     }  
  21. }
  22.   

Note:
ClipData purpose is representation of a clipped data on the clipboard. ClipData is a complex type containing one or more Item instances, each of which can hold one or more representations of an item of data. For display to the user, it also has a label.

Xamarin.iOS:
In iOS also, create a class ClipboardService and need to implement CopyToClipboard method like below.

ClipboardService.cs
  1. using ClipboardDemo.Interfaces;  
  2. using Xamarin.Forms;  
  3. using ClipboardDemo.iOS.Services;  
  4.   
  5. [assembly: Dependency(typeof(ClipboardService))]  
  6. namespace ClipboardDemo.iOS.Services  
  7. {  
  8.     public class ClipboardService : IClipboardService  
  9.     {  
  10.         public void CopyToClipboard(string text)  
  11.         {  
  12.             UIKit.UIPasteboard clipboard = UIKit.UIPasteboard.General;  
  13.             clipboard.String = text;  
  14.         }  
  15.     }  
  16. }  

Note: 
UIPasteboard an object that helps a user share data from one place to another within your app, and from your app to other apps.

Portable Class Library(PCL)
Create your own Xaml page named ClipboardDemoPage.xaml

ClipboardDemoPage.xaml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.     xmlns:local="clr-namespace:ClipboardDemo"  
  5.     BackgroundColor="White"  
  6.     x:Class="ClipboardDemo.ClipboardDemoPage">  
  7.     <StackLayout Padding="40, 60,40,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">  
  8.         <Label Text="Copy and Paste" FontSize="25" FontAttributes="Bold" TextColor="#533F95" HorizontalOptions="CenterAndExpand"/>   
  9.     <StackLayout VerticalOptions="CenterAndExpand" Spacing="40">  
  10.         <Entry Placeholder="Enter text" PlaceholderColor="#533F95" TextColor="#533F95" x:Name="ClipboardCopyText" HorizontalOptions="FillAndExpand" HeightRequest="45" VerticalOptions="StartAndExpand"/>  
  11.         <Button Text="Copy To Clipboard"  BackgroundColor="#533F95" TextColor="White" HorizontalOptions="FillAndExpand" HeightRequest="45" Clicked="Btn_CopyToClipboard_Click"/>  
  12.     </StackLayout>  
  13.     </StackLayout>  
  14. </ContentPage>  

Call to DependencyService:
Now calling dependency service in the code behind under CopyToClipboard click event for coping text on clipboard.
  1. var clipboardService = DependencyService.Get<IClipboardService>();    
  2. clipboardService?.CopyToClipboard(ClipboardCopyText.Text);    
ClipboardDemoPage.xaml.cs
  1. using System;    
  2. using ClipboardDemo.Interfaces;    
  3. using Xamarin.Forms;    
  4.     
  5. namespace ClipboardDemo    
  6. {    
  7.     public partial class ClipboardDemoPage : ContentPage    
  8.     {    
  9.         public ClipboardDemoPage()    
  10.         {    
  11.             InitializeComponent();    
  12.         }    
  13.     
  14.         private void Btn_CopyToClipboard_Click(object sender,EventArgs e)    
  15.         {    
  16.             if(!string.IsNullOrEmpty(ClipboardCopyText.Text))    
  17.             {    
  18.                 var clipboardService = DependencyService.Get<IClipboardService>();    
  19.                 clipboardService?.CopyToClipboard(ClipboardCopyText.Text);    
  20.                 DisplayAlert("ClipboardDemo""Text copied!""Ok");    
  21.             }    
  22.             else    
  23.             {    
  24.                 DisplayAlert("ClipboardDemo""Please enter the text""Ok");    
  25.             }    
  26.         }    
  27.     }    
  28. }
  29.   
Note:
In above class, we are calling Clipboard service and passing user entered text in ClipboardCopyText Entry.
Output:

Source Code:

No comments:

Post a Comment