ProgressIndicator Quick Start

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

Step 1
Step 2
Step 3

In this step you'll begin in Visual Studio to create a Silverlight application using ProgressIndicator for WPF and Silverlight. Complete the following steps:

In Visual Studio, select File | New | Project to open the New Project dialog box.
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.
Click OK to close the New WPF Application dialog box and create your project.
Add a UserControl and name it C1RangeSlider.
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:

XAML	Copy Code
<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">

The UserControl will now resize to accommodate any content placed within it.
In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.
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.

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.

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

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

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

XAML	Copy Code
<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>

XAML

Copy Code

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

To run your application and observe ProgressBar for Silverlight's run-time behavior, complete the following steps:

From the Debug menu, select Start Debugging to view how your application will appear at run time.
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.