本篇介紹如何實現多列下拉框以及用鼠標移動控件和改變控件大小，示例中包含三個組件，其中介紹了如何實現自定義屬性編輯器UITypeEditor，如何模仿Anchor屬性設置一個屬性為多個枚舉值，如何模仿ToolTip控件給其他控件添加擴展屬性。

網頁中浮動層的應用非常廣泛，但Windows程序中卻少有浮動層。難道Windows程序中不需要浮動層嗎？根據不同的需要實現相應的功能，有人會覺得直接在界面上添加控件更簡單，或者用對話窗口的方法實現是一樣的，只要實現功能就可以了。當然，解決方法有很多種，這里給出采用浮動層的實現方式。比如在ComboBox控件中下拉選擇項時，只能顯示一列，而且項數很多的時候又不能查找，用一個帶查找功能的多列下拉框會方便很多（如下圖）。

 有些地方需要顯示多行信息，但空間卻比較小，像TextBox控件的Text屬性一樣，采用一個下拉文本框來顯示和編輯，會更加靈活。

本示例包含三個組件，一個是提供下拉功能的組件DropdownComponent，一個是實現用鼠標移動控件位置的組件MovableComponent，一個是實現用鼠標調整控件大小的組件ResizableComponent。在示例中包含如何實現自定義可視化屬性設計器UITypeEditor，如何將一個屬性的值設置為多個枚舉以及分解成多個枚舉，如何實現類似ToolTip給其他控件添加屬性的功能。

下面介紹各個組件的實現原理與要點：
下拉組件DropdownComponent
實現原理
1、點擊ComboBox的下拉標志時，顯示浮動控件
2、浮動控件失去焦點時，根據標志位判斷是否隱藏控件
實現要點
1、需要將ComboBox控件的DropDownHeight屬性設置為1（設置為0無效），避免出現多余的框
2、需要調整目標控件的顯示位置，不能超出窗體的邊框
3、可以根據需要不只針對ComboBox控件，只要在一個事件處理方法中顯示浮動控件即可
該組件實現起來非常簡單，主要是處理ComboBox控件的DropDown事件，以及浮動控件的Leave事件。
首先聲明內部字段和屬性

其中的FloatControlWidthMode屬性用來指示浮動控件的寬度模式，當設置為UserDefine時，按照控件的設置尺寸顯示，當設置為AutoWidth時，調整浮動控件的寬度與下拉框的寬度相等。
下面是下拉框事件處理以及相關的方法。其中將顯示和隱藏方法重載了，一組是顯示指定的控件，一組是用于顯示外部控件，而且都設置為public。這里和之前用Label模擬網頁鏈接的組件一樣，可以根據需要選擇是否公開方法，比如用其他控件控制顯示浮動控件就必須用public。還有在顯示浮動控件時，將浮動控件添加到窗體中，這是為了避免在其他容器中，浮動控件只顯示一部分，添加到窗體后則可以完整顯示，不會被其他容器遮擋。 

下面介紹鼠標相關的兩個組件，這兩個組件有一定的關聯性。
可移動組件MovableComponent
實現原理
1、鼠標移動到指定控件上，改變鼠標樣式為可移動狀態
2、按下鼠標時記錄鼠標的當前位置
3、鼠標移動時檢測是否按下左鍵，如果按下左鍵則根據當前位置和之前記錄的位置計算位移
4、根據鼠標的位移設置控件的坐標
5、鼠標離開則恢復默認鼠標樣式
實現要點
1、被移動控件和響應鼠標操作的控件不一定是同一個，比如示例中列標題響應操作，內容區域不響應，移動的是最外層的那個Panel。需要設置兩個屬性，一個響應操作，一個被移動，兩者可以一致。
2、響應操作的控件內部子控件也要有不同的響應，比如示例中標題欄中的圖標和標題文字響應操作，但關閉按鈕不響應。這里用擴展屬性實現該功能，可以給內部控件添加一個是否響應操作的屬性，讓設置更加靈活。

可改變大小組件ResizableComponent
實現原理
1、這里將控件分成9個區域，上左、上中、上右、中左、中央、中右、下左、下中、下右。中央區域被其他8個區域包圍形成一個虛擬的邊框。邊框的寬度可以自定義，中央區域不響應操作，其他8個區域可以選擇性響應操作。
2、鼠標移動過程中檢測鼠標坐標。如果處在邊緣處，則根據不同的位置設置不同的改變大小的鼠標樣式。
3、在鼠標按下事件中記錄下當前鼠標坐標
4、鼠標移動過程中，如果鼠標左鍵按下，則根據當前位置和之前記錄的位置計算位移
5、根據鼠標位移和鼠標所處的區域，調整控件的大小和位置
6、鼠標移開時恢復默認鼠標樣式
實現要點
1、內部控件可能覆蓋邊緣，內部控件也需要處理鼠標事件。和可移動組件一樣通過擴展屬性指示內部控件是否允許響應操作。
2、可響應改變大小的位置可以自定義，實現自定義UITypeEditor，可視化設置。
3、向上或向右改變大小需要同時改變控件的位置，非對角線方向改變大小時要忽略與當前移動方向垂直的位移。

