C 自定義控制項新增滾動條的通用設計方案

2021-10-03 20:27:15 字數 2169 閱讀 4385

前言:在我工作中,總會手繪一些自定控制項,很多時候都會用到滾動條來增加控制項的顯示內容,但是每次敲**都有一些重複的操作,於是我想到了乙個可以通用的解決方案。

一、滾動條原理

說起滾動條,我們先來了解一下滾動條的實現原理。在我們設計的控制項當中,存在兩個區域,乙個是控制項的可視區域,另乙個是需要顯示的內容區域,如圖所示。

當需要顯示的內容範圍大於控制項的可視範圍時,就需要新增滾動條,通過滾動展示顯示不下的內容。增加滾動條後,控制項的可視範圍會被滾動條占用,使」控制項的可視範圍」變得更小。

實現滾動條的滾動過程就是:

1.根據控制項尺寸和內容範圍確定滾動範圍;

2.當滾動條滾動時,計算滾動距離;

3.觸發控制項繪製事件,將可視區域移動相應的滾動距離。

注意:當控制項大小和顯示內容發生改變時,需要重新確定滾動條是否需要顯示,以及確定滾動條滾動範圍。

二、滾動條控制項的使用在.net系統控制項中,自帶了兩個滾動條控制項,分別是vscrollbar(豎向滾動條)/ hscrollbar(橫向滾動條),實現滾動條效果需要使用控制項的以下屬性和事件。

屬性maximum:可滾動範圍的上限值(也就是內容區域和控制項可視區的高度差/寬度差。)。

smallchange/largechange:小距離移動值/ 大距離移動值,滾動一次的步距。

value:滾動條的當前位置。

事件scroll:滾動條發生滾動時觸發事件。

三、我的設計方案

1.建立乙個檢視類,為自定義控制項動態新增滾動條,並處理滾動條的顯示、隱藏,以及滾動事件。

public

class

paintview

}

建構函式中的訂閱事件是本文的重點:

1)控制項resize事件:當控制項尺寸發生變化時,需要判斷是否顯示滾動條。

2)控制項mousewheel事件:當控制項發生滾輪事件時,需要滾動滾動條位置。

3)滾動條scroll事件:當滾動條滾動時,將畫布平移滾動距離。

我們先來看resize事件的處理方法:

private

void

resize()

else

if(worldheight <= _mdevice.height)

else

caculatematrix()

; _mdevice.

invalidate()

;}

當顯示區域小於或等於控制項區域時,隱藏滾動條;當顯示區域大於控制項區域時,顯示滾動條,同時設定滾動範圍為長度差。接下來的滑鼠滾輪事件和滾動軸滾動事件處理方法就比較容易了,直接設定畫布矩陣為滾動的距離,這裡定義乙個方法caculatematrix。

private

void

caculatematrix()

2.接下來就要舉個栗子了,我就以label控制項為例,給他新增滾動條,**非常簡單,在建構函式中例項化乙個paintview實體,之後重寫onpaint方法,設定控制項的實際顯示區域,然後進行畫布矩陣平移,繪製文字字串。

public

class

scrolllabel

: label

protected override void

onpaint

(painteventargs e)

}

3.將自定義label控制項拖入窗體,執行程式效果如圖所示:

這個例子當中,我的label控制項對文字進行了自動換行處理,而且出現了滾動條,基本需求實現了。不過這個例子也有一些不足之處,就是之前講原理提到的,滾動條出現會占用一些原有控制項的顯示區域,導致文字顯示不全,由於時間關係,今天我就不繼續深入研究了,這裡只給大家提供乙個設計思路,以後有精力我再慢慢完善,希望本文對你有所幫助。

自定義滾動條

滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道,一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...

自定義滾動條

body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...

自定義滾動條

不主攻前端,最近因為工作原因做了幾個小樣例,已被以後用 樣例中用到的銀行就不上傳了 輸入框1 輸入框2 下拉選項 選項1選項2 選項3選項4 選項5選項6 選項7選項8 選項9 確認 按鈕樣式 global custom btn global custom btn hover 表單樣式 global...