The following quick start guide is intended to get you up and running with RangeSlider for WPF. In this quick start, you add a C1RangeSlider control to your application and customize the appearance and behavior of the control.

Set up the Application

1. In Visual Studio, select File | New | Project.
2. In the New Project dialog box, select WPF Application.
3. Enter a Name and Location for your project and click OK to create the new application.
4. In Design view, click once within the Grid in your application.
5. Navigate to the Toolbox and double-click the Rectangle icon to add the standard control to the Grid.
6. In the Design pane, resize Rectangle1 to fill the entire Grid.
7. Switch to XAML view and add a Fill to the <Rectangle> tag so it appears similar to the following:

XAML	Copy Code
<Rectangle Name="rectangle1" Stroke="Black"> <Rectangle.Fill> <RadialGradientBrush x:Name="colors"> <GradientStop x:Name="goldcol" Color="Gold" Offset="0" /> <GradientStop x:Name="blackcol" Color="Black" Offset="1" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

This will add a black and gold radial gradient fill to the rectangle.

11. Run your application now and observe that it looks similar to the following:

You've successfully created a WPF application and customized the Rectangle control. In the next step you'll add and customize the C1RangeSlider control.

Add the RangeSlider control to the Application

In the previous step you created a new WPF project and added a Rectangle control with a gradient to the application. In this step you'll continue by adding a C1RangeSlider control that will control the gradient fill in the Rectangle.

Complete the following steps:

1. In the XAML window of the project, place the cursor between the </Rectangle> and </Grid> tags and click once.
2. Navigate to the Toolbox and double-click the C1RangeSlider icon to add the control to the application on top of the Rectangle.
3. Give your control a name by adding x:Name="c1rs1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1">

By giving it a unique identifier, you'll be able to access the control in code.

4. Add a margin by adding Margin="50" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50">

This will set each edge the same distance away from the grid's border.

5. Set the Orientation property to Vertical by adding Orientation="Vertical" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

Example Title	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical">

By default Orientation is Horizontal and the control appears across the page.

6. Set the UpperValue property to 1 by adding UpperValue="1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1">

The upper thumb will now begin at 1.

7. Set the Maximum property to 1  by adding Maximum="1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1">

Users will now not be able to select a value greater than 1.

8. Set the ValueChange property to 0.1  by adding ValueChange="0.1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">

When you click on the slider track at run time, the slider thumb will now move by 0.1 units.

9. Set  the Opacity property to "0.8"  by adding Opacity="0.8" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

Example Title	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">

By default this property is set to 1 and the control appears completely opaque. Changing this to a lower number will make the control appear slightly transparent.

10. Indicate event handlers by adding LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged">

You'll add code for these event handlers in a later step.

11. Run your application now and observe that it looks similar to the following:

You've successfully set up your application's user interface, but right now the slider will do nothing if you move it. In the next step you'll add code to your application to add functionality.

Add Code to the Application

In the previous steps you set up the application's user interface and added controls to your application. In this step you'll add code to your application to finalize it.

Complete the following steps:

1. Double-click Window1 to switch to Code view and create the Window1_Loaded event handler.
2. In Code view, add the following import statement to the top of the page:

Visual Basic	Copy Code
Imports C1.WPF.Input

 

C#	Copy Code
using C1.WPF.Input;

3. In a WPF application, add code to the Window_Loaded event handler so that it appears like the following:

Visual Basic	Copy Code
Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded UpdateGradient() End Sub

 

C#	Copy Code
private void Window_Loaded(object sender, RoutedEventArgs e) { UpdateGradient(); }

4. Add the following code just after the Window1_Loaded event handler to update the gradient values:

Visual Basic	Copy Code
Private Sub UpdateGradient() If IsLoaded Then Me.goldcol.Offset = Me.c1rs1.LowerValue Me.blackcol.Offset = Me.c1rs1.UpperValue End If End Sub

 

C#	Copy Code
UpdateGradient() { if (IsLoaded) { this.goldcol.Offset = this.c1rs1.LowerValue; this.blackcol.Offset = this.c1rs1.UpperValue; } }

5. Return to Design view.
6. Click once on the C1RangeSlider control to select it and then navigate to the Properties window.
7. Click the lightning bolt Events icon at the top of the Properties window to view events.
8. Double-click the LowerValueChanged event to switch to Code view and create the c1rs1_LowerValueChanged event handler. Return to Design view and repeat this step with the UpperValueChanged event to create the c1rs1_UpperValueChanged event handler.
9. Add code to the c1rs1_LowerValueChanged event handler so that it appears like the following:

Visual Basic	Copy Code
Private Sub c1rs1_LowerValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles c1rs1.LowerValueChanged UpdateGradient() End Sub

 

C#	Copy Code
private void c1rs1_LowerValueChanged(object sender, EventArgs e) { UpdateGradient(); }

10. Add code to the c1rs1_UpperValueChanged event handler so that it appears like the following:

Visual Basic	Copy Code
Private Sub c1rs1_UpperValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles c1rs1.UpperValueChanged UpdateGradient() End Sub

 

C#	Copy Code
c1rs1_UpperValueChanged(object sender, EventArgs e) { UpdateGradient(); }

 In this step you completed adding code to your application. In the next step you'll run the application and observe run-time interactions.

Run the Application

Now that you've created a WPF application and customized the application's appearance and behavior, the only thing left to do is run your application.

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

1. From the Project menu, select Test Solution to view how your application will appear at run time.

The application will appear similar to the following:

 

2. Move the top slider thumb down. Notice that the gradient's appearance changes:

3. Move the bottom thumb up, notice that the gradient effect appears less diffused:

4. Click once between the slider thumbs and drag the cursor down the slider track – notice that both thumbs move together:

Congratulations!

You've completed the RangeSlider for WPF quick start and created a RangeSlider for WPF application, customized the appearance and behavior of the controls, and viewed some of the run-time capabilities of your application.