Сделайте слайдер с иглой в C#

Этот пример рисует вертикальную «иголку» в PictureBox, чтобы пользователь мог выбрать значение, как это делает TrackBar. Однако код выполняет весь чертеж, поэтому вы можете контролировать внешний вид слайдера. В этом примере также отображается текущее значение в всплывающей подсказке над слайдером.

Программа использует переменную и две константы для отслеживания значения ползунка и его минимальных и максимально допустимых значений.

// Текущее значение.
private float SliderValue = 0.3f;

// Минимальные и максимально допустимые значения.
private const float MinimumValue = 0.0f;
private const float MaximumValue = 1.0f;

Программа использует два метода для преобразования между координатами X в PictureBox и значениями между минимальными и максимально допустимыми значениями.

// Преобразование координаты X в значение.
private float XtoValue(int x)
{
    return MinimumValue + (MaximumValue - MinimumValue) *
        x / (float)(picSlider.ClientSize.Width - 1);
}

// Преобразование значения в координату X.
private float ValueToX(float value)
{
    return (picSlider.ClientSize.Width - 1) *
        (value - MinimumValue) /
            (float)(MaximumValue - MinimumValue);
}

Это просто математика. Единственный трюк в том, что код вычитает 1 из ширины клиента элемента управления PictureBox, чтобы отобразить самый правый видимый пиксель в PictureBox до самого большого разрешенного значения. Если вы этого не сделаете, тогда, когда пользователь выберет наибольшее допустимое значение, игла отходит от края элемента управления.

Когда пользователь нажимает мышь на PictureBox или перемещает нажатую кнопку мыши над PictureBox, MouseDown или MouseMove Обработчики событий вызывают метод SetValue для обновления значения ползунка.

// Переместите иглу в это положение.
private bool MouseIsDown = false;
private void picSlider_MouseDown(object sender, MouseEventArgs e)
{
    MouseIsDown = true;
    SetValue(XtoValue(e.X));
}
private void picSlider_MouseMove(object sender, MouseEventArgs e)
{
    if (!MouseIsDown) return;
    SetValue(XtoValue(e.X));
}

Когда пользователь освобождает мышь, следующий обработчик событий устанавливает MouseIsDown, поэтому будущие события MouseMove ничего не делают.

private void picSlider_MouseUp(object sender, MouseEventArgs e)
{
    MouseIsDown = false;
    tipValue.Hide(this);

    // Примите меры, если хотите.
    lblResult.Text = SliderValue.ToString("0.00");
}

Следующий метод SetValue обновляет значение ползунка.

// Установите значение ползунка. Если значение изменилось,
// отобразим всплывающую подсказку.
private void SetValue(float value)
{
    // Удостоверьтесь, что новое значение находится в пределах.
    if (value < MinimumValue) value = MinimumValue;
    if (value > MaximumValue) value = MaximumValue;

    // Посмотрим, изменилось ли значение.
    if (SliderValue == value) return;

    // Сохраним новое значение.
    SliderValue = value;

    // Перерисовать, чтобы показать новое значение.
    picSlider.Refresh();

    // Отображение всплывающей подсказки.
    int tip_x = picSlider.Left + (int)ValueToX(SliderValue);
    int tip_y = picSlider.Top;
    tipValue.Show(SliderValue.ToString("0.00"),
        this, tip_x, tip_y, 3000);

    // Примите меры, если хотите.
    lblResult.Text = SliderValue.ToString("0.00");
}

Сначала код гарантирует, что новое значение находится в пределах диапазона. Если пользователь нажимает мышь на элемент управления, а затем перетаскивает его вправо или влево от PictureBox, значение может быть вне допустимого диапазона, поэтому этот код исправляет его.

Далее, если новое значение и старое значение совпадают, метод выходит.

Если метод не выходит, он сохраняет новое значение и обновляет PictureBox, чтобы он показывал новую позицию иглы. Затем он отображает новое значение в всплывающей подсказке над PictureBox. Наконец, в этом примере код отображает новое значение в метке.

Последний кусок интересного кода - это PictureBox элемент управления Paint.

// Нарисуйте иглу.
private void picSlider_Paint(object sender, PaintEventArgs e)
{
    // Вычислите координату X иглы.
    float x = ValueToX(SliderValue);

    // Нарисуй это.
    using (Pen pen = new Pen(Color.Blue, 2))
    {
        e.Graphics.DrawLine(pen, x, 0,
            x, picSlider.ClientSize.Height);
    }
}

Этот код просто рисует иглу в текущей позиции.

Источник: http://csharphelper.com/blog/2016/04/make-a-slider-with-a-needle-in-c/

(Пока оценок нет)