Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / ListBox / ListBox Quick Start
In This Topic
    ListBox Quick Start
    In This Topic

    The following quick start guide is intended to get you up and running with the C1ListBox control. In this quick start you'll start in Visual Studio and create a new project, add C1ListBox to your application, and customize the appearance and behavior of the control.

    In this step, you'll create a WPF or Silverlight application in Visual Studio using ListBox for WPF and Silverlight.

    Complete the following steps:

    1. In Visual Studio, select File | New Project.
    2. In the New Project dialog box, select either Windows Desktop or Silverlight from the Templates in the left-hand pane.
      New Project Dialog Box

      New Project Dialog Box

    3. Select WPF Application or Silverlight Application, depending on the template you chose. 
    4. Enter a Name for your project, for example "QuickStart", and click OK. In a WPF Application, the MainWindow.xaml file will open.
      1. If you selected a Silverlight Application, when you click OK, the New Silverlight Application dialog box will appear.
      2. Click OK to accept default settings. This will close the New Silverlight Application dialog box and create your project.
      3. The MainPage.xaml file should open.
    5. Add the following assemblies to your application by right-clicking the References folder and selecting Add Reference:
      • WPF: C1.WPF.4.dll
      • Silverlight: C1.Silverlight.5.dll
    6. Add the following <StackPanel> markup between the <Grid> and </Grid> tags to add a StackPanel containing a TextBlock and ProgressBar:
      XAML
      Copy Code 
      <StackPanel x:Name="loading" VerticalAlignment="Center">
    <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Width="200"  Height="4"/>
</StackPanel>
    7. Navigate to the Toolbox and double-click the C1ListBox icon to add the control to the grid. This will add the reference and XAML namespace automatically.
    8. Edit the  <c1:C1ListBox> tag to customize the control:
      XAML
      Copy Code 
      <c1:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" Zoom="Fill" ViewportGap="0" RefreshWhileScrolling="False"></c1:C1ListBox>
      This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.
    9. Add the following markup between the <c1:C1ListBox> and </c1:C1ListBox> tags:
      XAML
      Copy Code 
      <c1:C1ListBox.PreviewItemTemplate>
    <DataTemplate>
        <Grid Background="Gray">
            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
        </Grid>
    </DataTemplate>
</c1:C1ListBox.PreviewItemTemplate>
<c1: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>
</c1:C1ListBox.ItemTemplate>
      This markup adds data templates for the C1ListBox control's content. Note that you'll complete binding the control in code.

    In this step, you will add code to display images from a photo stream.

    Complete the following steps to add data to the control:

    1. Select the Page, navigate to the Properties window, click the lightning bolt Events button to view events, and scroll down and double-click the area next to the Loaded event.

      This will open the Code Editor and add the Page_Loaded event.

    1. Add the following imports or using statements to the top of the page:
    Visual Basic
    Copy Code 
    'WPF
Imports System.Linq
Imports System.Windows.Controls
Imports System.Windows
Imports System.Collections.Generic
Imports System.Net
Imports System.Xml.Linq
Imports System
Imports C1.WPF
OR
'Silverlight
Imports C1.Silverlight
Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Xml.Linq
Imports System.Net
Imports System.Collections.ObjectModel

    C#
    Copy Code 
    //WPF
using System.Linq;
using System.Windows.Controls;
using System.Windows;
using System.Collections.Generic;
using System.Net;
using System.Xml.Linq;
using System;
using C1.WPF;
OR
//Silverlight
using C1.Silverlight;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using System.Collections.ObjectMode;
    1. Add the following code inside the initial event handler:
    Visual Basic
    Copy Code 
    DataContext = Enumerable.Range(0, 100)
AddHandler Loaded, AddressOf ListBoxSample_Loaded

    C#
    Copy Code 
    DataContext = Enumerable.Range(0, 100);
