Элементы управления в WPF. ProgressBar и Slider

Элементы управления ProgressBar и Slider в своей работе используют диапазоны значений и, несмотря на то, что эти элементы относятся к различным категориям, они имеют идентичные свойства так как имеют общего предка — класс RangeBase. Рассмотрим работу этих элементов в приложении WPF.

Свойства класса RangeBase

Класс RangeBase предоставляет нам следующие свойства для управления диапазонами значений в WPF:

Также этот класс определяет событие

public event System.Windows.RoutedPropertyChangedEventHandler<double> ValueChanged;

которое генерируется при каждом изменении значения свойства Value

Стоит отметить, что, несмотря на то, что элемент управления ProgressBar является наследником RangeBase, этот элемент не использует свойства SmallChange и LargeChange.

Элемент Slider

Этот элемент управления позволяет пользователю выбирать одно из значений в диапазоне. С таким элементом управления мы сталкиваемся постоянно, например, при изменении уровня громкости в каком-либо приложении. У этого элемента управления в Windows 11 можно выделить следующие части:

Элемент Slider предоставляет нам следующие свойства:

Рассмотрим применение этих свойств на следующем примере:

<Slider Minimum="0.0"
        Maximum="100.0"
        Orientation="Horizontal" 
        IsMoveToPointEnabled="False"
        AutoToolTipPrecision="2" 
        AutoToolTipPlacement="BottomRight" 
        TickPlacement="Both"
        TickFrequency="5"
        IsSnapToTickEnabled="True" 
        Foreground="Red">
</Slider>

В запущенном приложении мы увидим вот такой элемент Slider:Здесь Slider использует диапазон значений от 0 до 10, а деления расположены каждые 5 единиц. При этом, свойство IsMoveToPointEnabled равно False, а IsSnapToTickEnabled — True, поэтому клик мышкой по шкале будет приводить к тому, что ползунок будет перемещаться к ближайшему делению шкалы:

В представленном примере метки на шкале расставлены равномерно. Используя свойство Ticks, мы можем создать неравномерную шкалу Slider, например, вот так:

<Slider Minimum="0.0"
        Maximum="100.0"
        Orientation="Horizontal" 
        IsMoveToPointEnabled="False"
        AutoToolTipPrecision="2" 
        AutoToolTipPlacement="BottomRight" 
        TickPlacement="Both"
        Ticks="0, 1, 5, 10, 25, 50, 60.5, 70.8, 90.1, 100"
        TickFrequency="5"
        IsSnapToTickEnabled="True" 
        Foreground="Red">
</Slider>

Теперь наш Slider будет выглядеть вот так:

Если нам необходимо выделять диапазон значений на шкале Slider, то мы можем использовать для этого событие ValueChanged. Изменим создание Slider следующим образом:

<Slider Minimum="0.0"
        Maximum="100.0"
        Orientation="Horizontal" 
        IsMoveToPointEnabled="False"
        AutoToolTipPrecision="2" 
        AutoToolTipPlacement="BottomRight" 
        TickPlacement="Both"
        Ticks="0, 1, 5, 10, 25, 50, 60.5, 70.8, 90.1, 100"
        TickFrequency="5"
        IsSnapToTickEnabled="True" 
        Foreground="Red"
        x:Name="MySlider"
        IsSelectionRangeEnabled="True"
        ValueChanged="Slider_ValueChanged">
</Slider>

Здесь мы установили свойство IsSelectionRangeEnabled, задали имя слайдера (MySlider) и определили новый обработчик события ValueChanged, который будет выглядеть вот так:

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    MySlider.SelectionStart = 0;
    MySlider.SelectionEnd = e.NewValue;
}

Запустим приложение и посмотрим на результат:

Элемент ProgressBar

Элемент управления ProgressBar обычно используется для показа пользователю прогресса выполнения какой-либо длительной операции. Например, ProgressBar используется для показа выполнения копирования большого объема данных, скачивания файлов из Сети и так далее. Соответственно, для управления отображением ProgressBar мы должны использовать код C#.

Элемент ProgressBar предоставляет нам следующие свойства:

Чтобы продемонстрировать работу ProgressBar, воспользуемся уже имеющимся у нас приложением со Slider и изменим XAML-код страницы следующим образом:

<StackPanel Margin="20">
    <Slider Minimum="0.0"
            Maximum="100.0"
            Orientation="Horizontal" 
            IsMoveToPointEnabled="False"
            AutoToolTipPrecision="2" 
            AutoToolTipPlacement="BottomRight" 
            TickPlacement="Both"
            Ticks="0, 1, 5, 10, 25, 50, 60.5, 70.8, 90.1, 100"
            TickFrequency="5"
            IsSnapToTickEnabled="True" 
            Foreground="Red"
            x:Name="MySlider"
            IsSelectionRangeEnabled="True"
            ValueChanged="Slider_ValueChanged">
    </Slider>
    <ProgressBar Minimum="0" 
                 Maximum="100" 
                 x:Name="MyProgress"/>
</StackPanel>

Обработчик Slider_ValueChanged изменим следующим образом:

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    MySlider.SelectionStart = 0;
    MySlider.SelectionEnd = e.NewValue;
    MyProgress.Value = e.NewValue;
}

Теперь изменение Slider будет менять состояние ProgressBar:

«Бесконечный» ProgressBar будет выглядеть следующим образом:

<ProgressBar Minimum="0" 
             Maximum="100"
             Height="10"
             x:Name="MyProgress" 
             IsIndeterminate="True"/>

Как видно, при значении свойства IsIndeterminate равным True, изменение значение свойства Value никак не влияет на визуальное состояние ProgressBar.

Итого

Элементы управления Slider и ProgressBar в WPF имеют общего предка — класс RangeBase, который позволяет пользователю работать с диапазонами значений. При этом, Slider дает пользователю устанавливать значения диапазона, а ProgressBar используется для отображения хода выполнения каких-либо длительных операций.