This quick start guides you through the steps of adding the ProgressBar control in a WPF application, and display the progress of a task in the control.

The image snapshot below is based on an application that keeps progress of the daily water intake as a part of user-health goals. As you can observe from the image, the ProgressBar control has been utilized to indicate the number of glasses of water consumed per day. A button has been provided for the end-user to click see the increment in value of the ProgressBar. For example, when the user clicks the button, it adds a progress of 1 glass of water to the daily water target (which is 10 glasses) as given in the application.

Add C1ProgressBar to the Project

1. Click on Manage NuGet Packages and add the C1.WPF.Core assembly.

2. Add the XAML code between grid tags as shown below. This creates a StackPanel, Label, ProgressBar, TextBlocks, Button and Image to design the user interface as shown in the image above.

   XAML

   Copy Code

   <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > <!--Add a StackPanel to stack a label and another stackpanel vertically--> <StackPanel Orientation="Vertical"> <Label Content="Health Goals: Daily Water Reminder" ></Label> <!--Add a StackPanel to stack the ProgressBar and TextBlocks vertically--> <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <c1:C1ProgressBar x:Name="progressBar" BorderThickness="10" Height="59" Width="389" Minimum="0" Maximum="10" /> <!--Add a TextBlock databound to the Progressbar to indicate the progress of value in the ProgressBar--> <TextBlock Name="textBlock" TextWrapping="Wrap" Height="29" Width="176"> <Run Text="{Binding ElementName=progressBar, Path=Value}" /> <Run Text="out of 10 glasses consumed" /> </TextBlock> <Image Source="/water-drinking.png" Height="206" Width="209" Visibility="Visible" HorizontalAlignment="Stretch" /> <!--Add a button for the user to click and observe their daily water progress--> <Button x:Name="add_button" Height="50" Width="175" Click="add_button_Click" Content="Add 1 Glass(250ml)" > </Button > <TextBlock Text="Water is good!" Foreground="DeepSkyBlue" FontFamily="Verdana" FontWeight="ExtraBlack" HorizontalAlignment="Center" Height="28" Width="106"></TextBlock> <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Image Source="/tip.jpg" Height="67" Width="80"/> <TextBlock TextWrapping="Wrap" Text="Tip for the day: Make drinking water a regular habit. Drink atleast 7 glasses of water a day." FontSize="11" Height="64" Width="222"/> </StackPanel> </StackPanel> </StackPanel> </Grid>

   We have assigned the a value of 10 to the Maximum property of the ProgressBar control as we are keeping the daily water target to 10 glasses of water. The Text property of the TextBlock is databound to the ProgressBar control and its Value path, so that the text indicates the water intake as per the change in the Value property.

3. Switch to the code editor and add the following code snippet to the button click event. This increments the Value property in the ProgressBar by '1' for every button click until it reaches the maximum value.

   C#	Copy Code
   private void add_button_Click(object sender, RoutedEventArgs e) { progressBar.Value += 1; }

4. Run the code and observe the output. Click the button repeatedly to view the progress in the daily water goal target.