下面介紹詳細的實現過程。
枚舉：
DirectionEnum：方向枚舉，All-所有方向，Horizontal-水平方向，Vertical-垂直方向。該枚舉在移動操作和改變大小操作中都可以用到。
ResizeHandleAreaEnum：改變大小可處理區域枚舉，把需要處理改變大小的控件分成3*3的區域，除了Center區域，其他區域都允許響應鼠標操作。該枚舉變量用自定義UITypeEditor進行編輯，后面再詳細介紹。

 

MovableComponent組件的類圖和類詳細信息

MovableComponent組件包含5個屬性：

Enable：指示組件是否可用

EnableInnerControl：指示是否允許HandleControl控件的內部控件響應鼠標操作。

HandleControl：響應鼠標操作的控件，可以和被移動的控件不一致，一般是被移動控件內部的控件。

MovableControl：被移動的控件。

MoveableDirection：控件可以被移動的方向，默認為All，不限制移動方向。
該組件需要處理的鼠標事件有鼠標移入、鼠標按下、鼠標移動和鼠標離開，實現代碼如下：

另外為了實現擴展屬性，必須實現IExtenderProvider接口，關于IExtenderProvider接口的詳細介紹請參考MSDN。這里默認允許內部控件響應鼠標操作，只記錄不響應操作的內部控件。實現該接口后還要在組件上添加特性，格式為[ProvideProperty("HandleMove", typeof(Control))]。將組件放到窗體上，設置好HandleControl之后，就可以看到HandleControl的內部控件都會增加一個movableComponent1 上的 HandleMove屬性，和ToolTip控件類似。
該接口的實現如下：

實現IExtenderProvider接口后，將組件拖放到窗體上，設置相關HandleControl之后，則會為其內部控件增加HandleMove屬性，效果如下圖：


下面介紹ResizableComponent可改變大小組件的實現（類圖和類詳細信息）。
ResizableComponent組件的屬性有：
Enable：指示組件是否可用
EnableInnerControl：當內部控件覆蓋目標可縮放控件的邊緣時，是否允許內部控件響應鼠標改變大小操作
MinSize：可縮放控件可以調整的最小尺寸
ResizableControl：目標可改變大小的控件
ResizeBorderWidth：響應改變大小操作的邊框寬度，對應可縮放控件的內部虛擬邊框，當鼠標移動到這一個虛擬邊框中會改變樣式
ResizeDirection：可改變大小的方向，水平、垂直和不限制
ResizeHandleAreas：響應改變大小操作的控制區域，用自定義UITypeEditor實現。效果如下圖所示：

該組件處理目標控件的三個鼠標事件，MouseMove、MouseLeave和MouseDown。
MouseMove處理方法中，檢測鼠標的坐標所處的區域，然后根據區域和允許調整大小的方向設置不同的鼠標樣式。
如果鼠標左鍵按下，則檢測鼠標的位移量，再根據所處的區域調整控件的大小和位置。
MouseDown處理方法中，記錄下鼠標的位置，供調整大小時計算位移量。
MouseLeave處理方法中，恢復鼠標樣式。

其他方法都是輔助檢測和調整坐標用的。下面介紹如何實現自定義的UITypeEditor。這里定義了一個枚舉ResizeHandleAreaEnum，用來標識調整大小的區域。因為設置的響應操作的區域允許有多個，所以這些枚舉值必須都是2的次方數，在二進制中表示則都只有一位是1的，這樣就可以通過位操作來解析值了。

枚舉定義好之后，在項目中添加一個自定義控件，在其中放置8個CheckBox，設置Appearance屬性為Button外觀。然后排布為虛擬邊框的效果，如下圖：

該控件主要是將ResizeHandleAreaEnum枚舉值和CheckBox控件的選中狀態對應起來，通過位操作來解析和設置響應操作的區域枚舉，內部代碼如下：

為了讓該枚舉值在PropertyGrid中編輯時顯示自定義的UI界面，需要繼承UITypeEditor類，關于UITypeEditor的具體介紹請參考MSDN，這里的實現代碼如下：

在該枚舉上添加Editor特性[Editor(typeof(ResizeHandleAreaUITypeEditor), typeof(System.Drawing.Design.UITypeEditor))]，之后只要使用到該屬性，在PropertyGrid中顯示的就是UI編輯界面。

ResizableComponent組件也用到了擴展屬性，和上面的MovableComponent組件的實現方法類似，這里不再介紹。

示例中用一個下拉框調用一個浮動層，浮動層的標題欄可以拖動，但標題欄邊框不響應改變大小操作。因為將標題欄的相關控件的HandleResize屬性設置為了False，否則會造成移動的同時改變大小。要實現本篇開頭給出的多列下拉框的效果，可以做一個自定義控件，然后綁定數據源即可。至于數據項的綁定，會在以后的示例中介紹到。
另外這里有個小bug，當快速移動鼠標時，改變大小和移動操作都會產生滯后的效果，希望有解決方法的朋友留言。

示例代碼下載： https://files.cnblogs.com/conexpress/TestMouseComponent.zip