快速設計控制元件
# PinToo 控制元件使用(快速設計)
該組中包含圖形元素的快速設計相關的控制元件。
# 1. TfxRDIconFlicker
該元件顯示為一個帶有觸控效果的影象按鈕，可調整觸控的閃爍時間，其顯示的文字內容可置於頂部底部或者右側，可根據TextFont設定的大小進行自動調整。通過OnFlickerFinish事件來觸發使用者事件操作。
| 屬性 | 屬性說明 |
|---|---|
| BitmapIcon | 設定用於顯示的圖示，可點選...打開影象編輯器進行設定 |
| Duration | 觸控動態效果反饋的持續時間，預設為0.5秒 |
| TextPosition | 文字相對於圖示的顯示位置，可選擇None(不顯示文字),Top(顯示于圖示頂部),Bottom(顯示位於圖示底部),Right(顯示位於圖示右側) |
| TextFont.Size | 設定顯示字型的大小 |
| TextColor | 設定顯示文字的顏色 |
# 2. TfxRDIconImgChange
該元件在OnMouseDown和OnMouseUp後分別顯示為兩個圖示。其顯示的文字內容可置於頂部底部或者右側，可根據TextFont設定的大小進行自動調整。可設定文字顏色以及觸控時的文字顏色。將使用者操作應用於OnMouseDown和OnMouseUp事件。
| 屬性 | 屬性說明 |
|---|---|
| BitmapIcon | 設定用於顯示的圖示，可點選...打開影象編輯器進行設定 |
| BitmapIconTouch | 設定在觸控時顯示的圖示，可點選...打開影象編輯器進行設定 |
| TextPosition | 文字相對於圖示的顯示位置，可選擇None(不顯示文字),Top(顯示于圖示頂部),Bottom(顯示位於圖示底部),Right(顯示位於圖示右側) |
| TextFont.Size | 設定顯示字型的大小 |
| TextColor | 設定顯示文字的顏色 |
| TextColorTouch | 設定示文字在觸控時顯示的顏色 |
# 3. TfxRDIconColorChange
該元件的按鈕圖示影象在觸控時會更改顏色。其顯示的文字內容可置於頂部底部或者右側，可根據TextFont設定的大小進行自動調整，可設定文字顏色，將使用者操作應用於OnMouseDown和OnMouseUp事件。
| 屬性 | 屬性說明 |
|---|---|
| BitmapIcon | 設定用於顯示的圖示，可點選...打開影象編輯器進行設定 |
| ColorTouch | 設定在觸控時顯示的圖示顏色 |
| TextPosition | 文字相對於圖示的顯示位置，可選擇None(不顯示文字),Top(顯示于圖示頂部),Bottom(顯示位於圖示底部),Right(顯示位於圖示右側) |
| TextFont.Size | 設定顯示字型的大小 |
| TextColor | 設定顯示文字的顏色 |
# 4. TfxRDColorCheckBox
該元件實現一個確認框的功能，控制元件大小可以自由調整，圖示以及背景色可以設定，包括調整圖示和邊框的粗細，設定邊框是否可見，設定邊框為圓形或者矩形。通過OnChange事件來觸發使用者操作。
| 屬性 | 屬性說明 |
|---|---|
| Height,Width | 設定控制元件顯示的寬度和高度 |
| ColorCheck | 設定確認勾選的勾的顏色 |
| ColorBackground | 設定勾選框的背景顏色 |
| ThicknessCheck | 設定用於勾選的勾的厚度 |
| ThicknessBorder | 設定勾選框的邊框厚度 |
| BorderVisible | 設定是否顯示勾選框的邊框，為True時表示顯示，為False表示不顯示 |
| ShapeType | 勾選框的型別，Rectangle為矩形勾選框，Circle為圓形勾選框 |
# 5. TfxufxRDColorSwitch
該元件顯示為一個切換撥桿，其大小可以自由調整。可以設定撥桿的背景色以及開/關狀態下的顏色，撥桿可以是圓形或者矩形，包含三種類型的切換模式，使用OnChange事件來觸發使用者操作。
| 屬性 | 屬性說明 |
|---|---|
| Height,Width | 設定控制元件顯示的寬度和高度 |
| ColorON | 設定撥桿開啟狀態時顯示的顏色 |
| ColorOFF | 設定撥桿關閉狀態時顯示的顏色 |
| ColorSwitch | 設定撥桿自身的顏色 |
| ShapeType | 撥桿的形狀，Rectangle為矩形，Circle為圓形 |
| SwitchMode | 撥桿的模式型別，Inner表示撥桿在槽內，Over表示撥桿伸出槽外，Fit表示撥桿適應槽的大小 |
# 6. TfxRDHorzProgress/TfxRDVertProgress
該元件表示為一個可用於顯示進度的水平/豎直進度條。其可以不受限制地自由調整大小，可以設定Value欄目和背景的顏色，可將漸變色和影象應用於Value欄目，設定分割線為Interval(間隔)和Visible(可見)，進度條形狀可設定為矩形或者三角形。
| 屬性 | 屬性說明 |
|---|---|
| Height,Width | 設定控制元件顯示的寬度和高度 |
| ColorFill | 填充進度條的部分顯示的顏色 |
| ColorRange | 進度條非填充部分部分顯示的顏色 |
| Color.Kind | 設定ColorFill和ColorRange的顏色顯示型別 |
| SplitterDistance | 設定分隔條的間距 |
| SplitterVisible | 設定分隔條是否可見 |
| ShapeType | 進度條的形狀型別，Rectangle為矩形，Triangle為三角形 |
# 7. TfxRDCircularProgress
該元件表示為一個環形的進度條，環的粗細可以自由調整，可以設定表示值的弧以及背景的顏色，設定文字字型與大小，值的範圍為0到100%，值為100時顯示確認圖示。
| 屬性 | 屬性說明 |
|---|---|
| Thickness | 設定環的厚度 |
| ColorValue | 設定顯示值的弧的顏色 |
| ColorBackground | 設定進度環背景的顏色 |
| ColorRange | 設定進度環的顏色 |
| TextFont | 設定顯示數值的字型以及大小 |
# 8. TfxRDAngularGauge
該元件表示為一個儀表盤。包含一個弧和一個用於指示數值的指針，弧的厚度可以自由調整，弧的角度可以在20~360°之間自由設定，可以設定表示值的弧以及背景的顏色以及指針的顏色以及是否可見，設定文字字型與大小，設定值的最小與最大範圍。
| 屬性 | 屬性說明 |
|---|---|
| Thickness | 設定弧的厚度 |
| RangeAngle | 設定圓弧的角度範圍 |
| ColorValue | 設定顯示值的弧的顏色 |
| ColorBackground | 設定進度弧背景的顏色 |
| ColorRange | 設定進度弧的顏色 |
| ColorNeedle | 設定指針的顏色 |
| NeedleVisible | 設定指針是否可見，為True時顯示指針，為False時不顯示指針 |
| TextFont | 設定顯示數值的字型以及大小 |
| TextVisible | 設定文字內容是否可見 |
| ValueMin | 設定顯示值範圍的最小值 |
| ValueMax | 設定顯示值範圍的最大值 |
# 9. TfxRDRotaryKnob
該元件為一個可旋轉的旋鈕，圓的大小可以自由調整，可設定分割槽和背景的顏色，可以設定分割槽基準和圓形顏色，沿著分割角進行旋轉，值的範圍從0到100，包含銀色和黑色兩種旋鈕型別。使用者通過OnChange事件來進行事件觸發指令碼的輸入。
| 屬性 | 屬性說明 |
|---|---|
| Height,Width | 設定控制元件顯示的寬度和高度 |
| ColorDivision | 設定旋鈕錶盤刻度處在啟用時顯示的顏色 |
| ColorBackground | 設定旋鈕錶盤背景顏色 |
| ColorDivisionBase | 設定旋鈕錶盤刻度處在未啟用時顯示的顏色 |
| ColorRound | 設定旋鈕與刻度錶盤之間的圓環的顏色 |
| Division | 設定分割線分割槽的數目 |
| Value | 設定旋鈕指向的位置對應的數值 |
| KnobType | 設定旋鈕的外觀，有Silver和Balck兩種型別 |
# 10. TfxRDHorzSlideBar/TfxRDVertSlideBar
該元件顯示為一個帶滑塊的滑軌。可設定滑軌和滑塊的顏色，包含三種厚度型別，三種滑塊型別，可按頻率設定移動的範圍，可設定其為只讀型別，使用者通過OnChange事件來進行事件觸發指令碼的輸入。
| 屬性 | 屬性說明 |
|---|---|
| ColorValue | 設定顯示值的滑軌段的顏色 |
| ColorRange | 設定不顯示值的滑軌段的顏色 |
| ThicknessType | 設定滑軌的厚度型別，有Thick,Normal,Thin三種類型 |
| KnobType | 設定滑塊的型別，有Circle,Dount,Bar三種類型 |
| Frequency | 設定滑塊移動的單位數值，數值設定越大標明滑塊的變動率越低。 |
| IsReadOnly | 設定滑塊是否為只讀狀態 |
# 11. TfxRDDigitalFont
該元件用於以LED點陣的方式進行字元的顯示，顯示的字元型別為字母，數字和特殊字元（AZ，09，-％;：。，）。可以設定編劇，字型以及背景顏色。
| 屬性 | 屬性說明 |
|---|---|
| DigitalChar | 設定需要顯示的字元 |
| MarginRate | 設定外邊框與顯示區域的邊緣比例 |
| ColorFont | 設定顯示字元的顏色 |
| ColorBackground | 設定顯示面板的背景顏色 |
# 12. TfxRDDigitalNumber
該元件以七段LED顯示管的方式來顯示數字和特殊字元（09，-：。），可設定字型和背景顏色。
| 屬性 | 屬性說明 |
|---|---|
| Number | 設定使用LED燈管顯示的數字 |
| ColorNumber | 設定顯示數值（LED燈管處於開啟狀態）的段對應的顏色 |
| ColorBackground | 設定不顯示數值（LED燈管處於關閉狀態）的段對應的顏色 |
# 13. TfxRDStarRating
該元件表現爲評分，其大小可以自由調整，可以設定評價星星的顏色，其值的範圍從0到5，使用者通過OnStarChange事件來輸入程式碼。
| 屬性 | 屬性說明 |
|---|---|
| Height,Width | 設定控制元件顯示的寬度和高度 |
| ColorStar | 設定評分星星的顏色 |
| Value | 評分時對應星星表示的數值，數值只能是0~5範圍內的整數 |
# 14. TfxRDToastMessage
使用該元件需要將其放置在程式的主窗體中，用作訊息提示的功能。該元件可自動縮放以適應螢幕尺寸。可設定文字顏色與背景顏色，可設定陰影可見。
使用方式：
ShowToastMessage(Msg:string; ShowTime:single = 3.0; MarginBottom:single = 100);
例如：
fxRDToastMessage1.ShowToastMessage('你好',3.0,100);
如果使用了CloseToast方法，無論ShowTime值如何，訊息提示框都會立即關閉。
| 屬性 | 屬性說明 |
|---|---|
| ColorMessage | 設定訊息提示文字內容的顏色 |
| ColorBackground | 設定訊息提示框的顏色 |
| Shadow | 設定是否在訊息提示框下顯示陰影 |
# 15. TfxRDPopupDialog
使用該元件需要將其放置在程式的主窗體中，用作彈出式對話方塊，該元件可自動縮放以適應螢幕尺寸。可設定文字按鈕的顏色，可設定陰影可見。彈出對話方塊的背景可以有3種模糊效果。
使用方式
ShowPopupDialog(Title, Msg:string; LeftTextButton:string = 'Cancel'; RightTextButton:string = 'Apply');
例如：
fxRDPopupDialog1.ShowPopupDialog('Hola','你好','取消','應用');
使用OnLeftTextButtonClick和OnRightTextButtonClick事件來對應對話方塊的左側按鈕點選與右側按鈕點選事件。
| 屬性 | 屬性說明 |
|---|---|
| ColorMessage | 設定訊息提示正文的顏色 |
| ColorBackground | 設定訊息提示框的背景顏色 |
| ColorTextButton | 設定訊息提示框按鈕上文字的顏色 |
| Shadow | 設定是否在訊息提示框下顯示陰影 |
| BackgroundBlur | 設定彈出提示框時背景虛化的效果，有LowBlur,MediumBlur,HighBlur三種可選 |
# 16. TfxRDInputQueryBox
使用該元件需要將其放置在程式的主窗體中，用作彈出式輸入對話方塊，該元件可自動縮放以適應螢幕尺寸。可設定資訊和背景的顏色，可設定文字按鈕的顏色，可設定陰影可見，可設定彈出對話方塊3種模糊效果。TfxEdit屬性（例如密碼和提示）可以在Input Edit中使用。
使用方式
ShowQueryBox( InputLabel :string );
例如：
Procedure fxButton2OnClick(Sender: TObject);
Begin
fxRDInputQueryBox1.ShowQueryBox('');
End;
Procedure fxRDInputQueryBox1OnApplyButtonClick(Sender: TObject);
Begin
fxLabel1.Text := fxRDInputQueryBox1.InputString;
End;
2
3
4
5
6
7
8
9
| 屬性 | 屬性說明 |
|---|---|
| ColorMessage | 設定訊息提示正文的顏色 |
| ColorBackground | 設定訊息提示框的背景顏色 |
| ColorTextButton | 設定訊息提示框按鈕上文字的顏色 |
| Shadow | 設定是否在訊息提示框下顯示陰影 |
| BackgroundBlur | 設定彈出提示框時背景虛化的效果，有LowBlur,MediumBlur,HighBlur三種可選 |
| InputString | 儲存對話方塊種輸入的字元 |
| EditPassword | 是否啟用密碼輸入功能，為True時表示啟用，為False時表示為不啟用 |
| EditTextPrompt | 設定顯示的文字提示內容 |
# 17. TfxRDMovingCaption
該元件顯示為一個可以移動的字幕元件。可以設定字幕背景和文字顏色，設定文字字型和大小，在文字上輸入字幕，設定字幕的移動速度。可以設定重複播放。將IsStart設定為True以移動字幕。
| 屬性 | 屬性說明 |
|---|---|
| BackgroundColor | 設定移動字幕的背景顏色 |
| TextColor | 設定字幕的顏色 |
| TextFont | 設定字幕的字型 |
| Text | 設定字幕內容 |
| Velocity | 設定字幕的移動速度 |
| Loop | 設定字幕是否循環顯示，為True時循環顯示，為False時只移動顯示一次 |
| IsStart | 設定字幕是否移動，為True時移動字幕，為False時不移動字幕 |
# 18. TfxRDButtonSet
該元件顯示為一組按鍵，根據輸入的數量來建立按鈕組，可以設定按鈕空間，可以設定文字和按鈕的顏色，每個按鈕的文字可以分別指定，可以設定兩端左右按鈕以弧形顯示，大小可以自由調整，可設定文字字型和大小。使用者使用OnButtonSetClick事件輸入操作程式碼。單擊按鈕，對應點選的按鈕序號儲存在ClickIndex屬性中。
| 屬性 | 屬性說明 |
|---|---|
| ButtonNo | 設定顯示按鈕的數量 |
| ButtonSpace | 設定顯示的按鈕的間隔 |
| ColorButton | 設定按鈕顯示的顏色 |
| ColorButtonText | 設定按鈕文字的顯示顏色 |
| ButtonText | 設定按鈕組中每個按鈕顯示文字的內容 |
| IsRounded | 兩端的按鈕是否顯示為弧形 |
| Height,Width | 設定控制元件顯示的寬度和高度 |
| TextFont | 設定顯示文字的字型格式 |
# 19. TfxRDToggleButtons
該元件顯示為一個可進行模式切換的按鈕組，按下其中一個按鈕可切換至按鈕指示的狀態中。根據輸入的按鈕數量自動建立的按鈕，每個按鈕的文字可以分別指定，可以設定文字和按鈕的顏色，可以設定開/關的頂線顏色，大小可以自由調整，可設定文字字型和大小。 使用者使用使用OnButtonSetClick事件輸入操作程式碼。 單擊按鈕對應的按鈕序號儲存在ClickIndex屬性中。
| 屬性 | 屬性說明 |
|---|---|
| ButtonNo | 設定顯示按鈕的數量 |
| ButtonSpace | 設定顯示的按鈕的間隔 |
| ColorButton | 設定按鈕顯示的顏色 |
| ColorButtonText | 設定按鈕文字的顯示顏色 |
| ColorTopLineOn | 開關頂線在開啟狀態下的顏色 |
| ColorTopLineOff | 開關頂線在關閉狀態下的顏色 |
| Height,Width | 設定控制元件顯示的寬度和高度 |
| TextFont | 設定顯示文字的字型格式 |
# 20. TfxRDChartBarHori
該元件顯示為一個水平直方圖。圖形間距可根據數據數量自動設定。可以指定圖表的最大範圍。可以設定圖形開始位置（x，y）。可以設定條的寬度和顏色。可以設定陰影。可以選擇背景為彩色，漸變或影象。背景不透明度可用於建立多個圖表圖層。可以設定背景筆劃。可以設定文字顏色，字型和可見性。
| 屬性 | 屬性說明 |
|---|---|
| Lines | 設定需要顯示的行的直方圖的長度，顯示的長度與MaxWidth屬性指定的數值相關 |
| MaxWidth | 設定直方圖橫座標顯示最大長度時的數值，若該屬性設定的值比Lines中的最大值要小，則Lines中的最大值會作為直方圖的最大寬度來顯示 |
| StartX,StartY | 設定直方圖起始顯示位置與左下角（原點）的畫素距離 |
| BarWidth | 設定直方圖顯示的寬度 |
| BarColor | 設定直方圖顯示的顏色 |
| Shadow | 設定是否顯示直方圖的陰影 |
| BackgroundFill | 設定背景的填充樣式 |
| BackgroundOpacity | 設定背景的透明度，可選值範圍在0~1之間，為0時表示完全透明，為1時表示完全不透明 |
| BackgroundStroke | 設定背景邊緣的填充樣式 |
| TextColor | 設定文字顏色 |
| TextFont | 設定文字字型 |
| TextVisible | 設定文字是否可見 |
# 21. TfxRDChartBarVert
該元件顯示為一個垂直直方圖。圖形間距可根據數據數量自動設定。可以指定圖表的最大範圍。可以設定圖形開始位置（x，y）。可以設定條的寬度和顏色。可以設定陰影。可以選擇背景為彩色，漸變或影象。背景不透明度可用於建立多個圖表圖層。可以設定背景筆劃。可以設定文字顏色，字型和可見性。
| 屬性 | 屬性說明 |
|---|---|
| Lines | 設定需要顯示的直方圖的長度，顯示的長度與MaxHeight屬性指定的數值相關 |
| MaxHeight | 設定直方圖橫座標顯示最大高度時的數值，若該屬性設定的值比Lines中的最大值要小，則Lines中的最大值會作為直方圖的最大高度來顯示 |
| StartX,StartY | 設定直方圖起始顯示位置與左下角（原點）的畫素距離 |
| BarWidth | 設定直方圖顯示的寬度 |
| BarColor | 設定直方圖顯示的顏色 |
| Shadow | 設定是否顯示直方圖的陰影 |
| BackgroundFill | 設定背景的填充樣式 |
| BackgroundOpacity | 設定背景的透明度，可選值範圍在0~1之間，為0時表示完全透明，為1時表示完全不透明 |
| BackgroundStroke | 設定背景邊緣的填充樣式 |
| TextColor | 設定文字顏色 |
| TextFont | 設定文字字型 |
| TextVisible | 設定文字是否可見 |
# 22. TfxRDChartLine
該圖顯示為一個線性圖。圖形間距根據數據數量自動設定。 可以指定圖表的最大範圍。可以設定圖形開始位置（x，y）。可以設定線條粗細和顏色。可以設定陰影線。圓圈的顏色和直徑設定。圈範圍寬度設定。可以選擇背景為彩色，漸變或影象。背景不透明度可用於建立多個圖表圖層。可以設定背景筆劃。可以設定文字顏色，字型和可見性。
| 屬性 | 屬性說明 |
|---|---|
| Lines | 設定需要顯示的線型圖的數據內容，顯示的長度與MaxHeight屬性指定的數值相關 |
| MaxHeight | 設定橫座標顯示最大高度時的數值，若該屬性設定的值比Lines中的最大值要小，則Lines中的最大值會作為直方圖的最大高度來顯示 |
| StartX,StartY | 設定線型圖起始顯示位置與左下角（原點）的畫素距離 |
| LineThickness | 設定線條的顯示厚度 |
| LineColor | 設定線條的顯示顏色 |
| Shadow | 設定是否顯示線型圖的陰影 |
| CircleColor | 設定線型圖中圓點的顏色 |
| CircleDiameter | 設定圓點的直徑 |
| RangeWidth | 設定顯示內容的範圍寬度 |
| BackgroundFill | 設定背景顏色的填充樣式 |
| BackgroundOpacity | 設定背景的透明度，可選值範圍在0~1之間，為0時表示完全透明，為1時表示完全不透明 |
| BackgroundStroke | 設定背景邊緣的填充樣式 |
| TextColor | 設定文字顏色 |
| TextFont | 設定文字字型 |
| TextVisible | 設定文字是否可見 |
# 23. TfxRDChartPie
該元件顯示為一個餅圖。可根據數據數量自動設定圖表顏色（有七種顏色）。可以選擇三種類型的文字項（值，註釋，百分比（％）)。數據和註釋以'＃'分隔。例如100＃註釋。可以設定文字顏色和字型以及圖表陰影。
| 屬性 | 屬性說明 |
|---|---|
| ColorType | 設定餅圖的配色型別，可根據自己的需求進行選擇搭配 |
| TextItems | 設定餅圖中內容的顯示樣式，可自行設定是否顯示其中的三項內容。 Value: 數值。 Comment: 註釋。 Percent: 百分比 |
| Lines | 設定需要顯示的數據內容。其中需要填寫數值以及註釋，填寫方式如示例420#Windows130#OS X320#Android290#iOS |
| TextColor | 設定文字顏色 |
| TextFont | 設定文字字型 |
| Shadow | 設定是否顯示餅圖的陰影 |