Clipboard in Windows Store App

Introduction

In this section we will discuss the clipboard; how to copy and paste various text formats, HTML, URLs and rich text. Text formats are encapsulated in a data package. To put things into the clipboard, set the data package. Data packages are also used to share or send content between applications.

By using bitmaps we can select any file to copy and paste to the clipboard. The data package can also hold a bitmap. Select an image using the picker, copy it to the clipboard and then paste it back to the application. The DataPackage can also hold files. Select files using the picker, copy it to the clipboard, and then paste the files. This will copy the files into this app's local state folder.

Step 1 : First of all you will create a new Metro Style Application; let us see the description with images of how you will create it.

Open Visual Studio 2011
File -> New -> Project
Choose Template -> JavaScript-> Windows Metro Style -> Application
Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with, default.js and default.html.

Step 3 : Open the default.html page and add the following code. The code will look as shown below.

Code :

<!DOCTYPE html>

<html>

<head>

<title>Clipboard</title>

</head>

</div>

Clipboard</h1>

Input</h2>

Select Option</h3>

<option value="2" style="color:#001cff">2. Using bitmaps</option>

<option value="3" style="color:#300202">3. Using storage items</option>

</select>

</div>

Details</h3>

<p>

Use Clipboard to copy and paste different text formats, including unicode, HTML,

URIs, and rich text. Text formats are encapsulated in a DataPackage. To put things

into clipboard, set the DataPackage. To get things out of the clipboard, get the

DataPackage. You can also register to know when the contents of the clipboard have

changed.

<br />

DataPackages are also used to share or send content between applications.

</p>

Enter text

</div>

Enter HTML

</div>

Enter a URI

</div>

Enter rich text

</div>

<br />

Copy</button>

Cut</button>

Cancel</button>

<br />

Paste</button>

</div>

<p>

The DataPackage can also hold a bitmap. Select image using the picker, copy it to

the clipboard, and then paste it back into the application.</p>

Select and copy</button>

Paste</button>

</div>

<p>

The DataPackage can also hold files. Select files using the picker, copy it to the

clipboard, and then paste the files. This will copy the files into this app's local

state folder.</p>

Select and copy</button>

Paste</button>

</div>

<p>

Using clipboard means you can get whatever is currently in it, including content

set by a different app. In this Section, go to different apps installed on your

system, then switch back to this app and click Paste. The clipboard will be inspected

and display everything currently in it.</p>

Paste</button>

</div>

Output</h2>

</div>

</div>

</div>

</div>

</div>

</p>

<img class="imageHolder" id="Section2ImageHolder" alt="image holder" src="images/placeholder-sdk.png"

style="visibility: hidden" />

</div>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

Bitmap:

</div>

</div>

</div>

</body>

</html>

Step 4 : After applying this code, run this application and then we get the following output:

Copy and paste onto clipboard as shown below.

In the second point, using the bitmap we have selected and copied an image; after that paste onto the clipboard.

0utput2.0.jpg e

Select an image and click on the open button.

output2.1.jpg

The selected image is shown onto the clipboard as output.

output2.2.jpg

In the third point, by using the storage item we can select and copy these items.

Here we can choose an item from the given list.

After selecting and copying an item, paste it here and then give an output.

output3.1.jpg