Back to Details

syncfusion-winforms-trackbar

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing TrackBarEx in Windows Forms

在Windows Forms中实现TrackBarEx

TrackBarEx is an advanced Windows Forms control that provides an interactive slider for value selection. It allows users to drag a slider or click buttons to set values within a specified range, ideal for scenarios requiring intuitive value input.
TrackBarEx是一款高级Windows Forms控件，提供用于值选择的交互式滑块。用户可拖动滑块或点击按钮在指定范围内设置值，非常适合需要直观值输入的场景。

When to Use This Skill

何时使用此技能

Use this skill when you need to:
  • Create an interactive slider control for value selection
  • Allow users to input values by dragging a slider or clicking increment/decrement buttons
  • Customize appearance (buttons, colors, gradient)
  • Set horizontal or vertical orientation
  • Configure value ranges with minimum and maximum
  • Handle scroll events when users change values
  • Manage small and large change increments
  • Support both designer and programmatic control creation
当你需要完成以下操作时可使用本技能：
  • 创建用于值选择的交互式滑块控件
  • 允许用户通过拖动滑块或点击增减按钮输入值
  • 自定义外观（按钮、颜色、渐变）
  • 设置水平或垂直方向
  • 配置包含最小值和最大值的值范围
  • 处理用户修改值时的滚动事件
  • 管理小幅和大幅变化增量
  • 同时支持设计器和编程方式创建控件

Component Overview

组件概述

TrackBarEx combines a slider, track channel, and optional increment/decrement buttons to provide intuitive value selection. Users can interact with the control using mouse drag, button clicks, or keyboard navigation.
Key Capabilities:
  • Slider and button customization (size, color, appearance)
  • Value management with configurable ranges
  • Horizontal and vertical orientation
  • Appearance options (gradient, transparency, focus rectangle)
  • Scroll event handling for value changes
  • Increment/decrement button control
  • Channel and track customization
TrackBarEx整合了滑块、轨道通道以及可选的增减按钮，可提供直观的值选择能力。用户可通过鼠标拖动、按钮点击或键盘导航与控件交互。
核心能力：
  • 滑块与按钮自定义（尺寸、颜色、外观）
  • 支持可配置范围的值管理
  • 水平和垂直方向适配
  • 多种外观选项（渐变、透明度、焦点矩形）
  • 针对值变化的滚动事件处理
  • 增减按钮控制能力
  • 通道与轨道自定义

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Assembly dependencies and project setup
  • Adding control via designer
  • Adding control programmatically
  • Setting basic minimum and maximum values
  • Understanding default configurations
📄 阅读： references/getting-started.md
  • 程序集依赖与项目设置
  • 通过设计器添加控件
  • 通过编程方式添加控件
  • 设置基础的最小值与最大值
  • 理解默认配置

Appearance and Customization

外观与自定义

📄 Read: references/appearance-customization.md
  • Button appearance properties (ShowButton, ButtonColor, HighlightedButtonColor, PushedButtonEndColor)
  • Slider and channel settings (sizes, dimensions)
  • Gradient colors (TrackBarGradientStart, TrackBarGradientEnd)
  • Focus rectangle and transparency options
  • Complete appearance customization patterns
📄 阅读： references/appearance-customization.md
  • 按钮外观属性（ShowButton、ButtonColor、HighlightedButtonColor、PushedButtonEndColor）
  • 滑块与通道设置（大小、尺寸）
  • 渐变颜色（TrackBarGradientStart、TrackBarGradientEnd）
  • 焦点矩形与透明度选项
  • 完整的外观自定义模式

Value Management and Configuration

值管理与配置

📄 Read: references/value-management.md
  • Minimum, Maximum, and Value properties
  • SmallChange vs LargeChange increments
  • SmallIncrease, SmallDecrease, LargeIncrease, LargeDecrease methods
  • Timer intervals for button hold behavior
  • Managing value ranges and constraints
📄 阅读： references/value-management.md
  • Minimum、Maximum与Value属性
  • SmallChange与LargeChange增量的区别
  • SmallIncrease、SmallDecrease、LargeIncrease、LargeDecrease方法
  • 按钮长按行为的计时器间隔设置
  • 管理值范围与约束

Orientation and Events

方向与事件

📄 Read: references/orientation-events.md
  • Horizontal and vertical orientation modes
  • Scroll event handling
  • Responding to user interactions
  • Common event scenarios and patterns
  • Best practices for event handling
📄 阅读： references/orientation-events.md
  • 水平与垂直方向模式
  • 滚动事件处理
  • 响应用户交互
  • 常见事件场景与模式
  • 事件处理最佳实践

Quick Start Example

快速入门示例

Create a basic TrackBarEx control with customized appearance and value handling:
csharp
using Syncfusion.Windows.Forms.Tools;
using System.Windows.Forms;

public class Form1 : Form
{
    private TrackBarEx trackBarEx1;

    public Form1()
    {
        // Create and configure control
        trackBarEx1 = new TrackBarEx();
        trackBarEx1.Minimum = 0;
        trackBarEx1.Maximum = 100;
        trackBarEx1.Value = 50;
        trackBarEx1.ShowButtons = true;
        trackBarEx1.ButtonColor = System.Drawing.Color.DodgerBlue;
        trackBarEx1.Orientation = Orientation.Horizontal;
        
        // Add scroll event handler
        trackBarEx1.Scroll += TrackBarEx1_Scroll;
        
        // Add to form
        this.Controls.Add(trackBarEx1);
    }

