Post
Ask Question

Image Copy And Paste Using Clipboard In UWP

Image Copy and paste is the classic way to exchange copied images between apps, or within an app, and almost all the apps can support clipboard operations to some degree.

Reading this article, you can learn how to perform Copy and paste Images using clipboard in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

  1. Windows 10 (Recommended)
  2. Microsoft Visual Studio 2017

 

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the Suitable Name for your App (UWPImgCopyPaste)->OK.

 

After Choosing the Target and minimum platform version for your Windows Universal Application will support and the Project creates App.xaml and MainPage.xaml.

 

Step 2

Add the following controls in design window for performing Image copy and paste activity,

Add the TextBox, TextBlock, Image and Button Controls and change the Name and Text Property

 

Step 3

Now add the following namespaces and code in the Mainpage.xaml.cs

  1. using Windows.ApplicationModel.DataTransfer;  
  2. using Windows.Storage.Pickers;  
  3. using Windows.Storage.Streams;  
  4. using Windows.UI.Xaml.Media.Imaging;  
  5. private async void BtnSelect_Click(object sender, RoutedEventArgs e) {  
  6.     var imagePicker = new FileOpenPicker {  
  7.         ViewMode = PickerViewMode.Thumbnail,  
  8.             SuggestedStartLocation = PickerLocationId.PicturesLibrary,  
  9.             FileTypeFilter = {  
  10.                 ".jpg",  
  11.                 ".png",  
  12.                 ".bmp",  
  13.                 ".gif",  
  14.                 ".tif"  
  15.             }  
  16.     };  
  17.     var imageFile = await imagePicker.PickSingleFileAsync();  
  18.     if (imageFile != null) {  
  19.         var dataPackage = new DataPackage();  
  20.         dataPackage.SetBitmap(RandomAccessStreamReference.CreateFromFile(imageFile));  
  21.         tblStatus.Text = "Status : Image has been copied";  
  22.         Windows.ApplicationModel.DataTransfer.Clipboard.SetContent(dataPackage);  
  23.     } else {  
  24.         tblStatus.Text = "No image was selected.";  
  25.     }  
  26. }  
  27. private async void BtnPaste_Click(object sender, RoutedEventArgs e) {  
  28.     var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();  
  29.     if (dataPackageView.Contains(StandardDataFormats.Bitmap)) {  
  30.         IRandomAccessStreamReference imageReceived = null;  
  31.         imageReceived = await dataPackageView.GetBitmapAsync();  
  32.         if (imageReceived != null) {  
  33.             using(var imageStream = await imageReceived.OpenReadAsync()) {  
  34.                 var bitmapImage = new BitmapImage();  
  35.                 bitmapImage.SetSource(imageStream);  
  36.                 ImgPaste.Source = bitmapImage;  
  37.                 tblStatus.Text = "Status : Image is retrieved from the clipboard and pasted successfully.";  
  38.             }  
  39.         }  
  40.     } else {  
  41.         tblStatus.Text = "Status : Bitmap format is not available in clipboard";  
  42.     }  
  43. }  

Note

Automatically the following code will be generated in XAML code view, while we are done in the design view.

  1. <Page x:Class="UWPImgCopyPaste.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPImgCopyPaste" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="86,105,0,0" Text="Image Copy and Paste using Clipboard in UWP" TextWrapping="Wrap" VerticalAlignment="Top" Height="37" Width="399" FontWeight="Bold" FontSize="18" />  
  4.         <TextBlock x:Name="tblStatus" HorizontalAlignment="Left" Margin="277,158,0,0" Text="Status : " TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" RenderTransformOrigin="0.452,1.425" Height="87" Width="182" />  
  5.         <Button x:Name="BtnSelect" Content="Select the Image to copy" HorizontalAlignment="Left" Margin="59,191,0,0" VerticalAlignment="Top" Click="BtnSelect_Click" />  
  6.         <Image x:Name="ImgPaste" HorizontalAlignment="Left" Height="201" Margin="207,263,0,0" VerticalAlignment="Top" Width="273" />  
  7.         <Button x:Name="BtnPaste" Content="Paste" HorizontalAlignment="Left" Margin="91,323,0,0" VerticalAlignment="Top" Click="BtnPaste_Click" /> </Grid>  
  8. </Page>  

Step 7

Deploy your App in Local Machine, and the output of the UWPTxtCopyPasteApp is,

 

Click the Select the Image to Copy Button,
 

After selecting the Image,
 
After Clicking the Paste Button,

 
Summary

Now you are successfully copying and pasting the Image using clipboard in Visual C# and UWP environment using Visual Studio 2017.


Similar Articles