SkinUI入門教程（七） 第四組UI元件：進度條、分割條、滾動條和滑塊
阿新 • • 發佈：2019-02-16
7.1 進度條
進度條由CSkinProgress類來代表，繼承於CSkinView，支援CSkinView的所有屬性和方法。
通過給進度條設定不同的圖片資源，可以得到各種形態的進度條。
進度條效果圖
佈局檔案如下：
<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW13" Animation="SizeChange"> <SkinProgress LayoutHeight="19" AlignParentLeft="10" AlignParentRight="10" AlignParentVerticalCenter="0" Range="100" Pos="50" Image="Progress.png"/> </SkinDialog>
下面是CSkinProgress類特有的XML屬性和相關方法：
7.1.1設定進度條的最大進度
- 通過XML屬性控制如下：
Range="100" - 通過C++程式程式碼呼叫方法控制如下：
void SetRange(uint64 nRange);
7.1.2設定進度條的當前進度
- 通過XML屬性控制如下：
Pos="1" - 通過C++程式程式碼呼叫方法控制如下：
void SetPos(uint64 nPos);
7.2 分割條
分割條由CSkinSplitter類來代表，繼承於CSkinView，支援CSkinView的所有屬性和方法。
通過給分割條設定不同的圖片資源，可以得到各種形態的進度條。
分隔條效果圖
佈局檔案如下：
<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW14" Animation="SizeChange"> <SkinSplitter LayoutHeight="3" AlignParentLeft="10" AlignParentRight="10" AlignParentVerticalCenter="0" Min="50" Max="250" Image="VSplitter.png"/> </SkinDialog>
下面是CSkinSplitter類特有的XML屬性和相關方法：
7.2.1設定分割條是否為水平分隔條
- 通過XML屬性控制如下：
HorzSplitter="true" - 通過C++程式程式碼呼叫方法控制如下：
void SetHorzSplitter(BOOL bHorzSplitter);
7.2.2設定分隔條的移動範圍
- 通過XML屬性控制如下：
Min="100" Max="1000" - 通過C++程式程式碼呼叫方法控制如下：
void SetMoveRange(LONG nMin, LONG nMax);
7.3 滾動條
滾動條由CSkinScrollBar類來代表，繼承於CSkinView，支援CSkinView的所有屬性和方法。通過給滾動條設定不同的佈局檔案，可以得到不同形態的滾蛋條。例如：可以設定滾動條只有滾動滑塊而沒有滾動箭頭。
- 滾動條可以單獨存在
<SkinScrollBarId="1125" LayoutHeight="21" AlignParentLeft="15" AlignParentRight="15" AlignParentVerticalCenter="0" Layout="VScrollBar.xml"/> - 滾動條也可以搭配列表框：
<SkinListView AlignParentLeft="1" AlignParentRight="1" AlignParentTop="1" AlignParentBottom="1" VScrollBar="VScrollBar.xml"> -
滾動條也可以搭配編輯框：
<SkinEditView Image="Edit.png" MultiLine="true" AlignParentLeft="8" AlignParentRight="8" AlignParentTop="38" AlignParentBottom="8" VScrollBar="VScrollBar.xml"/> -
垂直滾動條佈局檔案VScrollBar.xml如下：
<SkinVerticalLayout LayoutWidth="FillParent" LayoutHeight="FillParent"> <ScrollSlider Id="100001" LayoutWidth="FillParent" LayoutHeight="FillParent" Image="VScrollSlider.png"> <ScrollThumb Id="100002" Image="VScrollThumb.png"/> </ScrollSlider> </SkinVerticalLayout>
滾動條單獨使用
滾動條搭配編輯框效果圖
滾動條搭配列表框效果圖
下面是CSkinScrollBar類特有的XML屬性和相關方法：
7.3.1設定滾動條的滾動檢視
- 通過C++程式程式碼呼叫方法控制如下：
void SetScrollView(CSkinScrollView* pView);
7.3.2設定滾動條資訊
- 通過C++程式程式碼呼叫方法控制如下：
void SetScrollInfo(const ScrollInfo& info);
7.3.2設定滾動條滑塊位置
- 通過C++程式程式碼呼叫方法控制如下：
void SetScrollPos(LONG nPos);
7.4 滑塊
滑塊由CSkinSlider類來代表，繼承於CSkinView，支援CSkinView的所有屬性和方法。
通過給滑塊設定不同的圖片資源，可以得到各種形態的進度條。
滑塊效果圖
佈局檔案如下：
<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW17" Animation="SizeChange">
<SkinSlider Id="1125" LayoutHeight="21" AlignParentLeft="15" AlignParentRight="15" AlignParentVerticalCenter="0" Range="100" Pos="50" Image="AlphaSliderBkg.png" ThumbImage="AlphaSliderThumb.png"/>
</SkinDialog>下面是CSkinSlider類特有的XML屬性和相關方法：
7.4.1設定滑塊的移動範圍
- 通過XML屬性控制如下：
Range="100" - 通過C++程式程式碼呼叫方法控制如下：
void SetRange(LONG nRange);
7.4.2設定滑塊的當前位置
- 通過XML屬性控制如下：
Pos="1" - 通過C++程式程式碼呼叫方法控制如下：
void SetPos(LONG nPos);
7.4.3設定滑塊的影象
- 通過XML屬性控制如下：
ThumbImage="SliderThumb.png" - 通過C++程式程式碼呼叫方法控制如下：
void SetThumbImage(uint64 nPos);