摘要：了解如何利用基本的 gdi 功能，從而通過 datagrid 控件獲得可視化效果。通過跨越托管邊界進行調用，可以利用本機 gdi 功能來執行屏幕捕獲，并最終獲得拖放體驗。
下載 columndragdatagrid.msi 文件。
本頁內容
簡介
入門
screenimage 類
draggeddatagridcolumn 類
columndragdatagrid 類
列跟蹤
重寫 datagrid 的 onpaint 方法
小結
簡介
幾個月以前，當我初到 microsoft 工作時，我的經理走進我的辦公室，并且向我詳細說明了我將在隨后兩個星期內將要從事的一個項目。我需要設想出一個應用程序，用于為 msdn 內容策劃人員整合衡量標準。其中一個功能要求是需要一個類似于 datagrid 的控件，該控件使用戶可以在將數據導出到 microsoft excel 電子表格之前，按照他們喜歡的順序排列所有列。他在離開我的辦公室之前說的最后一句話是：“將它變為有趣的用戶體驗。”
我知道為了能夠重新排列 datagrid 列，我必須操縱 datagrid 的 datagridcolumnstyle 屬性以反映新的列排序，但這并沒有什么吸引人之處。我想要的是對整個拖動操作實現可視化表示。我在開始時使用了一些 system.drawing 功能，并且達到了能夠在屏幕間拖動圖形的程度。我斷定我需要讓它更進一步。我可以讓它看起來更像是用戶在拖動列，而不是僅僅在 datagrid 繪圖表面上拖動枯燥乏味的矩形進行繪制。我對本機 gdi 庫進行了一番尋根究底，經過幾個小時的試驗后，我終于弄清楚為了實現這一技巧而需要完成的工作。
圖 1. 拖動操作
返回頁首
入門
我需要做的第一件事是弄清如何獲得將要拖動列的屏幕快照。我完全清楚自己需要什么以及希望做什么，但是我不知道如何 去做。在發現 system.drawing 命名空間下的類沒有為我提供執行屏幕捕獲所需的功能之后，我瀏覽了本機 gdi 庫并且發現 bitblt 函數正是我在尋找的東西。
下一步是編寫該函數的托管包裝。我將在本文中討論的第一點是，我該如何實現 screenimage 類。
返回頁首
screenimage 類
為了跨越互操作邊界進行調用，我們需要聲明非托管函數并且指明它們都來自哪些庫，以便 jit 編譯器在運行時知道它們的位置。在完成這一工作后，我們只需像調用托管方法一樣調用它們，就象下面的代碼塊所示。
public sealed class screenimage {
[dllimport("gdi32.dll")]
private static extern bool bitblt( intptr
handlertodestinationdevicecontext, int x, int y, int nwidth, int nheight,
intptr handlertosourcedevicecontext, int xsrc, int ysrc, int opcode);
[dllimport("user32.dll")]
private static extern intptr getwindowdc( intptr windowhandle );
[dllimport("user32.dll")]
private static extern int releasedc( intptr windowhandle, intptr dc );
private static int srccopy = 0x00cc0020;
public static image getscreenshot( intptr windowhandle, point location, size size ) {
... }
}
該類只公開一個方法 — getscreenshot，它是一個靜態方法，返回一個含有與 windowhandle、location 和 size 參數相對應的顏色數據的圖形對象。下一個代碼塊顯示如何實現該方法。
public static image getscreenshot( intptr windowhandle, point location, size size ) {
image myimage = new bitmap( size.width, size.height );
using ( graphics g = graphics.fromimage( myimage ) ) {
intptr destdevicecontext = g.gethdc();
intptr srcdevicecontext = getwindowdc( windowhandle );
// todo: throw exception
bitblt( destdevicecontext, 0, 0, size.width, size.height,
srcdevicecontext, location.x, location.y, srccopy );
releasedc( windowhandle, srcdevicecontext );
g.releasehdc( destdevicecontext );
} // dispose the graphics object
return myimage;
}
讓我們逐行地考察一下方法實現。我做的第一件事是創建一個尺寸與參數設置的大小相對應的新位圖。
image myimage = new bitmap( size.width, size.height );
下面的代碼行檢索與剛剛創建的新位圖相關聯的繪圖表面。
using ( graphics g = graphics.fromimage( myimage ) ) { ... }
c# using 關鍵字定義了一個范圍，在該范圍的末尾將處理 graphics 對象。因為 system.drawing 命名空間中的所有類都是本機 gdi+ api 的托管包裝，所以我們幾乎總是在處理非托管資源，并且因此需要確保丟棄不再需要其服務的資源。該過程稱為確定性終止，通過該過程將對象使用的資源以其他目的立即進行重新分配，而不是等待垃圾回收器到訪來完成它該做的工作。每當您在處理實現了 idisposable 接口的對象（如，這里使用的 graphics 對象）時，都應該遵守這種習慣。
我檢索了源和目標設備上下文的句柄，以便可以繼續轉換顏色數據。源是與參數設置的 windowhandle 句柄相關聯的設備上下文，而目標是先前創建的位圖中的設備上下文。
intptr srcdevicecontext = getwindowdc(windowhandle);
intptr destdevicecontext = g.gethdc();
提示設備上下文是由 windows 在內部維護的 gdi 數據結構，它定義了一組圖形對象以及影響與這些對象相關的輸出的圖形模式。可以將其視為 windows 提供的、可在上面繪圖的畫布。gdi+ 提供了三種不同的繪圖表面：窗體（通常稱為顯示、打印機和位圖）。在本文中，我們使用窗體和位圖繪圖表面。
現在，我們具有一個已定義的 bitmap 對象 (myimage) 和一個表示該對象的畫布（它在這一執行時刻是透明的）的設備上下文。本機 bitblt 方法需要我們要向其復制位的畫布部分的坐標和大小，以及我們要從源設備上下文上開始復制位的坐標。該方法還需要一個光柵操作代碼值，以便定義位塊的轉換方式。
這里，我將目標設備上下文的起始坐標設置為左上角，并且將光柵操作代碼值設置為 srccopy（它表示要將源直接復制到目標）。十六進制等效值 (00x00cc0020) 可從 gdi 頭文件中檢索獲得。
bitblt( destdevicecontext, 0, 0, size.width, size.height,
srcdevicecontext, location.x, location.y, srccopy );
一旦用完設備上下文，我們就需要將其釋放。如果不這樣做，將導致無法將該設備上下文用于隨后的請求，并且可能導致引發運行時異常。
releasedevicecontext( windowhandle, destdevicecontext );
g.releasehdc( srcdevicecontext );
我確認了 screenimage 類能夠按預期工作，然后，我需要做的下一件事情是創建一個簡單的數據結構，以便幫助我跟蹤與被拖動的列相關的所有數據。
返回頁首
draggeddatagridcolumn 類
draggeddatagridcolumn 類是一個數據結構，用于監視所拖動列的各種狀態，包括初始位置、當前位置、圖像表示形式以及相對于該列的初始起點的光標位置。有關所有參數的詳細說明，請參閱 draggeddatagridcolumn.cs 中的代碼。
提示如果類封裝了實現 idisposable 的對象，那么您就可能間接抓住非托管資源。在這種情況下，類還應該實現 idisposable 接口并且對每個可處置的對象調用 dispose() 方法。draggeddatagridcolumn 類封裝了一個 bitmap 對象，該對象顯式抓住非托管資源，因此我必須完成這一步驟。
在處理好這一問題之后，我就能夠集中精力來解決有關難題的最主要部分了，即操縱 datagrid 控件以獲得我需要的可視效果。
返回頁首
columndragdatagrid 類
datagrid 控件是一個功能強大的重量級控件，但它本身不會向我們提供拖放列的能力，所以我必須擴展它并且自己來添加該功能。我處理了三個不同的鼠標事件，并且重寫了 datagrid 的 onpaint 方法來滿足我的所有繪圖需要。
首先，讓我們看看所有用于跟蹤應該在何處以及如何進行繪制的成員字段。
成員字段 定義
m_initialregion
一個 draggeddatagridcolumn 對象，表示有關當前正在拖動的列的所有相關內容。我將在本文后面詳細討論 draggeddatagridcolumn 類的細節。
m_mouseovercolumnrect
一個 rectangle 結構，用于標識一個矩形區域，該區域表示鼠標光標當前正在哪個列上方懸停。
m_mouseovercolumnindex
鼠標光標當前正在其上方懸停的列的索引。
m_columnimage
在啟動拖放操作時包含列的位圖表示形式的 bitmap 對象。
m_showcolumnwhiledragging
一個 boolean 值，表示拖動列時是否應該顯示捕獲到的列圖像。通過 showcolumnwhiledragging 屬性公開。
m_showcolumnheaderwhiledragging
一個 boolean 值，表示當列被拖動時是否應該顯示該列的頭部。這是通過 showcolumnheaderwhiledragging 屬性公開的。
該類中的唯一構造函數是一個不帶參數的構造函數，并且相當簡單。但是，我覺得有一行代碼值得一提：
this.setstyle( controlstyles.doublebuffer, true );
windows 中的繪圖過程分為兩步。當應用程序進行繪圖請求時，系統將生成繪圖消息（先是 wm_erasebkgnd，然后是 wm_paint）。這些消息被發送到應用程序消息隊列中，然后，應用程序將在這里檢查這些消息并將它們發送到適當的控件以便進行處理。wm_erasebkgnd 消息的默認處理方式是用當前窗口背景色填充該區域。隨后將處理 wm_paint，這會完成所有前景繪圖。當您的操作序列涉及到清除背景以及在前景中繪圖時，您將產生被稱為閃爍 的令人不快的效果。值得慶幸的是，可以通過使用雙緩沖 來減輕這一效果。
對于雙緩沖，您有兩種不同的可以寫入的緩沖。一種是存儲在視頻 ram 中的可見的屏幕緩沖；另一種是不可見的離屏緩沖，它由內部 graphicsbuffer 對象表示，并且存儲在系統 ram 中。當繪圖操作啟動時，將在上述 graphicsbuffer 對象上呈現所有圖形對象。一旦系統確定該操作已完成，就會快速同步這兩個緩沖區。
根據 .net framework 文檔資料，為了在應用程序中實現雙緩沖，您需要將 allpaintinginwmpaint、doublebuffer 和 userpaintcontrolstyle 位設置為真。這里，我只需慎重考慮 doublebuffer 位。基類 datagrid 已經將 allpaintinginwmpaint 和 userpaint 位設置為真。
注上面提到的另外兩個 controlstyle 位被定義為：
userpaint：該位設置為真時，會告訴 windows 應用程序將完全負責該特定窗口（控件）的所有繪圖。這意味著您將處理 wm_erasebkgnd 和 wm_paint 消息。如果該位被設置為假，則應用程序仍將掛鉤 wm_paint 消息，但它會將該消息發送回系統以進行處理，而不會執行任何繪圖操作。當發生這種情況時，系統將嘗試呈現該窗口，但是因為它不了解有關該窗口的任何信息，所以它的工作通常不會令人感到滿意。
allpaintinginwmpaint：正如該位的名稱所表明的那樣，當該位被設置為真時，所有繪圖都將由控件的 wmpaint 方法進行處理。即使掛鉤了 wm_erasebkgnd 消息，該消息也將被忽略，并且永遠不會調用控件的 onerasebackground 方法。
在深入研究該類的其余部分之前，需要回顧兩個重要的概念。
無效
當您使控件的特定區域無效時，該區域將被添加到控件的更新區域，以便告訴系統在下一個繪圖操作過程中重新繪制哪個區域。如果更新區域未定義，則將重新繪制整個控件。
圖 2. 觸發繪圖操作前后無效區域的可視表示形式。在左側，帶有虛線邊框的半透明灰色方形表示已定義的無效區域。右側的方形顯示了在執行繪圖操作之后的外觀。
正如前面提到的那樣，當調用控件的無效方法時，系統將生成 wm_paint 消息并將其發送給控件。在收到該消息以后，該控件將引發 paint 事件；如果已經注冊了偵聽該事件的處理程序，則會將該事件添加到該控件的事件處理隊列的后面。
需要注意的是，被引發的 paint 事件并不總是能夠立即得到處理。這有很多原因，其中最重要的一點是 paint 事件涉及到繪圖中開銷比較大的操作之一，并且通常是最后得到處理的事件。
網格樣式
datagridtablestyle 定義了將 datagrid 繪制 到屏幕上的方式。即使它包含的屬性類似于 datagrid 的屬性，它們也是互相排斥的。許多人錯誤地認為更改同名屬性（如 datagrid 的 rowheadersvisible 屬性）也會更改 datagridtablestyle 的 rowheadersvisible 屬性的值。結果，當情況沒有按預期的那樣發展時，需要花費始料未及的時間來進行調試（不要擔心，我也會犯這樣的錯誤）。
您可以創建一個包含不同表格樣式的集合，并且將它們交替用于不同的數據實體和源。
每個 datagridtablestyle 都包含一個 gridcolumnstylescollection，它是在將數據綁定到 datagrid 控件時自動創建的 datagridcolumnstyles 對象的集合。這些對象是 datagridboolcolumn、datagridtextboxcolumn 或由第三方實現的列（它們都派生自 datagridcolumnstyle）的實例。如果您需要一個包含標簽甚至圖像的列，則您將必須通過創建 datagridcolumnstyle 的子類來創建一個自定義類。
提示您需要重寫 ondatasource 方法（該方法在 datagrid 控件被綁定到數據源時調用）。這樣，您就可以使用多個樣式，并且將它們的映射名稱與 datagrid 的 datamember 屬性值（該值在控件被綁定到數據源時設置）相關聯。
返回頁首
列跟蹤
絕大部分的列跟蹤功能都發生在 mousedown、mousemove 和 mouseup 事件處理程序中。在下面的段落中，我將重點討論這三個事件處理程序，并且對比較重要的代碼段進行解釋。這些處理程序所利用的 helper 方法未予討論。但是，如果看了代碼，您就會發現我已經提供了這些方法的摘要。
mousedown
當用戶在網格上方單擊鼠標時，我們需要做的第一件事就是確定單擊鼠標的位置。為了啟動拖動操作，必須在列標頭的上方單擊光標。如果證明該條件為真，則將收集一些列信息。我們需要知道該列的起點、寬度和高度，以及相對于列起點的鼠標光標位置。該信息用于建立在列被拖動時要跟蹤的兩個不同的列區域。
private void columndragdatagrid_mousedown(object sender, mouseeventargs e) {
datagrid.hittestinfo hti = this.hittest( e.x, e.y );
if ( ( hti.type & datagrid.hittesttype.columnheader ) != 0 &&
this.m_draggedcolumn == null ) {
int xcoordinate = this.getleftmostcolumnheaderxcoordinate( hti.column );
int ycoordinate = this.gettopmostcolumnheaderycoordinate( e.x, e.y );
int columnwidth = this.tablestyles[0].gridcolumnstyles[hti.column].width;
int columnheight = this.getcolumnheight( ycoordinate );
rectangle columnregion = new rectangle( xcoordinate, ycoordinate, columnwidth, columnheight );
point startinglocation = new point( xcoordinate, ycoordinate );
point cursorlocation = new point( e.x - xcoordinate, e.y - ycoordinate );
size columnsize = size.empty;
...
}
...
}
圖 3. 列起點、列標頭高度（通過 getcolumnheaderheight 方法計算）、列高度、列寬度和光標位置示意圖
該事件處理程序的其余部分相當簡單。執行了一個條件計算以了解是否已經將 showcolumnswhiledragging 或 showcolumnheaderwhiledragging 屬性設置為真。如果是，則計算列大小并且調用 screenimage 的 getscreenshot 方法。我傳遞了 datagrid 控件的句柄（記住，控件是子窗口）、起始坐標和列大小，而該方法返回一個包含所需捕獲區域的圖形對象。然后，所有信息都被存儲在一個 draggeddatagridcolumn 對象中。
private void columndragdatagrid_mousedown(object sender, mouseeventargs e) {
...
if ( ( hti.type & datagrid.hittesttype.columnheader ) != 0 &&
this.m_draggedcolumn == null ) {
...
if ( showcolumnwhiledragging || showcolumnheaderwhiledragging ) {
if ( showcolumnwhiledragging ) {
columnsize = new size( columnwidth, columnheight );
} else {
columnsize = new size( columnwidth, this.getcolumnheaderheight( e.x, ycoordinate ) );
}
bitmap columnimage = ( bitmap ) screenimage.getscreenshot(
this.handle, startinglocation, columnsize );
m_draggedcolumn = new draggeddatagridcolumn( hti.column,
columnregion, cursorlocation, columnimage );
} else {
m_draggedcolumn = new draggeddatagridcolumn( hti.column,
columnregion, cursorlocation );
}
m_draggedcolumn.currentregion = columnregion;
}
...
}
mousemove
每當鼠標光標在 datagrid 上方移動時，都會引發 mousemove 事件。在處理該事件的過程中，我首先跟蹤被拖動的列當前在其上方懸停的列，以便可以向用戶提供一些可視反饋。其次，我跟蹤該列的新位置并發出無效指令。
讓我們進一步考察一下代碼。我需要做的第一件事是確保列被拖動，然后我通過從相對于控件的鼠標坐標中減去相對于列起點的鼠標坐標來獲得該列的 x 坐標（圖 4，刻度線標志 #1）。這可以為我提供該列的 x 坐標。因為 y 坐標永遠不會更改，所以我不必花費功夫來檢查它。
private void columndragdatagrid_mousemove(object sender, mouseeventargs e) {
datagrid.hittestinfo hti = this.hittest( e.x, e.y );
if ( m_draggedcolumn != null ) {
int x = e.x - m_draggedcolumn.cursorlocation.x;
...
}
}
圖 4. 刻度線標志 #1 顯示了 m_draggedcolumn.cursorlocation.x 中存儲的值。該值從當前光標位置（其坐標相對于控件）中減去。
然后，我檢查光標是否懸停在單元格的上方（列標頭也被視為單元格）。如果不是，則我假設用戶希望中止拖動操作。
private void columndragdatagrid_mousemove(object sender, mouseeventargs e) {
...
if ( m_draggedcolumn != null ) {
if ( hti.column >= 0 ) {
...
} else {
invalidatecolumnarea();
resetmemberstodefault();
}
}
}
接下來，我希望向用戶提供某種反饋，以便他們知道所拖動的列將在他們釋放鼠標按鍵時放置到何處。
這是通過 m_mouseovercolumnindex 成員字段進行跟蹤的，該字段存儲了以下列的索引：該列的邊界包含光標在處理最后一個 mousemove 事件之后的當前位置。如果該值不同于點擊測試為我們提供的列索引，則用戶正在將鼠標懸停在不同列的上方。如果是這樣，則將使 m_mouseovercolumnrect 成員字段指示的區域無效，并且記錄新區域的坐標。然后，使該新區域無效，以便 windows 知道這一等待它關注區域的新繪圖指令。
private void columndragdatagrid_mousemove(object sender, mouseeventargs e) {
...
if ( m_draggedcolumn != null ) {
...
if ( hti.column >= 0 ) {
if ( hti.column != m_mouseovercolumnindex ) {
// note: moc = mouse over column
int mocx = this.getleftmostcolumnheaderxcoordinate( hti.column );
int mocwidth =
this.tablestyles[0].gridcolumnstyles[hti.column].width;
// indicate that we want to invalidate the old rectangle area
if ( m_mouseovercolumnrect != rectangle.empty ) {
this.invalidate( m_mouseovercolumnrect );
}
// if the mouse is hovering over the original column, we do not want to
// paint anything, so we negate the index.
if ( hti.column == m_draggedcolumn.index ) {
m_mouseovercolumnindex = -1;
} else {
m_mouseovercolumnindex = hti.column;
}
m_mouseovercolumnrect = new rectangle( mocx,
m_draggedcolumn.initialregion.y, mocwidth,
m_draggedcolumn.initialregion.height );
// invalidate this area so it gets painted when onpaint is called.
this.invalidate( m_mouseovercolumnrect );
}
...
} else { ... }
}
}
隨后，將變換焦點以有助于跟蹤被拖動列的位置。我需要弄清楚是向左還是向右拖動它，以便我可以獲得最左邊的 x 坐標。在獲得該值后，將使列的舊區域和新區域無效，并且將與新位置相關的數據存儲在 m_draggedcolumn 中。
private void columndragdatagrid_mousemove(object sender, mouseeventargs e) {
...
if ( m_draggedcolumn != null ) {
...
if ( hti.column >= 0 ) {
...
int oldx = m_draggedcolumn.currentregion.x;
point oldpoint = point.empty;
// column is being dragged to the right
if ( oldx < x ) {
oldpoint = new point( oldx - 5, m_draggedcolumn.initialregion.y );
// to the left
} else {
oldpoint = new point( x - 5, m_draggedcolumn.initialregion.y );
}
size sizeofrectangletoinvalidate = new size( math.abs( x - oldx )
+ m_draggedcolumn.initialregion.width +
( oldpoint.x * 2 ), m_draggedcolumn.initialregion.height );
this.invalidate( new rectangle( oldpoint, sizeofrectangletoinvalidate ) );
m_draggedcolumn.currentregion = new rectangle( x,
m_draggedcolumn.initialregion.y,
m_draggedcolumn.initialregion.width, m_draggedcolumn.initialregion.height );
} else { ... }
}
}
mouseup
當用戶在單元格上方松開鼠標按鍵時，將執行條件計算，以確保將拖動的列放置到除了其發送方之外的列的上方。如果列索引中表達式計算為真（該列索引不是產生它的列的索引），則切換列。否則，將重新繪制該網格。
private void columndragdatagrid_mouseup(object sender, mouseeventargs e) {
datagrid.hittestinfo hti = this.hittest( e.x, e.y );
// is column being dropped above itself? if so, we don't want
// to do anything
if ( m_draggedcolumn != null && hti.column != m_draggedcolumn.index ) {
datagridtablestyle dgts = this.tablestyles[this.datamember];
datagridcolumnstyle[] columns = new datagridcolumnstyle[dgts.gridcolumnstyles.count];
// note: csi = columnstyleindex
for ( int csi = 0; csi < dgts.gridcolumnstyles.count; csi++ ) {
if ( csi != hti.column && csi != m_draggedcolumn.index ) {
columns[csi] = dgts.gridcolumnstyles[csi];
} else if ( csi == hti.column ) {
columns[csi] = dgts.gridcolumnstyles[m_draggedcolumn.index];
} else {
columns[csi] = dgts.gridcolumnstyles[hti.column];
}
}
// update tablestyle
this.suspendlayout();
this.tablestyles[this.datamember].gridcolumnstyles.clear();
this.tablestyles[this.datamember].gridcolumnstyles.addrange( columns );
this.resumelayout();
} else {
invalidatecolumnarea();
}
resetmemberstodefault();
}
在跨越了該功能的難點之后，觸發必要的繪圖操作將非常容易。
返回頁首
重寫 datagrid 的 onpaint 方法
迄今為止，您可能已經注意到沒有在任何鼠標事件處理程序中執行任何繪圖邏輯。這完全歸結為個人喜好。我已經看到其他開發人員將他們的繪圖邏輯與其余邏輯和并在一起使用，但我發現將所有繪圖邏輯都放在 onpaint 方法或 paint 事件處理程序中會更為簡單、更有條理。
需要重寫 datagrid 的 onpaint 方法，以便容納附加的繪圖操作。首先要確保調用基本的 onpaint 方法，以便繪制基礎 datagrid。這為我提供了可用來進行繪制的畫布。
請記住，當您在畫布上繪制對象時，z 排序要視對象的繪制順序而定。了解這一點以后，我們需要首先繪制最底層的形狀。
得到繪制的第一個圖形是用于指示正在拖動哪個列的矩形（圖 5，刻度線標志 #1）。
圖 5. 不同的繪制步驟
通過使用 graphics 對象的 m_draggedcolumn 方法，我們在產生拖動操作的列的上方繪制了一個矩形。該區域信息是從 draggeddatagridcolumn 對象中檢索到的。使用了半透明的畫筆，以便使底層的列仍然可見。然后，在上述矩形的邊框周圍繪制了一個黑色矩形，以使其具有更為完整的修飾。
protected override void onpaint( painteventargs e ) {
...
if ( m_draggedcolumn != null ) {
solidbrush blackbrush = new solidbrush( color.fromargb( 255, 0, 0, 0 ) );
solidbrush darkgreybrush = new solidbrush( color.fromargb( 150, 50, 50, 50 ) );
pen blackpen = new pen( blackbrush, 2f );
g.fillrectangle( darkgreybrush, m_draggedcolumn.initialregion );
g.drawrectangle( blackpen, region );
...
}
}
gdi 中的顏色被分解為四個 8 位的成分，其中的三個成分代表三原色：紅色、綠色和藍色。alpha 成分（同樣是 8 位）確定了顏色的透明度 — 它影響顏色與背景的融合方式。通過 color.fromargb 方法可以創建具有特定值的顏色。
color.fromargb( 150, 50, 50, 50 ) // dark grey with alpha translucency level set to 150
我在本文前面提到的列反饋是以半透明的淺灰色矩形的形式完成的（圖 5，刻度線標志 #2）。首先，我檢查列索引以確保它不是 -1，然后使用 m_mouseovercolumnrect 中存儲的矩形區域數據在該列上方填充一個矩形。
protected override void onpaint( painteventargs e ) {
...
if ( m_draggedcolumn != null ) {
// user feedback indicating which column the dragged column is over
if ( this.m_mouseovercolumnindex != -1 ) {
using ( solidbrush b = new solidbrush( color.fromargb( 100, 100, 100, 100 ) ) ) {
g.fillrectangle( b, m_mouseovercolumnrect );
}
}
}
}
下一個焦點區域是正在拖動的列。如果用戶已經選擇在拖動操作發生時顯示列或列標頭，則繪制該圖像。捕獲的圖像存儲在 m_draggedcolumn 中，并且可以通過 columnimage 屬性訪問。
protected override void onpaint( painteventargs e ) {
...
if ( m_draggedcolumn != null ) {
...
// draw bitmap image
if ( showcolumnwhiledragging || showcolumnheaderwhiledragging ) {
g.drawimage( m_draggedcolumn.columnimage,
m_draggedcolumn.currentregion.x, m_draggedcolumn.currentregion.y );
}
...
}
}
最后，填充一個半透明矩形以代表拖動操作。這將使用與第一個圖形類似的方式完成。從 m_draggedcolumn 中讀取列區域信息。然后，再繪制一個矩形以進一步增強前面的矩形（圖 5，刻度線標志 #3）。
protected override void onpaint( painteventargs e ) {
...
if ( m_draggedcolumn != null ) {
...
g.fillrectangle( filmfill, m_draggedcolumn.currentregion.x,
m_draggedcolumn.currentregion.y, m_draggedcolumn.currentregion.width,
m_draggedcolumn.currentregion.height );
g.drawrectangle( filmborder, new rectangle(
m_draggedcolumn.currentregion.x, m_draggedcolumn.currentregion.y +
convert.toint16( filmborder.width ), width, height ) );
...
}
}
返回頁首
小結
在本文中，我向您說明了我如何能夠利用一些基本 gdi 功能，通過 datagrid 控件獲得可視化效果。通過跨越托管邊界進行調用，我利用本機 gdi 功能來執行屏幕捕獲，并且將該功能與 system.drawing 中的繪圖功能結合使用以產生吸引人的拖放體驗。
chris sano 是一位使用 msdn 的軟件設計工程師。在狂熱地編寫代碼之余，他喜歡打冰球并觀看紐約 yankees 隊和費城 flyers 隊的比賽。如果您希望就本文與 chris 聯系，則可以通過 [email protected] 與他聯系。
