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

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

Complete the following steps:

1.   In Visual Studio, select File | New | Project to open the New Project dialog box.

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

3.   Click OK to close the New Windows Phone Application dialog box and create your project.

4.   Right-click the project in the Solution Explorer and select Add Reference.

5.   In the Add Reference dialog box, locate and select the C1.Phone.dll assembly and select OK.

6.   Add the XAML namespace to the <phone:PhoneApplicationPage> tag by adding xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" so it appears similar to the following:

<phone:PhoneApplicationPage x:Class="C1WP.MainPage"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

7.   Edit the TitlePanel content to change the text in the TextBlock controls. It will appear similar to the following:

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

    <TextBlock x:Name="ApplicationTitle" Text="ComponentOne Studio for Windows Phone" Style="{StaticResource PhoneTextNormalStyle}"/>

    <TextBlock x:Name="PageTitle" Text="ListBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

8.   In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.

9.   Add the following 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" 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.

10.  Add the following markup to add the C1ListBox control and 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.

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

12.  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 Windows Phone 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.