利用CustomDrawNodeCell 的DrawImage重繪小圖示
利用CustomDrawNodeCell 的DrawImage重繪小圖示
要求:基於在treeList控制元件實現如下要求:
1.TreeListNode的Cell加小圖示
這樣的需求應該很多,個人覺得是比較簡單的,不多說直接上程式碼:
private TreeListColumn statusClumn;
private System.Windows.Forms.ImageList imageList;
void treeList1_CustomDrawNodeCell(object sender, CustomDrawNodeCellEventArgs e)
{
if(e.Column.FieldName != statusClumn.FieldName )
{
return;
}
//從imageList拿到下標為的圖片物件
Image image = imageList.Images[0];
//繪製座標設定XY和高寬
Rectangle rectangle = new Rectangle(e.Bounds.X + 5, e.Bounds.Y + (e.Bounds.Height - image.Height) / 2, image.Width, image.Height)
//執行繪製方法
e.Cache.Graphics.DrawImage(image, rectangle );
//將重繪前的背景色再次繪製上去
e.Cache.FillRectangle(e.Appearance.GetBackBrush(e.Cache), e.Bounds);
//將重繪前的文字樣式再次繪製上去
e.Cache.DrawString(e.CellText, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), e.Bounds, e.Appearance.GetStringFormat());
//標記執行處理,一旦為true,底層會抹除statusClumn的樣式效果,因此需重新設定FillRectangle和DrawString資訊
e.Handled = true;
}
2.滑鼠懸停時改變小圖示
在CustomDrawNodeCell事件中無法獲取到滑鼠是否懸停,那麼我們可以通過獲取懸停背景色確定是否懸停,如程式碼所示:
private TreeListColumn statusClumn;
private System.Windows.Forms.ImageList imageList;
void treeList1_CustomDrawNodeCell(object sender, CustomDrawNodeCellEventArgs e)
{
if(e.Column.FieldName != statusClumn.FieldName )
{
return;
}
//假設懸停背景色
Color hoverColor = Color.Red;
//從ImageList元件拿到下指定標為的圖片物件,預設顯示下標0的圖示
Image image = imageList.Images[0];
if(e.Appearance.BackColor == hoverColor) {
//懸停 顯示 圖片
image = imageList.Images[1];
}
//繪製座標設定XY和高寬
Rectangle rectangle = new Rectangle(e.Bounds.X + 5, e.Bounds.Y + (e.Bounds.Height - image.Height) / 2, image.Width, image.Height)
//執行繪製方法
e.Cache.Graphics.DrawImage(image, rectangle );
//將重繪前的背景色再次繪製上去
e.Cache.FillRectangle(e.Appearance.GetBackBrush(e.Cache), e.Bounds);
//將重繪前的文字樣式再次繪製上去
e.Cache.DrawString(e.CellText, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), e.Bounds, e.Appearance.GetStringFormat());
//標記執行處理,一旦為true,底層會抹除statusClumn的樣式效果,因此需重新設定FillRectangle和DrawString資訊
e.Handled = true;
}
3.展示資料關係小圖示
UID | 名稱 | 描述 | 關係 |
---|---|---|---|
A | ☺序列A | 主序列A | |
A1 | ☺序列A1 | 從序列A | |
A2 | ☺序列A2 | 新從序列A | A,A1,A2 |
B | 序列B | 主序列B | |
B1 | 序列B | 從序列B | |
B2 | 序列B | 新從序列B | B,B1,B2 |
結合上表格內容,我們需要做到這樣的效果:
關係:主序列+從序列=新從序列
滑鼠選中新從序列
時,需要將主從新
序列的關係用☺圖片
標記(因不知道怎麼表格插入圖片,暫時用符號代替)
由於非新從序列是沒有關係這欄資訊,因此我們需要先將需要標記的資料做個標記,在使用CustomDrawNodeCell事件處理
在AfterFocusNode事件標記好關係:
/// <summary>
/// 設定新序列與原序列關係
/// <param name="enode">當前選中資料行的節點物件</param>
/// </summary>
public void SetRelated(TreeListNode enode)
{
//清除標記的關係
foreach (TreeListNode node in this.treeList.Nodes)
{
node.SetValue("MarkRelated", "");
}
//取出關係欄位
string related = enode.GetValue("關係").ToString();
//不存在關係,直接返回
if (related == null)
{
return;
}
//迴圈將序列的關係設定到MarkRelated屬性中
foreach (TreeListNode node in this.treeList.Nodes)
{
if (related .IndexOf(node.GetValue("UID").ToString()) == -1)
{
continue;
}
node.SetValue("MarkRelated", "Mark");
}
}
設定關係後的表格如下:
UID | 名稱 | 描述 | 關係 | MarkRelated |
---|---|---|---|---|
A | ☺序列A | 主序列A | Mark | |
A1 | ☺序列A1 | 從序列A | Mark | |
A2 | ☺序列A2 | 新從序列A | A,A1,A2 | Mark |
B | 序列B | 主序列B | ||
B1 | 序列B | 從序列B | ||
B2 | 序列B | 新從序列B | B,B1,B2 |
在CustomDrawNodeCell事件繪製關係:
private TreeListColumn nameClumn;
void treeList1_CustomDrawNodeCell(object sender, CustomDrawNodeCellEventArgs e)
{
if(e.Column.FieldName != nameClumn.FieldName )
{
return;
}
//假設懸停背景色
Color hoverColor = Color.Red;
if (!StringUtils.IsEmpty(e.Node.GetValue("MarkRelated")) && e.Node.GetValue("MarkRelated") .toString()=="Mark")
{
//預設關係圖示
Image image = imageList3.Images[0];
//選中狀態 或 背景是懸停顏色時 關係圖示
if (e.Node.Selected || e.Appearance.BackColor == hoverColor )
{
image = imageList3.Images[1];
}
//繪製“關係”圖示
Rectangle rect = new Rectangle(e.Bounds.X + 5, e.Bounds.Y + (e.Bounds.Height - image.Height) / 2, image.Width, image.Height);
e.Cache.Graphics.DrawImage(image, rect );
}
//將重繪前的背景色再次繪製上去
e.Cache.FillRectangle(e.Appearance.GetBackBrush(e.Cache), e.Bounds);
//將重繪前的文字樣式再次繪製上去
e.Cache.DrawString(e.CellText, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), e.Bounds, e.Appearance.GetStringFormat());
//標記執行處理,一旦為true,底層會抹除statusClumn的樣式效果,因此需重新設定FillRectangle和DrawString資訊
e.Handled = true;
}
相關文章
- canvas繪製圖片drawImage學習Canvas
- 畫圖板的重繪
- 小程式利用Canvas繪製圖片和豎排文字Canvas
- canvas效能-drawImage渲染圖片Canvas
- php利用Libchart庫繪圖PHP繪圖
- Affinity Designer繪製圖示的技巧分享
- 小程式的canvas繪圖的封裝Canvas繪圖封裝
- canvas drawImage()Canvas
- Python 利用pandas和matplotlib繪製餅圖Python
- 利用 Matplotlib 繪製資料圖形(一)
- 利用 Matplotlib 繪製資料圖形(二)
- 小圖示區域的部分
- canvas繪製圖案是重疊繪製而不是重置Canvas
- canvas 繪製圖案是重疊繪製而不是重置Canvas
- Python 利用pandas 和 matplotlib繪製柱狀圖Python
- 純CSS漸變繪製 Chrome 圖示CSSChrome
- Qt5.9中利用QSS更改QTreeView的展開節點箭頭小圖示用法QTView
- 利用Python快速繪製海報級別地圖Python地圖
- 【R語言】繪製權重直方圖R語言直方圖
- svg製作小圖示SVG
- CAD夢想畫圖如何進行重畫、繪圖模式繪圖模式
- 小程式canvas居中剪裁繪製圖片Canvas
- Python 利用pandas和matplotlib繪製柱狀折線圖Python
- Mapboxgl地圖重繪完成事件 | idle狀態地圖事件
- CSS li列表前小圖示CSS
- 小汝科技-找圖示網
- Web 前端向量小圖示的使用方法Web前端
- Android控制元件重疊顯示小記Android控制元件
- 重排和重繪
- 繪圖和視覺化知識圖譜-《利用Python進行資料分析》繪圖視覺化Python
- 使用BizyAir,沒有顯示卡,也能玩AI繪圖AI繪圖
- JS的重繪和迴流JS
- WPF Canvas OnRender DrawingContext DrawImage RectAnimationCanvasGCContext
- 小區防疫地圖看板,哪裡可以繪製防疫地圖?地圖
- 小程式中使用字型圖示
- 小程式button背景顯示圖片
- 為知識的海洋繪製地圖 —— 利用CirroData-Graph圖資料庫構建知識圖譜地圖資料庫
- 辦公小技巧,OmniGraffle繪製流程圖方法分享流程圖