Step 1 of 3: Creating a WPF Application

In this step you'll begin in Visual Studio to create a WPF application which will use ComponentOne FilePicker for WPF to select image files on your computer to view. You'll create a new WPF project and controls to your application.

To set up and add controls to your application, 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, for example "QuickStart", and click OK. The project will be created and the MainWindow.xaml file should open.

3.   In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

4.   Add the following XAML markup between the <Grid> and </Grid> tags in the MainWindow.xaml file:

<Grid.RowDefinitions>

    <RowDefinition Height="Auto" />

    <RowDefinition />

    <RowDefinition Height="Auto" />

</Grid.RowDefinitions>

This markup creates row definitions in the grid to keep controls in separate areas.

5.   Navigate to the Toolbox and double-click the C1FilePicker icon to add the control to your application.

6.   Edit the C1FilePicker tag so it appears similar to the following:

<c1:C1FilePicker x:Name="C1FilePicker1" Grid.Row="0" Margin="15" Height="30" SelectedFilesChanged="C1FilePicker_SelectedFilesChanged" />

The markup above gives the control a name, specifies the grid row the control appears in, sets the height of the control and the margin around the control, and indicates an event handler for the SelectedFilesChanged event. You'll add the event handler code in a later step.

7.   Add the following XAML markup beneath the <c1:C1FilePicker> tag and before the </Grid> tag in the MainPage.xaml file:

<ScrollViewer Grid.Row="1" Margin="15,0,15,0">

    <ListBox x:Name="ListBox" />

</ScrollViewer>

<StackPanel Grid.Row="2" Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center">

    <Button Content="Clear File Selection" Height="30" Margin="0,15,15,15" Name="button1" Width="150" Grid.Row="2" Click="button1_Click" />

    <Button Content="Clear List Items" Height="30" Margin="15,15,0,15" Name="button2" Width="150" Grid.Row="2" Click="button2_Click" />

</StackPanel>

This markup will add a ListBox control which will allow you to view local images you select using the C1FilePicker control. The markup also adds two buttons which will let you clear the content of the C1FilePicker control and the content of the ListBox.

 What You've Accomplished

You've successfully created and set up a WPF application and added controls to the page. In the next step you'll add code to add functionality to your application.