User Tools

Site Tools


Range Controls in XAML


Properties of the range controls inherited from RangeBase. All the properties are of type double:

  • Minimum - default 0
  • Maximum - default 1
  • SmallChange
  • LargeChange
  • Value - a value ranging from Minimum to Maximum


Example: A determinate ProgressBar:

<ProgressBar Width="100" Minimum="0" Maximum="100" Value="30" />

Example: An indeterminate ProgressBar (the values of Minimum, Maximum, and Value don't matter):

<ProgressBar Width="100" IsIndeterminate="true" />

When the ProgressBar is indeterminate, the progress animation continues even if it's not visible on the screen, such as when the ProgressBar's Visibility is Collapsed. This can keep the UI thread awake and use resources. When the ProgressBar is not visible, disable the animation by setting IsIndeterminate to False.

More information can be found here.


A ProgressRing control indicates indeterminate progress. It uses an animated ring.

<ProgressRing Width="150.0" Height="150.0" IsActive="true" />

Example: Create a ProgressRing in a Popup programmatically:

<Page x:Class="TestApp.MainPage"
        <Button Content="Show ProgressRing" Click="Button_Click" />
using Microsoft.Graphics.Canvas.Effects;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media;
namespace TestApp
    public sealed partial class MainPage : Page
        public MainPage()
        private void Button_Click(object sender, RoutedEventArgs args)
            ProgressRing ring = new ProgressRing();
                // Create a progress ring to show while populating the checklist entry list.
                ring.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
                ring.Width = 80.0;
                ring.Height = 80.0;
                ring.IsActive = true;
                // Create a popup to hold the progress ring.
                Popup popup = new Popup
                    Child = ring,
                    IsLightDismissEnabled = true
                // Show the popup in the center.
                popup.VerticalOffset = this.ActualHeight / 2.0 - 40.0;
                popup.HorizontalOffset = this.ActualWidth / 2.0 - 40.0;
                popup.IsOpen = true;
                // Do your long-running operation here.
                // ...
                ring.IsActive = false;


Frequentry used Slider's properties:

  • StepFrequency - default 1.0
  • Orientation
  • IsDirectionReversed
  • TickFrequency
  • TickPlacement
  • IsThumbToolTipEnabled - enables/disables a ToolTip shown while dragging or hovering the slider's thumb
  • ThumbToolTipValueConverter - a converter derived from IValueConverter

Example: The ValueChanged event is invoked when the value of the Slider changes. This is not a routed event. It's sender argument is the Slider, and the OriginalSource property is always null.

<Slider ValueChanged="Slider_ValueChanged" />
private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs args)
    double val = args.NewValue;
    // do something with val

Example: Bind event handlers to a Slider using Blend behaviours:

<Slider Value="{Binding MyViewModel.SomeValue, Mode=TwoWay}"
        <core:EventTriggerBehavior EventName="ValueChanged">
            <core:InvokeCommandAction Command="{Binding MyCommand}" 
                                      CommandParameter="ValueChanged" />
        <core:EventTriggerBehavior EventName="ManipulationStarted">
            <core:InvokeCommandAction Command="{Binding MyCommand}"
                                      CommandParameter="ManipulationStarted" />
        <core:EventTriggerBehavior EventName="ManipulationCompleted">
            <core:InvokeCommandAction Command="{Binding MyCommand}" 
                                      CommandParameter="ManipulationCompleted" />

Example: Customize the content in Slider's ToolTip by setting Slider's ThumbTollTipValueConverter to an instance of a class implementing the IValueConverter:

class ToolTipValueConverter : IValueConverter
    public object Convert(object value, Type target, object param, string language)
        return value; // TODO: customize the value
    public object ConvertBack(object value, Type target, object param, string language)
        throw new NotImplementedException();
notes/uwp/rangecontrols.txt · Last modified: 2020/08/26 (external edit)