List Animation in Windows Store App

Introduction

In this section we will learn about list animation in Windows 8. Add or delete an item in a list and searching - add or delete items in a list. In this example use the createAddToListAnimation and createDeleteFromListAnimation functions and all their parameters. These animations are used to add an item to or delete an item from a one-dimensional list. Use the buttons below to either add or delete an item at the top of the list. These animations are used to very quickly add or delete items in a one-dimensional list. This is most commonly used with search results.

So, we use the following steps to make this application.

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.html and js file.

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

Code : default.html page.

<!DOCTYPE html>

<html>

<head>

<title>List Animations</title>

</head>

<h1 id="featureLabel">List Animations</h1>

<h2 id="inputLabel">Input</h2>

<h3 id="listLabel">Select Items</h3>

<option selected="selected" value="1" style="color:#f00">1. Add or delete an item in a list</option>

<option value="2" style="color:#ff6a00">2. Searching - add or delete items in a list</option>

</select>

</div>

<h3 id="descLabel">Description</h3>

<p>Use the createAddToListAnimation and createDeleteFromListAnimation functions and all their parameters. These

animations are used to add an item to or delete an item from a one-dimensional list.</p>

<p>Use the buttons below to either add or delete an item at the top of the list.</p>

<button class="action" id="Item1Delete">Delete an item</button>

</div>

<p>Use the createAddToSearchListAnimation and createDeleteFromSearchListAnimation functions and all their

parameters. These animations are used to very quickly add or delete items in a

one-dimensional list. This is most commonly used with search results.</p>

<p>Use the button below to either add a series of items to the list or delete all items from the list.</p>

<button id="Item2Add">Add items</button>

<button id="Item2Delete">Delete items</button><br /><br />

</div>

<h2 id="outputLabel">Output</h2>

<p>Click on a button to add an item to or delete an item from the list.</p>

</div>

<p>Click on the button.</p>

</div>

</body>

</html>

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

On Button click add an item from the list.

output1.1.gif

Click on button and delete an item from the list.

output1.2.gif

Add or delete items in a list.

Delete an items from list.

output2.1.gif