# wxWidgets 中的自定義小部件 > 原文： [http://zetcode.com/gui/wxwidgets/customwidgets/](http://zetcode.com/gui/wxwidgets/customwidgets/) 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滾動條，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 wxWidgets 有許多小部件； 客戶程序員創建了更多專門的小部件。 使用工具箱提供的繪圖工具創建自定義窗口小部件。 有兩種可能：程序員可以修改或增強現有的小部件，或者可以從頭開始創建自定義小部件。 ## 刻錄小部件 這是我們從頭開始創建的小部件的示例。 可以在各種媒體刻錄應用（例如 Nero 刻錄 ROM）中找到此小部件。 `widget.h` ```cpp #ifndef WIDGET_H #define WIDGET_H #include <wx/wx.h> class Widget : public wxPanel { public: Widget(wxPanel *parent, int id ); wxPanel *m_parent; void OnSize(wxSizeEvent& event); void OnPaint(wxPaintEvent& event); }; #endif ``` `widget.cpp` ```cpp #include <wx/wx.h> #include "widget.h" #include "burning.h" int num[] = { 75, 150, 225, 300, 375, 450, 525, 600, 675 }; int asize = sizeof(num)/sizeof(num[1]); Widget::Widget(wxPanel *parent, int id) : wxPanel(parent, id, wxDefaultPosition, wxSize(-1, 30), wxSUNKEN_BORDER) { m_parent = parent; Connect(wxEVT_PAINT, wxPaintEventHandler(Widget::OnPaint)); Connect(wxEVT_SIZE, wxSizeEventHandler(Widget::OnSize)); } void Widget::OnPaint(wxPaintEvent& event) { wxFont font(9, wxFONTFAMILY_DEFAULT, wxFONTSTYLE_NORMAL, wxFONTWEIGHT_NORMAL, false, wxT("Courier 10 Pitch")); wxPaintDC dc(this); dc.SetFont(font); wxSize size = GetSize(); int width = size.GetWidth(); Burning *burn = (Burning *) m_parent->GetParent(); int cur_width = burn->GetCurWidth(); int step = (int) round(width / 10.0); int till = (int) ((width / 750.0) * cur_width); int full = (int) ((width / 750.0) * 700); if (cur_width >= 700) { dc.SetPen(wxPen(wxColour(255, 255, 184))); dc.SetBrush(wxBrush(wxColour(255, 255, 184))); dc.DrawRectangle(0, 0, full, 30); dc.SetPen(wxPen(wxColour(255, 175, 175))); dc.SetBrush(wxBrush(wxColour(255, 175, 175))); dc.DrawRectangle(full, 0, till-full, 30); } else { dc.SetPen(wxPen(wxColour(255, 255, 184))); dc.SetBrush(wxBrush(wxColour(255, 255, 184))); dc.DrawRectangle(0, 0, till, 30); } dc.SetPen(wxPen(wxColour(90, 80, 60))); for ( int i=1; i <= asize; i++ ) { dc.DrawLine(i*step, 0, i*step, 6); wxSize size = dc.GetTextExtent(wxString::Format(wxT("%d"), num[i-1])); dc.DrawText(wxString::Format(wxT("%d"), num[i-1]), i*step-size.GetWidth()/2, 8); } } void Widget::OnSize(wxSizeEvent& event) { Refresh(); } ``` `burning.h` ```cpp #ifndef BURNING_H #define BURNING_H #include <wx/wx.h> #include "widget.h" class Burning : public wxFrame { public: Burning(const wxString& title); void OnScroll(wxScrollEvent& event); int GetCurWidth(); wxSlider *m_slider; Widget *m_wid; int cur_width; }; #endif ``` `burning.cpp` ```cpp #include "burning.h" #include "widget.h" int ID_SLIDER = 1; Burning::Burning(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(350, 200)) { cur_width = 75; wxPanel *panel = new wxPanel(this, wxID_ANY); wxPanel *centerPanel = new wxPanel(panel, wxID_ANY); m_slider = new wxSlider(centerPanel, ID_SLIDER, 75, 0, 750, wxPoint(-1, -1), wxSize(150, -1), wxSL_LABELS); wxBoxSizer *vbox = new wxBoxSizer(wxVERTICAL); wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL); wxBoxSizer *hbox2 = new wxBoxSizer(wxHORIZONTAL); wxBoxSizer *hbox3 = new wxBoxSizer(wxHORIZONTAL); m_wid = new Widget(panel, wxID_ANY); hbox->Add(m_wid, 1, wxEXPAND); hbox2->Add(centerPanel, 1, wxEXPAND); hbox3->Add(m_slider, 0, wxTOP | wxLEFT, 35); centerPanel->SetSizer(hbox3); vbox->Add(hbox2, 1, wxEXPAND); vbox->Add(hbox, 0, wxEXPAND); panel->SetSizer(vbox); m_slider->SetFocus(); Connect(ID_SLIDER, wxEVT_COMMAND_SLIDER_UPDATED, wxScrollEventHandler(Burning::OnScroll)); Centre(); } void Burning::OnScroll(wxScrollEvent& WXUNUSED(event)) { cur_width = m_slider->GetValue(); m_wid->Refresh(); } int Burning::GetCurWidth() { return cur_width; } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "burning.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Burning *burning = new Burning(wxT("The Burning Widget")); burning->Show(true); return true; } ``` 我們在窗口底部放置一個`wxPanel`并手動繪制整個窗口小部件。 所有重要的代碼都位于小部件類的`OnPaint()`方法中。 此小部件以圖形方式顯示了介質的總容量和可供我們使用的可用空間。 小部件由滑塊控制。 自定義窗口小部件的最小值為 0，最大值為 750。如果值達到 700，則開始繪制紅色。 這表明過度燃燒。 ```cpp wxSize size = GetSize(); int width = size.GetWidth(); ... int till = (int) ((width / 750.0) * cur_width); int full = (int) ((width / 750.0) * 700); ``` 我們動態繪制小部件。 窗口越大，刻錄小部件越大。 反之亦然。 這就是為什么我們必須計算在其上繪制自定義窗口小部件的`wxPanel`的大小。 `till`參數確定要繪制的總大小。 該值來自滑塊小部件。 它占整個面積的一部分。 `full`參數確定了我們開始繪制紅色的點。 注意使用浮點算法。 這是為了達到更高的精度。 實際圖紙包括三個步驟。 我們繪制黃色或紅色和黃色矩形。 然后，我們繪制垂直線，這些垂直線將小部件分為幾個部分。 最后，我們畫出數字來表示介質的容量。 ```cpp void Widget::OnSize(wxSizeEvent& event) { Refresh(); } ``` 每次調整窗口大小時，我們都會刷新小部件。 這將導致小部件重新繪制自身。 ```cpp void Burning::OnScroll(wxScrollEvent& WXUNUSED(event)) { cur_width = m_slider->GetValue(); m_wid->Refresh(); } ``` 如果滾動滑塊的拇指，我們將獲得實際值并將其保存到`cur_width`變量中。 繪制刻錄窗口小部件時使用此值。 然后，我們使小部件重新繪制。  圖：刻錄小部件 在 wxWidgets 教程的這一部分中，我們創建了一個自定義窗口小部件。