Skip to content

Latest commit

 

History

History
99 lines (74 loc) · 4.08 KB

RangeSelector.md

File metadata and controls

99 lines (74 loc) · 4.08 KB
Raw
title author description keywords dev_langs
RangeSelector XAML Control
nmetulev
The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values.
windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, RangeSelector, XAML Control, xaml, double slider
csharp
vb

RangeSelector XAML Control

The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. The user can slide from the left or right of the range.

[!div class="nextstepaction"] Try it in the sample app

Syntax

<Page ...
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:RangeSelector x:Name="RangeSelectorControl" 
	Minimum="10" 
	Maximum="100"
	StepFrequency="2">
</controls:RangeSelector>

Sample Output

RangeSelector animation

Properties

Property Type Description
IsTouchOptimized bool Gets or sets a value indicating whether the control is optimized for touch use
Maximum double Gets or sets the maximum value of the range
Minimum double Gets or sets the minimum value of the range
RangeMax double Gets or sets the current upper limit value of the range
RangeMin double Gets or sets the current lower limit value of the range
StepFrequency int Get or set the interval between the values on the RangeSelector. For example; if you set StepFrequency to 2, using Minimum at 0 and Maximum at 10, the range values you can set will be 0,2,4,6,8,10

Examples

Note

If you are using a RangeSelector within a ScrollViewer you'll need to add some codes. This is because by default, the ScrollViewer will block the thumbs of the RangeSelector to capture the pointer.

Here is an example of using RangeSelector within a ScrollViewer

<controls:RangeSelector x:Name="Selector" ThumbDragStarted="Selector_OnDragStarted" ThumbDragCompleted="Selector_OnDragCompleted"/>
private void Selector_OnDragStarted(object sender, DragStartedEventArgs e)
{
	ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
	ScrollViewer.VerticalScrollMode = ScrollMode.Disabled;
}

private void Selector_OnDragCompleted(object sender, DragCompletedEventArgs e)
{
	ScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
	ScrollViewer.VerticalScrollMode = ScrollMode.Auto;
}
Private Sub Selector_OnDragStarted(ByVal sender As Object, ByVal e As DragStartedEventArgs)
	ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled
	ScrollViewer.VerticalScrollMode = ScrollMode.Disabled
End Sub

Private Sub Selector_OnDragCompleted(ByVal sender As Object, ByVal e As DragCompletedEventArgs)
	ScrollViewer.HorizontalScrollMode = ScrollMode.Auto
	ScrollViewer.VerticalScrollMode = ScrollMode.Auto
End Sub

Sample Project

RangeSelector Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Default Template

RangeSelector XAML File is the XAML template used in the toolkit for the default styling.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API