    private void TrackBarEx1_Scroll(object sender, EventArgs e)
    {
        // Update UI or application state when value changes
        System.Diagnostics.Debug.WriteLine($"Value: {trackBarEx1.Value}");
    }
}
创建一个具备自定义外观和值处理能力的基础TrackBarEx控件：
csharp
using Syncfusion.Windows.Forms.Tools;
using System.Windows.Forms;

public class Form1 : Form
{
    private TrackBarEx trackBarEx1;

    public Form1()
    {
        // Create and configure control
        trackBarEx1 = new TrackBarEx();
        trackBarEx1.Minimum = 0;
        trackBarEx1.Maximum = 100;
        trackBarEx1.Value = 50;
        trackBarEx1.ShowButtons = true;
        trackBarEx1.ButtonColor = System.Drawing.Color.DodgerBlue;
        trackBarEx1.Orientation = Orientation.Horizontal;
        
        // Add scroll event handler
        trackBarEx1.Scroll += TrackBarEx1_Scroll;
        
        // Add to form
        this.Controls.Add(trackBarEx1);
    }

    private void TrackBarEx1_Scroll(object sender, EventArgs e)
    {
        // Update UI or application state when value changes
        System.Diagnostics.Debug.WriteLine($"Value: {trackBarEx1.Value}");
    }
}

Common Patterns

常见用法模式

Setting Up Value Ranges

设置值范围

Define appropriate minimum and maximum values for your use case:
csharp
trackBarEx1.Minimum = 10;
trackBarEx1.Maximum = 100;
trackBarEx1.Value = 50;
为你的使用场景定义合适的最小值和最大值：
csharp
trackBarEx1.Minimum = 10;
trackBarEx1.Maximum = 100;
trackBarEx1.Value = 50;

Customizing Button Appearance

自定义按钮外观

Enhance visual feedback with button color customization:
csharp
trackBarEx1.ShowButtons = true;
trackBarEx1.ButtonColor = System.Drawing.Color.LightBlue;
trackBarEx1.HighlightedButtonColor = System.Drawing.Color.Blue;
trackBarEx1.PushedButtonEndColor = System.Drawing.Color.DarkBlue;
通过按钮颜色自定义增强视觉反馈：
csharp
trackBarEx1.ShowButtons = true;
trackBarEx1.ButtonColor = System.Drawing.Color.LightBlue;
trackBarEx1.HighlightedButtonColor = System.Drawing.Color.Blue;
trackBarEx1.PushedButtonEndColor = System.Drawing.Color.DarkBlue;

Handling Value Changes

处理值变化

Respond to user interactions with the Scroll event:
csharp
trackBarEx1.Scroll += (s, e) => {
    // Handle value change
};
通过Scroll事件响应用户交互：
csharp
trackBarEx1.Scroll += (s, e) => {
    // Handle value change
};

Changing Orientation

修改方向

Switch between horizontal and vertical layouts:
csharp
// For vertical layout
trackBarEx1.Orientation = Orientation.Vertical;

// For horizontal layout
trackBarEx1.Orientation = Orientation.Horizontal;
在水平和垂直布局之间切换：
csharp
// For vertical layout
trackBarEx1.Orientation = Orientation.Vertical;

// For horizontal layout
trackBarEx1.Orientation = Orientation.Horizontal;

Key Properties

核心属性

PropertyPurpose
Value
Gets or sets the current slider position
Minimum
Gets or sets the minimum value (default: 10)
Maximum
Gets or sets the maximum value (default: 20)
Orientation
Sets horizontal or vertical layout
ShowButtons
Toggles visibility of increment/decrement buttons
SmallChange
Value change for arrow key or small increment (default: 1)
LargeChange
Value change for large increment (default: 5)
ButtonColor
Color of increment/decrement buttons
HighlightedButtonColor
Button color when highlighted
PushedButtonEndColor
Button color when pressed
Transparent
Enables transparent background
属性用途
Value
获取或设置滑块当前位置
Minimum
获取或设置最小值（默认：10）
Maximum
获取或设置最大值（默认：20）
Orientation
设置水平或垂直布局
ShowButtons
切换增减按钮的可见性
SmallChange
箭头键或小幅增量对应的数值变化（默认：1）
LargeChange
大幅增量对应的数值变化（默认：5）
ButtonColor
增减按钮的颜色
HighlightedButtonColor
高亮时的按钮颜色
PushedButtonEndColor
按下时的按钮颜色
Transparent
启用透明背景

Common Use Cases

常见使用场景

  • Volume Control: Use TrackBarEx for audio volume adjustment with visual feedback
  • Slider Input: Replace text input with intuitive slider for numeric value selection
  • Progress Indication: Display adjustable progress or completion percentage
  • Range Selection: Allow users to set minimum and maximum thresholds
  • Parameter Tuning: Enable easy adjustment of application settings or thresholds
  • 音量控制： 使用TrackBarEx实现带视觉反馈的音频音量调节
  • 滑块输入： 用直观的滑块替代文本输入实现数值选择
  • 进度指示： 展示可调节的进度或完成百分比
  • 范围选择： 允许用户设置最小和最大阈值
  • 参数调优： 支持轻松调整应用设置或阈值