wxPython自定義控制元件

由於工作需要使用wxPython實現一個美觀的新增資料介面，這個介面上的文字框要像html中文字框一樣可以設定邊框顏色，和字型垂直居中。

當時也看了許多資料，發現wxpython並沒有提供這樣的修改方法，後來，花了一段時間，想出基於wxpython,自定義文字框控制元件。

具體思路如下：

1、 去除現有wxpython 的wx.TextCtrl控制元件的邊框，再使用wx.StaticText給wx.TextCtrl做一個邊框。（要相信，介面上看到的東西，只是開發人想讓你看到的）

2、 這個邊框需要使用兩個wx.StaticText控制元件，為啥要用兩個？

a)      模擬邊框是需要色差的，由於色差存在，所以看得像一個邊框。

b)      先使用一個wx.StaticText控制元件，設定一個黑色背景色，再在這個wx.StaticText控制元件上新增一個白色背景，並且長寬小於父親2px的wx.StaticText控，這個介面上就能1px的黑色線條。這就是我們需要的邊框，並且這個邊框可以邊框顏色和大小。（只需要改父親控制元件的背景設，和子wx.StaticText的大小就行）

c)      再同理，來把無邊框的wx.TextCtrl放入這個邊框中，設定位置，就得到了自定義的可以改變邊框顏色和文字垂直居中的文字框

                                                 3. 合成示意圖

自定義控制元件程式碼：

import wx


class MyText:
    """自定義文字框"""
    def __init__(self,parent,pos,size=(80,36),readOnly= False):
        self.defaultFontSize= 10 #預設字型大小
        self.TextCtrlColor = 'white' #文字框的背景色
        self.defaultBorderColoe = '#EAEAEA' #預設邊框顏色

        self.textCtrl, self.border,self.bg = self.__CreateTextCtrl(parent,pos,size,self.defaultBorderColoe,readOnly)

    def __CreateTextCtrl(self,parent,pos,size,borderColor,readOnly=True, borderSize=1):
        """建立文字框"""
        border = wx.StaticText(parent, -1, '', size=size, pos=pos) #建立邊框
        border.SetBackgroundColour(borderColor)   #設定邊框要展現的顏色
        bg = wx.StaticText(border, -1, '', size=((size[0]-borderSize*2), (size[1]-borderSize*2))
                               , pos=(borderSize,borderSize))
        if readOnly:       #設定文字框是否只讀，還有去自帶的邊框
            style = wx.TE_READONLY|wx.NO_BORDER
        else:
            style = wx.NO_BORDER

        textCtrl = wx.TextCtrl(bg, -1, size=((size[0]-10),self.defaultFontSize*2)
                               , pos=(5,(size[1]-2*self.defaultFontSize-borderSize*2)/2),style =style)
        font = wx.Font(self.defaultFontSize,wx.DEFAULT,wx.NORMAL,wx.NORMAL,False,'微軟雅黑')
        textCtrl.SetFont(font)

        if readOnly:
            bg.SetBackgroundColour('rgb(240,240,240)')
            self.TextCtrlColor = 'rgb(240,240,240)'
        else:
            bg.SetBackgroundColour(textCtrl.GetBackgroundColour())
            self.TextCtrlColor = textCtrl.GetBackgroundColour()
        bg.Bind(wx.EVT_LEFT_UP,self.__ClickEvent)
        return textCtrl,border,bg

    def __ClickEvent(self,evt):
        """點選時焦點設定在文字框上"""
        self.textCtrl.SetFocus()

    def SetValue(self,value):
        if not value:
            value = ''
        self.textCtrl.SetValue(value)

    def GetValue(self):
        return self.textCtrl.GetValue()

    def SetBorderColor(self,color):
        self.border.SetBackgroundColour(color)
        self.border.Refresh()

    def SetFontColor(self,color):
        self.textCtrl.SetForegroundColour(color)
        self.textCtrl.SetBackgroundColour(self.TextCtrlColor)

    def SetFont(self,font):
        self.textCtrl.SetFont(font)

    def SetBackgroundColour(self,color):
        self.bg.SetBackgroundColour(color)
        self.textCtrl.SetBackgroundColour(color)
        self.textCtrl.Refresh()

 測試程式碼：

# coding:utf-8
import wx

from wxpython import Mywxpython

app = wx.App()
frame = wx.Frame(None, title="Gui Test Editor", pos=(1000, 200), size=(500, 400))

panel = wx.Panel(frame)

path_text = wx.TextCtrl(panel, size=(260, 36))

my_text = Mywxpython.MyText(panel,pos=(10, 50),size=(260,36))
my_text1 = Mywxpython.MyText(panel,pos=(10, 100),size=(260,36),readOnly=True)
my_text.SetBorderColor('red')
frame.Show()
app.MainLoop()

結果圖：上面的自帶的控制元件，下面紅色邊框是自定義的