Show data in a Project Siena gallery

In Project Siena, you can show large, structured data sets more easily by creating a gallery rather than by adding controls one at a time. For example, you might have a set of dozens or hundreds of records that include text, images, or both. Instead of adding a label, typing some text in it, adding an image control, binding it to a picture, and repeating those steps for each record, you can save time by importing that data, binding it to a gallery, and configuring a template that automatically shows the data in each record. When your data is in a gallery, you can then sort, filter, remove, and save that data.

For an overview of Project Siena and links to resources such as sample apps, video tutorials, and forums, see Project Siena.

Prerequisites

• Project Siena, which you can get for free from the Windows Store

  You can find system requirements and other information in the release notes.

• Familiarity with basic operations in Project Siena, as Create your first app with Project Siena describes.

Show images in a gallery

1. Copy one or more image files to the C:\Users\Public\Public Pictures folder.

2. If you're running Windows 8.1, right-click the Public Pictures folder, point to Include in library, and then click Pictures.

3. Open Project Siena, press Alt-F, click App Data, and then click Insert Pictures.

4. Browse to the images that you want to use, click Select all, and then click Open.

   A horizontal image gallery with captions appears, showing the images that you specified and the file name under each image.

5. (optional) Click the caption for the first item in the gallery and then press Delete to delete all captions.

   

Show text in a gallery

1. Open Project Siena, and import text from a source such as an RSS feed.

   For example, you can import the RSS feed for the Project Siena blog, which is this URL:

   http://blogs.technet.com/b/projectsiena/rss.aspx

2. Press Alt-V, scroll down until Galleries appears, click it, and then click the horizontal Text Gallery.

   

3. In the Items dialog box, click the name of the data source that you imported (for example, rss_1).

   Each item in the gallery contains a heading, a subtitle, and a body by default, but you'll need to specify what kind of text to show in each label.

4. With the Items dialog box still open, click the Pick column to display icon in the upper-right corner of the dialog box.

5. In the dialog box that appears, click Body1!Text, click description, and then click the Back button.

6. Click Heading1!Text, click title, and then click the Back button.

7. Click Subtitle1!Text, click pubDate, and then click outside the dialog box to close it.

8. (optional) If the descriptions contain raw HTML or XML code, click the description in the first item of the gallery, and set its Text property (in the Data category) to this function:

   PlainText(ThisItem!description)

9. (optional) If the text from your data source doesn't fit in one or more of the default labels, resize one or more labels in the first item of the gallery.

   The corresponding labels in all subsequent items will reflect your changes.

   

10. (optional) Change the size of the template for each item by following these steps:

    1. Click the Design icon (if it appears), and then click Template.

    2. In the dialog box that appears, click Template Size (middle icon on the left), and then drag the slider or type a value in the box.

11. (optional) Widen the entire gallery to show more items.

Show images and text in a gallery

1. Import a data source or create a collection that includes both images and text.

   You can use whatever data you have, but this procedure uses data in this structure:

   Names	Locations	Links
   Name1	Location1	Link1
   Name2	Location2	Link2
   Name3	Location3	Link3

   In each row, specify any word or phrase for the name and the location, and specify a path to any image file in your Public Pictures folder (for example, C:\Users\Public\Public Pictures\FileName.jpg) for each link.

2. Copy the image files you want to use, and paste them in your C:\Users\Public\Public Pictures folder.

3. If you're running Windows 8.1, right-click the Public Pictures folder, point to Include in library, and then click Pictures.

4. Press Alt-V, scroll down until Galleries appears, click it, and then click the horizontal Image with Text gallery.

5. In the Items dialog box, click the name of your data source or collection.

   

Show data in a custom gallery

1. Import a data source or create a collection that includes images, text, or both.

   You can use whatever data you have, but this procedure uses data in this structure:

   Products	Prices	Customers	OrderDates	OrderQuantities	Links
   Product1	Price1	Customer1	OrderDate1	OrderQuantity1	Link1
   Product2	Price2	Customer2	OrderDate2	OrderQuantity2	Link2
   Product3	Price3	Customer3	OrderDate3	OrderQuantity3	Link3

   In each row, specify any word or phrase for the product and customer name, any positive integer for the price and the order quantity, and any date for the order date. If you want to use images, specify a path to any image file in your Public Pictures folder (for example, C:\Users\Public\Public Pictures\FileName.jpg) for each link.

2. If you want to use images, follow these steps:

   1. Copy the image files to your C:\Users\Public\Public Pictures folder.

   2. If you're running Windows 8.1, right-click the Public Pictures folder, point to Include in library, and then click Pictures.

3. Press Alt-V, scroll down until Galleries appears, click it, and then click the vertical Custom Gallery.

   

4. In the Items dialog box, click the name of your data source or collection, and then click Add a visual in the first item of the gallery.

5. If you want to use images, click the Image control in the list that appears, and drag it to the upper-left corner of the gallery.

6. For each column in your data, add a label to the first item of the gallery, and arrange the labels to form a row, widening the gallery if necessary.

7. To change the data that appears in a label, click it, click the Data icon if it appears in the lower-left corner, click Text, and then click the column that you want the label to show.

8. (optional) Format currency and dates by using the Text function.

9. Click the Design icon if it appears, click Template, and then click Template Size.

   

10. Drag the slider to the left until the template is the same height as your data, or type smaller values in the box until the gallery is the size you want.

11. (optional) Add labels along the top of the gallery to identify each column.