Clipboard in Windows Store App

In this article we will discuss the clipboard and data packages in a 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
openpage.gif
homepage.gif

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

solutionexplorer.gif

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>

 

    <!-- WinJS references -->

    <link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="WinJS/js/base.js"></script>

    <script type="text/javascript" src="WinJS/js/ui.js"></script>

    <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>

 

    <!-- Base references -->

    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />

    <script type="text/javascript" src="base-sdk.js"></script>

 

    <!-- Application references -->

    <link rel="stylesheet" type="text/css" href="css/program.css" />

    <script type="text/javascript" src="program.js"></script>

</head>

<body role="application" style="background-color:#ff6a00">

    <div id="rootGrid">

        <div id="header" role="contentinfo">

        </div>

        <div id="content">

            <h1 id="featureLabel">

                Clipboard</h1>

            <h2 id="inputLabel">

                Input</h2>

            <div id="input" role="main" aria-labelledby="inputLabel">

                <div class="options">

                    <h3 id="listLabel">

                        Select Option</h3>

                    <select size="3" id="Sections" aria-labelledby="listLabel" style="background-color:#ffd800">

                        <option selected="selected" value="1" style="color:#f00">1. Copy and cut text </option>

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

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

                        </select>

                </div>

                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">

                    <h3 id="descLabel">

                        Details</h3>

                    <!-- Section 1 Input -->

                    <div class="item" id="Section1Input">

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

                        <div id="text">

                            Enter text

                            <input id="Section1Text" value="regular ol' unicode" />

                        </div>

                        <div id="HTML">

                            Enter HTML

                            <input id="Section1Html" value="<b>copy me!</b>" />

                        </div>

                        <div id="URI">

                            Enter a URI

                            <input id="Section1URI" value="http://www.microsoft.com" />

                        </div>

                        <div id="RTF">

                            Enter rich text

                            <input id="Section1Rtf" value="rich text format" />

                        </div>

                        <br />

                        <button class="action" id="Section1Copy">

                            Copy</button>

                        <button class="action" id="Section1Cut">

                            Cut</button>

                        <button class="action" id="Section1Cancel">

                            Cancel</button>

                        <button id="Section1RegisterContentChanged">

                            Register</button>

                        <br />

                        <br />

                        <button class="action" id="Section1Paste">

                            Paste</button>

                    </div>

                    <!-- Section 2 Input -->

                    <div class="item" id="Section2Input">

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

                        <button id="Section2Copy" class="action">

                            Select and copy</button>

                        <button id="Section2Paste" class="action">

                            Paste</button>

                    </div>

                    <!-- Section 3 Input -->

                    <div class="item" id="Section3Input">

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

                        <button id="Section3Copy" class="action">

                            Select and copy</button>

                        <button id="Section3Paste" class="action">

                            Paste</button>

                    </div>

                    <!-- Section 4 Input -->

                    <div class="item" id="Section4Input">

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

                        <button id="Section4Paste" class="action">

                            Paste</button>

                    </div>

                </div>

            </div>

            <h2 id="outputLabel">

                Output</h2>

            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">

                <div id="statusMessage">

                </div>

                <!-- Section 1 Output -->

                <div class="item" id="Section1Output">

                    <div id="Section1TextOutput">

                    </div>

                    <div id="Section1HtmlOutput">

                    </div>

                    <div id="Section1UriOutput">

                    </div>

                    <div id="Section1RtfOutput">

                    </div>

                </div>

                <!-- Section 2 Output -->

                <div class="item" id="Section2Output">

                    <p id="Section2text">

                    </p>

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

                        style="visibility: hidden" />

                </div>

                <!-- Section 3 Output -->

                <div class="item" id="Section3Output">

                    <p id="Section3Output">

                    </p>

                </div>

                <!-- Section 4 Output -->

                <div class="item" id="Section4Output">

                    <div id="Section4RequestedOperation">

                    </div>

                    <div id="Section4TextOutput">

                    </div>

                    <div id="Section4HtmlOutput">

                    </div>

                    <div id="Section4UriOutput">

                    </div>

                    <div id="Section4RtfOutput">

                    </div>

                    <div>

                        Bitmap:

                        <img class="imageHolder" id="Section4ImageHolder" alt="image holder" src="" style="visibility: hidden" />

                    </div>

                    <div id="Section4FilesOutput">

                    </div>

                </div>

            </div>

        </div>

        <div id="footer" role="contentinfo">

        </div>

    </div>

</body>

</html>

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

output1.jpg

Copy and paste onto clipboard as shown below.

output2.jpg

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

0utput2.0.jpge

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.

output33.jpg

Here we can choose an item from the given list.

output3.jpg

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

output3.1.jpg