RangeSelecter Control In UWP With XAML And C#

Before reading this article, please go through the article links, given below-.

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015.
How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

After reading this article, you can learn, how to use UWP Tool Kit Control - RangeSelecter in Universal Windows apps development with XAML and Visual C#.

The following important tools are required to develop UWP-

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development-

Step1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPToolkitRangeselector)->OK.

Step 2 - Choose the Target and minimum platform version for your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

For adding UWPToolKit control, refer

How to add UWP ToolKit controls in Universal Application Development With XAML AND C#.

Step 3 - Add TextBlock control, change the name and text property for the title.

Step 4 - Add Stackpanel control.

Step 5 - Add UWP Tool Kit Name Space in Mainpage.xaml.

,xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add RangeSelector control from UWP Tool Kit and change the name property and set the Maximum, RangeMax and RangeMin properties

Add TextBlock control, change the name and text property for selected minimum range value from RangeSelector.

Add TextBlock control, change the name and text property for the selected maximum range value from RangeSelector.

Step 6 - Double click the ValueChanged event in a RangeSelectorcontrol. Automatically, it creates ValueChanged Method in MainPage.xaml.cs.

Step 7 - Add the namespace and the code in the Mainpage.xaml.cs, using Microsoft.Toolkit.Uwp.UI.Controls-

private void RStest_ValueChanged(object sender, RangeChangedEventArgs e)
{
if (e.ChangedRangeProperty == RangeSelectorProperty.MinimumValue)
{
tblMin.Text = "The Minimum Value is : " + e.NewValue.ToString();
} else {
tblMax.Text = "The Maximum Value is : " + e.NewValue.ToString();
}
}

RangeSelector

Note - Automatically, the following code will be generated in XAML code view, while we are done in the design view.

Page
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns: local = "using:UWPToolkitRangeSelector"
xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns: Controls = "using:Microsoft.Toolkit.Uwp.UI.Controls"
x: Class = "UWPToolkitRangeSelector.MainPage"
mc: Ignorable = "d" >
<
Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<
TextBlock x: Name = "tblTitle"
HorizontalAlignment = "Left"
Margin = "62,42,0,0"
TextWrapping = "Wrap"
Text = "UWP Tool Kit Range Selector Demo"
VerticalAlignment = "Top"
Width = "260"
FontWeight = "Bold" / >
<
StackPanel x: Name = "SPRange"
HorizontalAlignment = "Left"
Height = "166"
Margin = "62,133,0,0"
VerticalAlignment = "Top"
Width = "206" >
<
Controls: RangeSelector x: Name = "RStest"
FontWeight = "Bold"
RangeMin = "1"
RangeMax = "85"
Maximum = "100"
ValueChanged = "RStest_ValueChanged" / >
<
TextBlock x: Name = "tblMin"
TextWrapping = "Wrap"
Text = ""
Margin = "0,20,12,0" / >
<
TextBlock x: Name = "tblMax"
TextWrapping = "Wrap"
Text = ""
Margin = "0,25,10,0" / >
<
/StackPanel>
<
/Grid>
<
/Page>

Step 8 - Deploy your app in Local Machine and the output of the UWPToolkitRangeselector app is-

Summary- Now, you have successfully tested UWP Tool Kit - Rangeselector control in Visual C# - UWP environment.