Loaded += new System.Windows.RoutedEventHandler(ListBoxSample_Loaded);
    1. Add the following code below within the MainPage or MainWindow class:
    Visual Basic
    Copy Code 
    Private Sub ListBoxSample_Loaded(sender As Object, e As RoutedEventArgs)
 LoadPhotos()
End Sub
Private Sub LoadPhotos()
 Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
 Dim AtomNS = "http://www.w3.org/2005/Atom"
 loading.Visibility = Visibility.Visible
 retry.Visibility = Visibility.Collapsed
 Dim photos = New List(Of Photo)()
 Dim client = New WebClient()
 AddHandler client.OpenReadCompleted, Function(s, e)
  Try
    '#Region "** parse flickr data"
    Dim doc = XDocument.Load(e.Result)
    For Each entry In doc.Descendants(XName.[Get]("entry", AtomNS))
        Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value
        Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
        Dim contentUri = enclosure.Attribute("href").Value
        photos.Add(New Photo() With { _
         .Title = title, _
         .Content = contentUri, _
         .Thumbnail = contentUri.Replace("_b", "_m") _
        })
      Next
    '#End Region
    listBox.ItemsSource = photos
    loading.Visibility = Visibility.Collapsed
    listBox.Visibility = Visibility.Visible
    retry.Visibility = Visibility.Collapsed
   Catch
   MessageBox.Show("There was an error when attempting to download data from Flickr.")
   listBox.Visibility = Visibility.Collapsed
   loading.Visibility = Visibility.Collapsed
   retry.Visibility = Visibility.Visible
  End Try
End Function
   client.OpenReadAsync(New Uri(flickrUrl))
End Sub
Private Sub Retry_Click(sender As Object, e As RoutedEventArgs)
 LoadPhotos()
End Sub
#Region "** public properties"
Public Property Orientation() As Orientation
 Get
  Return listBox.Orientation
 End Get
 Set(value As Orientation)
  listBox.Orientation = value
 End Set
End Property
Public Property ItemWidth() As Double
 Get
  Return listBox.ItemWidth
 End Get
 Set(value As Double)
  listBox.ItemWidth = value
 End Set
End Property
Public Property ItemHeight() As Double
 Get
  Return listBox.ItemHeight
 End Get
 Set(value As Double)
  listBox.ItemHeight = value
 End Set
End Property
Public Property ZoomMode() As ZoomMode
 Get
  Return listBox.ZoomMode
 End Get
 Set(value As ZoomMode)
  listBox.ZoomMode = value
 End Set
