Script 13: ListBox in Studio for WinRT XAML

ListBox

Get two high performance controls for displaying lists of bound data with ComponentOne ListBox™ for WinRT XAML. Display lists with tile layouts or with optical zoom using the C1ListBox and C1TileListBox controls. These controls support UI virtualization so they are blazing-fast while able to display thousands of items with little-to-no loss of performance.

Features

• Horizontal or Vertical Orientation

The ComponentOne ListBox controls support both horizontal and vertical orientation, allowing for more layout scenarios.

• Display Items as Tiles

The C1TileListBox can arrange its items in both rows and columns creating tile displays. Specify the size and template of each item and select the desired orientation.

• Optical Zoom

The C1ListBox control supports optical zoom functionality so users can manipulate the size of the items intuitively through pinch gestures. The zooming transformation is smooth and fluid so the performance of your application is not sacrificed.

• UI Virtualization

The ComponentOne ListBox controls support UI virtualization so they are blazing-fast while able to display thousands of items with virtually no loss of performance. You can determine how many items are rendered in each layout pass by setting the ViewportGap and ViewportPreviewGap properties. These properties can be adjusted depending on the scenario.

• Preview State

In order to have the highest performance imaginable, the ListBox controls can render items outside the viewport in a preview state. Like the standard ItemTemplate, the Preview template defines the appearance of items when they are in a preview state, such as zoomed out or during fast scroll. The controls will then switch to the full item template when the items have stopped scrolling or zooming.

Getting Started with ListBox

Step 1 of 3: Creating an Application with a C1ListBox Control

In this step, you'll create a WinRT XAML application in Visual Studio using ListBox for WinRT XAML.

Complete the following steps:

1. In Visual Studio 2012 Select File | New | Project.

2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

3. Open MainPage.xaml if it isn't already open, place the cursor between the and tags.

4. Add the following markup between the and tags to add a StackPanel containing a TextBlock and ProgressBar:

The TextBlock and ProgressBar will indicate that the C1ListBox is loading.

5. Navigate to the Toolbox and double-click the C1ListBox icon to add the control to the grid below the tag. This will add the reference and XAML namespace automatically.

<Xaml:C1ListBox Height="100"/>

6. Edit the Xaml:C1ListBox tag to customize the control:

   <Xaml:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False">

       </Xaml:C1ListBox>
   

This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.

7. Add the following markup between the Xaml:C1ListBox and </Xaml:C1ListBox> tags:

   Xaml:C1ListBox.ItemTemplate

              <DataTemplate>
                  <Grid>
                      <Image Source="{Binding Content}" Stretch="UniformToFill"/>
                      <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
                  </Grid>
              </DataTemplate>
          </Xaml:C1ListBox.ItemTemplate>
   

8. This markup adds data templates for the C1ListBox control's content. Note that you'll complete binding the control in code.

   What You've Accomplished

You've successfully created a WinRT style application containing a C1ListBox control.

Step 2 of 3: Adding Data to the ListBox

In the last step, you added the C1ListBox control to the application. In this step, you will add code to display images from a photo stream.

Complete the following steps to add data to the control programmatically:

1. Open the Code Editor

2. Add the following imports statements to the top of the page:

using C1.Xaml; using System.Net; using System.Xml.Linq; using Windows.Data.Html; using Windows.UI.Popups;

1. Add the following code inside the MainPage_Loaded event handler:

   public MainPage()

    { this.InitializeComponent();
        Loaded += MainPage_Loaded;
    } void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        LoadPhotos();
    }
   

2. Add the following code below the MainPage_Loaded event within the MainPage class:

   private async void LoadPhotos() { var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"; var AtomNS = "http://www.w3.org/2005/Atom"; var photos = new List(); var client = WebRequest.CreateHttp(new Uri(flickrUrl)); var response = await client.GetResponseAsync(); try { #region ** parse data var doc = XDocument.Load(response.GetResponseStream()); foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))

          { var title = entry.Element(XName.Get("title", AtomNS)).Value; var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault(); var contentUri = enclosure.Attribute("href").Value;
              photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b", "_m") });
          } #endregion listBox.ItemsSource = photos;
          loading.Visibility = Visibility.Collapsed;
          listBox.Zoom = C1ZoomUnit.Fill;
          listBox.Visibility = Visibility.Visible;
      } catch { var dialog = new MessageDialog("There was an error when attempting to download data from Flickr.");
          dialog.ShowAsync();
      }
   

   }

3. The code above pulls images from Flickr's public photo stream and binds the C1ListBox to the list of images.

4. Add the following code just below the MainPage class:

   public class Photo { public string Title { get; set; } public string Thumbnail { get; set; } public string Content { get; set; } }

What You've Accomplished

You have successfully added data to C1TileListBox. In the next step, Step 3 of 3: Running the ListBox Application, you'll examine the ListBox for WinRT XAML features.

Step 3 of 3: Running the ListBox Application

Now that you've created a WinRT style application and customized the application's appearance and behavior, the only thing left to do is run your application. To run your application and observe ListBox for WinRT XAML's run-time behavior, complete the following steps:

1. From the Debug menu, select Start Debugging to view how your application will appear at run time.

The application will appear, displaying an image.

2. Use the scroll bar on the right of the control, to scroll through the image stream. Or, if using a mouse hold the ctrl key while using the mouse wheel to zoom in and out.

3. If you have touch capabilities, try pinching to zoom an image.

What You've Accomplished

Congratulations! You've completed the ListBox for WinRT XAML quick start and created an application using the C1ListBox control and viewed some of the run-time capabilities of your application.

See this example in our documentation for both VB and C#

Next: Blog Series (Part 14) Zip: Windows 8 Studio for WinRT XAML