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

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

Complete the following steps:

1.   In Visual Studio, select File | New | Project.

2.   In the New Project dialog box, select a language in the left pane, and in the templates list select WPF Application. Enter a Name for your project and click OK. The New WPF Application dialog box will appear.

3.   Click OK to accept default settings, close the New WPF Application dialog box, and create your project. The MainPage.xaml file should open.

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

<StackPanel x:Name="loading" VerticalAlignment="Center">

    <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>

    <ProgressBar IsIndeterminate="True" Width="200"  Height="4"/>

</StackPanel>

<Button x:Name="retry" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Retry" Visibility="Collapsed" Click="Retry_Click"/>

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. This will add the reference and XAML namespace automatically.

6.   Edit the  <c1:C1ListBox> tag to customize the control:

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

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

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

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 WPF application containing a C1ListBox control. In the next step, Step 2 of 3: Adding Data to the ListBox, you will add the data for C1ListBox.