User Tools

Site Tools


notes:uwp:rangecontrols

Range Controls in XAML

Object
 └─DependencyObject
   └─UIElement 
     └─FrameworkElement 
       └─Control
         ├─ProgressRing
         └─RangeBase
           ├─ProgressBar
           ├─ScrollBar
           └─Slider

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

ProgressBar

Example: A determinate ProgressBar:

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

Example: An indeterminate ProgressBar:

<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.

ProgressRing

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"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TestApp">
    <StackPanel>
        <Button Content="Show ProgressRing" Click="Button_Click" />
    </StackPanel>
</Page>
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()
        {
            this.InitializeComponent();
        }
 
        private void Button_Click(object sender, RoutedEventArgs args)
        {
            ProgressRing ring = new ProgressRing();
            try
            {
                // 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.
                // ...
            }
            finally
            {
                ring.IsActive = false;
            }
        }
    }
}

Slider

Frequentry used Slider's properties:

  • StepFrequency - default 1.0
  • Orientation
  • IsDirectionReversed
  • TickFrequency
  • TickPlacement
  • 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}"
        Minimum="1"
        Maximum="10"
        StepFrequency="0.5"
        TickFrequency="0.5"
        IsThumbToolTipEnabled="False" 
        ManipulationMode="All">
    <i:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="ValueChanged">
            <core:InvokeCommandAction Command="{Binding MyCommand}" 
                                      CommandParameter="ValueChanged" />
        </core:EventTriggerBehavior>
        <core:EventTriggerBehavior EventName="ManipulationStarted">
            <core:InvokeCommandAction Command="{Binding MyCommand}"
                                      CommandParameter="ManipulationStarted" />
        </core:EventTriggerBehavior>
        <core:EventTriggerBehavior EventName="ManipulationCompleted">
            <core:InvokeCommandAction Command="{Binding MyCommand}" 
                                      CommandParameter="ManipulationCompleted" />
        </core:EventTriggerBehavior>
    </i:Interaction.Behaviors>
</Slider>
notes/uwp/rangecontrols.txt · Last modified: 2017/02/14 by admin