# ProgressBar Quick Start

## Content

The following quick start guide is intended to get you up and running with **ProgressBar for WPF and Silverlight**. In this quick start you'll start in Visual Studio and create a new project, add the **C1ProgressBar** control to your application, and observe the control at run time.

### Step 1

In this step you'll begin in Visual Studio to create a Silverlight application using ProgressBar for Silverlight. 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 **Silverlight Application**. Enter a **Name** for your project and click **OK**. The **New Silverlight Application** dialog box will appear.
3. Click **OK** to close the **New Silverlight Application** dialog box and create your project.
4. In the XAML window of the project, resize the **UserControl** by changing **Width="400"** **Height="300"** to **Width="Auto"** **Height="Auto"** in the **\<UserControl>** tag so that it appears similar to the following:

 ```xml
 <UserControl x:Class="C1RangeSlider.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
 ```

5. The **UserControl** will now resize to accommodate any content placed within it.
6. In the XAML window of the project, place the cursor between the **\<Grid>** and **\</Grid>** tags and click once.
7. Navigate to the Toolbox and double-click the **C1ProgressBar** icon to add the control to the grid. Note that the **C1.Silverlight** namespace and  **\<c1:C1ProgressBar></c1:C1ProgressBar>** tags have been added to the project.

You have successfully created a Silverlight application containing a **C1ProgressBar** control. In the next step, you will customize the control.

### Step 2

In the previous step you set up the application's user interface and added a **C1ProgressBar** control to your application. In this step you will customize the control and add a check box.

1. With the **C1ProgressBar** control selected on the page, select **View \| Properties**.
2. In the **Properties** window, locate the **Margin** property and enter "3" in the text box next to the property name.
3. Next to the **Height** property, enter "200" and next to the **Width** property enter "450". Your XAML markup should now look like this:

 ```xml
 <Grid x:Name="LayoutRoot">
         <c1:C1ProgressBar HorizontalAlignment="Left" Margin="3" Name="C1ProgressBar1" VerticalAlignment="Top" Height="200" Width="450" />
 </Grid>
 ```

4. In Source View edit the markup to add a check box to the application. The markup will now look like the following:

 ```xml
 <Grid x:Name="LayoutRoot">
   <c1:C1ProgressBar HorizontalAlignment="Left" Margin="3" Name="C1ProgressBar1" VerticalAlignment="Top" Height="200" Width="450" />
   <CheckBox Content="Show C1ProgressBar1" IsChecked="{Binding IsIndeterminate, ElementName=C1ProgressBar1, Mode=TwoWay}"/>
 </Grid>
 ```

You have successfully customized the **C1ProgressBar** control. In the next step, you will observe the final application.

### Step 3

To run your application and observe **ProgressBar for 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. Select the **Show C1ProgressBar1** check box. The progress bar will now appear as a series of red dots moving across the screen.

Congratulations! You've completed the **ProgressBar for Silverlight** quick start.