[Yugong Series] Detailed Explanation of Track Controls on WPF Controls in July 2023

---

foreword

A WPF control is a fundamental user interface element in Windows Presentation Foundation (WPF). They are visualization objects that can be used to create various user interfaces. WPF controls can be divided into two categories: native controls and custom controls.

Native controls are built-in controls provided by Microsoft, such as Button, TextBox, Label, ComboBox, etc. These controls are standard user interface elements that are common in WPF.

Custom controls allow developers to use programming languages ​​such as XAML and C# to create personalized user interface elements. Custom controls can provide more functions and customization options as required, as well as a better user experience.

1. Detailed explanation of Track control

Track control is a basic control in WPF, used to create a draggable slider. It allows the user to set a value by dragging or clicking. The control consists of Thumb, Selection and TickMarks, where Thumb is the draggable part, Selection is the area representing the currently selected value, and TickMarks is the area used to mark the scale.

Here are some commonly used properties:

1. Minimum: Set the minimum value of the slider.

2. Maximum: Set the maximum value of the slider.

3. Value: Set the current value of the slider.

4. Orientation: Set the orientation of the slider, which can be horizontal or vertical.

5. TickFrequency: Set the interval of the scale.

6. IsDirectionReversed: If true, make the Thumb drag from right to left.

The following is the XAML code for a simple Track:

<Track Minimum="0" Maximum="100" Value="50" Orientation="Horizontal"/>

This code will create a horizontal slider with an initial value of 50 and a range of 0 to 100.

1. Attribute introduction

1. Minimum: Set the minimum value of Track
2. Maximum: Set the maximum value of Track
3. Value: Set the current value of Track
4. Orientation: Set the direction of Track, horizontal or vertical
5. IsDirectionReversed: Set whether to flip the direction of Track
6. Thumb: Set the thumb control on the Track
7. TickPlacement: Set the position of the tick marks on the Track
8. TickFrequency: Set the frequency of tick marks on the Track
9. IsMoveToPointEnabled: Set whether to enable click-based dragging
10. PreviewMouseLeftButtonDown: Sets an event handler that occurs when the user clicks on the Track
11. PreviewMouseLeftButtonUp: Sets an event handler that occurs when the user releases the Track
12. PreviewMouseMove: Sets the event handler that occurs when the user moves the mouse on the Track
13. Template: Set the control template for customizing the appearance of Track

2. Common scenarios

Track controls (or called sliders, sliders) are commonly used in the following scenarios in WPF:

1. Control the adjustment of volume or brightness and other values

2. Resize a graphic or image

3. Adjust the zoom level of the page

4. Adjust the position of the time axis

5. Used to drag graphics objects to specified positions

6. Used to set the progress bar

7. Used to control the playback progress of multimedia files

The Track control can be used in any scene that needs to adjust the value or progress. It has good customizability and can be customized according to different needs.

3. Specific cases

The Track control is a control used in WPF to create a swipeable slider. The following is a simple case that demonstrates how to use the Track control to create an adjustable volume control.

First, we need to define a Track control in the XAML file:

<Track Minimum="0" Maximum="100" Value="{Binding Volume}" />

In this example, we set the minimum value of Track to 0 and the maximum value to 100. We also bind the Value property to the Volume property in the ViewModel.

Next, we need to define the Volume property in the ViewModel and initialize it in the constructor:

public class ViewModel : INotifyPropertyChanged
{
    
    
    private int _volume;
    public int Volume
    {
    
    
        get {
    
     return _volume; }
        set
        {
    
    
            if (_volume == value) return;
            _volume = value;
            OnPropertyChanged(nameof(Volume));
        }
    }

    public ViewModel()
    {
    
    
        Volume = 50;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
    
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

In the constructor, we set the initial value of the Volume property to 50. When the value of the Track control changes, the ViewModel will automatically update the value of the Volume property and notify the view to update.

Finally, in the MainWindow.xaml.cs file, we instantiate the ViewModel and bind it to the MainWindow's DataContext:

public partial class MainWindow : Window
{
    
    
    public MainWindow()
    {
    
    
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

Now we can run the application and use the Track controls to adjust the volume. Whenever the position of the slider changes, the ViewModel will automatically update the value of the Volume property and notify the view to update. We can also listen for changes to the Volume property and perform other operations as needed.