MFC – Slider bar

Trackbar (Slider bar)

Trackbar (slider bar) bao gồm 1 slider + 1 tick mark. Chúng ta có thể sử dụng chuột hoặc bàn phím để di chuyển thanh slider. Trackbar được dùng để lựa chọn 1 giá trị xác định trong 1 dải giá trị liên tục.
Để minh họa slider bar, sau đây tôi hướng dẫn các bạn tạo ứng dụng MFC base trên source code Dialog-based để hiển thị thông số (make, model, year, image) của các hãng xe thông qua việc di chuyển slider.

Tạo Control

Tạo EditText

• Chọn [View] -> [Other Windows] -> [View Resources]
• Tạo 3 edit box để hiển thị Make (hãng xe), Model (mẫu mã: Santa fe), Year (năm sản xuất)
• Tìm Edittext trong Toolbox
• Sửa ID của 3 Editbox lần lượt là: IDC_EDIT_MAKE, IDC_EDIT_MODEL, IDC_EDIT_YEAR
• 
• Tạo các static text “MAKE”, “MODEL”, “YEAR” và groupbox “Car Inventory”
• Add biến tương ứng với các Edittext control, click chuột phải vào EditText box IDC_EDIT_MAKE, chọn Add Variable…
• Đặt tên biến “m_Make”, access: Private
• Biến “m_Make” được add  vào class CMFCAppDlg file MFCAppDlg.h và hàm DDX DDX_Control
• Tương tự add biến “m_Model” và “m_Year” cho 2 Editbox còn lại.

Tạo slider bar

• Tìm control Slider trong Toolbox, vẽ slider control lên dialog
• Đổi ID trong Properties của slider: IDC_SLIDER1 –> IDC_SLIDER_SEL, Auto Ticks: FALSE –> TRUE, Tick Marks: FALSE –> TRUE
• Gán biến “m_SliderBar” cho slider
• Khởi tạo cho slider control phạm vi từ 0 ~ 4, chia làm 4 vạch

        BOOL CMFCAppDlg::OnInitDialog()
        {
            ...
            m_SliderBar.SetRangeMin(0);
            m_SliderBar.SetRangeMax(4);
            return TRUE;
        }
        

Tạo picture control

Tìm Picture Control trong Toolbox, vẽ picture control lên dialog

Change ID = IDC_PREVIEW, type = Bitmap

Add resource bitmap

Click chuột phải vào MFCApp.rc, chọn Add Resource…

Chọn Bitmap, Chọn [Import…], browse đến folder chứa ảnh bitmap đã chuẩn bị trước (download here)

Tương tự, import các bitmap còn lại và change ID của bitmap như sau:

Bitmap	ID
bmw-x6-2019.bmp	IDB_BMW_X6
Ford-Everest-2019.bmp	IDB_FORD_EVEREST
Honda-Accord-2019.bmp	IDB_HONDA_ACCORD
Huyndai-Santafe-2019.bmp	IDB_HUYNDAI_SANTAFE
Toyota-Corolla-2019.bmp	IDB_TOYOTA_COROLLA

Xử lí sự kiện di chuyển slider

Khi di chuyển slider, Windows OS gửi message WM_HSCROLL cho application. Chúng ta, cần add thêm handler xử lí message WM_HSCROLL như sau:

Sau khi Add Handler, hàm CMFCAppDlg::OnHScroll() đượcc tạo ra trong file MFCAppDlg.cpp

void CMFCAppDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)
{
    // TODO: Add your message handler code here and/or call default
    CDialogEx::OnHScroll(nSBCode, nPos, pScrollBar);
}

Chúng ta cần phải add thêm Invalidate() để thực hiện re-draw lại screen application. Khi đó, Windows OS gửi message WM_PAINT và được xử lí ở hàm CMFCAppDlg::OnPaint(). Trong hàm OnPaint(), add thêm xử lí lấy vị trí của ticker trên slider bar, set text lên edittext make, mode, year và hiển thị bitmap tương ứng lên picture control.

void CMFCAppDlg::OnPaint()
{
    CBitmap Bmp;
    int CurPos = m_SliderBar.GetPos();
    m_Make.SetWindowTextW(car_arr[CurPos].make);
    m_Model.SetWindowTextW(car_arr[CurPos].model);
    m_Year.SetWindowTextW(car_arr[CurPos].year);
    Bmp.LoadBitmap(car_arr[CurPos].bmp_id);
    m_Picture.SetBitmap(Bmp);
    UpdateData(FALSE);
    ...
}

Source Code

Download

Demo