End Property
#End Region

    C#
    Copy Code 
     void ListBoxSample_Loaded(object sender, RoutedEventArgs e)
 {
     LoadPhotos();
 }
 private void LoadPhotos()
 {
     var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
     var AtomNS = "http://www.w3.org/2005/Atom";
     loading.Visibility = Visibility.Visible;
     listBox.Visibility = Visibility.Collapsed;
     retry.Visibility = Visibility.Collapsed;
     var photos = new List<Photo>();
     var client = new WebClient();
     client.OpenReadCompleted += (s, e) =>
     {
         try
         {
             #region ** parse flickr data
             var doc = XDocument.Load(new XmlTextReader(e.Result));
             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.Visibility = Visibility.Visible;
             retry.Visibility = Visibility.Collapsed;
         }
         catch
         {
             MessageBox.Show("There was an error when attempting to download data from Flickr.");
             listBox.Visibility = Visibility.Collapsed;
             loading.Visibility = Visibility.Collapsed;
             retry.Visibility = Visibility.Visible;
         }
     };
     client.OpenReadAsync(new Uri(flickrUrl));
 }
 private void Retry_Click(object sender, RoutedEventArgs e)
 {
     LoadPhotos();
 }
 #region ** public properties
 public Orientation Orientation
 {
     get
     {
         return listBox.Orientation;
     }
     set
     {
         listBox.Orientation = value;
     }
 }
 public double ItemWidth
 {
     get
     {
         return listBox.ItemWidth;
     }
     set
     {
         listBox.ItemWidth = value;
     }
 }
 public double ItemHeight
 {
     get
     {
         return listBox.ItemHeight;
     }
     set
     {
         listBox.ItemHeight = value;
     }
 }
 public ZoomMode ZoomMode
 {
     get
     {
         return listBox.ZoomMode;
     }
     set
     {
         listBox.ZoomMode = value;
     }
 }
 public C1SelectionMode SelectionMode
 {
     get
     {
         return listBox.SelectionMode;
     }
     set
     {
         listBox.SelectionMode = value;
     }
 }
 public ScrollBarVisibility HorizontalScrollBarVisibility
 {
     get
     {
         return listBox.HorizontalScrollBarVisibility;
     }
     set
     {
         listBox.HorizontalScrollBarVisibility = value;
     }
 }
 public ScrollBarVisibility VerticalScrollBarVisibility
 {
     get
     {
         return listBox.VerticalScrollBarVisibility;
     }
     set
     {
         listBox.VerticalScrollBarVisibility = value;
     }
 }
 public Brush DEMO_Background
 {
     get
     {
         return listBox.Background;
     }
     set
     {
         listBox.Background = value;
     }
 }
 public Brush DEMO_Foreground
 {
     get
     {
         return listBox.Foreground;
     }
     set
     {
         listBox.Foreground = value;
     }
 }
 public Brush DEMO_BorderBrush
 {
     get
     {
         return listBox.BorderBrush;
     }
     set
     {
         listBox.BorderBrush = value;
     }
 }
 public Brush SelectedBackground
 {
     get
     {
         return listBox.SelectedBackground;
     }
     set
     {
         listBox.SelectedBackground = value;
     }
 }
 public Brush ButtonBackground
 {
     get
     {
         return listBox.ButtonBackground;
     }
     set
     {
         listBox.ButtonBackground = value;
     }
 }
 public Brush ButtonForeground
 {
     get
     {
         return listBox.ButtonForeground;
     }
     set
     {
         listBox.ButtonForeground = value;
     }
 }
 public Brush MouseOverBrush
 {
     get
     {
         return listBox.MouseOverBrush;
     }
     set
     {
         listBox.MouseOverBrush = value;
     }
 }
 public Brush PressedBrush
 {
     get
     {
         return listBox.PressedBrush;
     }
     set
     {
         listBox.PressedBrush = value;
     }
 }
 public Thickness DEMO_BorderThickness
 {
     get
     {
         return listBox.BorderThickness;
     }
     set
     {
         listBox.BorderThickness = value;
     }
 }
 public CornerRadius CornerRadius
 {
     get
     {
         return listBox.CornerRadius;
     }
     set
     {
         listBox.CornerRadius = value;
     }
 }
 #endregion
    1. The code above pulls images from Flickr's public photo stream and binds the C1ListBox to the list of images.
    1. Add the following code just below the MainPage class:
    Visual Basic
    Copy Code 
    Public Class Photo
    Public Property Title() As String
        Get
            Return m_Title
        End Get
        Set(value As String)
            m_Title = Value
        End Set
    End Property
    Private m_Title As String
    Public Property Thumbnail() As String
        Get
            Return m_Thumbnail
        End Get
        Set(value As String)
            m_Thumbnail = Value
        End Set
    End Property
    Private m_Thumbnail As String
    Public Property Content() As String
        Get
            Return m_Content
        End Get
        Set(value As String)
            m_Content = Value
        End Set
    End Property
    Private m_Content As String
End Class

    C#
    Copy Code 
    public class Photo
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Content { get; set; }
    }

    You have successfully added data to a C1TileListBox. In Step 3, you'll examine the ListBox for WPF and Silverlight features.

    Now that you've created a WPF or Silverlight 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 WPF and Silverlight'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.
    2. The application will appear, displaying an image.
    3. Use the scroll bar on the right of the control, to scroll through the image stream.

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

    Congratulations!

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