introduction

• 更多控制元件用法，請參考 here 和 原始碼。
• 本文的程式碼基於這裡

xml檔案新增程式碼

基於上一篇, 繼續向basic.xml中新增下面關於Option的程式碼。 xml完整原始碼在文末。

<!-- option-->
<VBox>
  <Option class="circle_option_2" name="option1" group="option_group" text="option1" margin="0,3,0,10" selected="true"/>
  <Option class="circle_option_2" name="option2" group="option_group" text="option2" margin="0,3,0,10"/>
  <Option class="circle_option_2" name="option3" group="option_group" text="option3" margin="0,3,0,10"/>
</VBox>
 

class屬性來自global.xml中設定的樣式，name是程式碼中使用該空間用的，group指示當前option屬於哪一個分組；text是控制元件展示的文字，margin從左到右分別是當前控制元件距左、上、右、下的距離，selected為true，設定為選中狀態。

程式碼中關聯

BasicForm.h

• 開啟BasicForm.h，類中新增下面的程式碼用於關聯介面控制元件。

	// 關聯3個 option 
	ui::Option	*poption_arr_[count_3];

同時，類中再額外新增1個函式，用於監聽Option的選中。

	// option 點選處理函式
	bool OnOptionSelected(ui::EventArgs *msg);
 

BasicForm.cpp

InitWindow函式

• 轉到BasicForm.cpp，找到 InitWindow 函式，向其增加下面的程式碼

void BasicForm::InitWindow()
{
  ......
	// 3. 查詢option 控制元件
	//----------------------------------------------------------------------------------------
	poption_arr_[0] = dynamic_cast<ui::Option*>(FindControl(L"option1"));
	poption_arr_[1] = dynamic_cast<ui::Option*>(FindControl(L"option2"));
	poption_arr_[2] = dynamic_cast<ui::Option*>(FindControl(L"option3"));
	for (auto item : poption_arr_)
	{
		if (item)
		{
			// 監聽選中
			item->AttachSelect(nbase::Bind(&BasicForm::OnCheckBoxSelected, this, std::placeholders::_1));
      // 也可以監聽未選中，用法於CheckBox類似。
		}
	}
}
 

Note: 可監聽未選中，用法請參考CheckBox.

OnOptionSelected

函式體程式碼如下

bool BasicForm::OnOptionSelected(ui::EventArgs *msg)
{
	std::wstring str = msg->pSender->GetName() + std::wstring(L" is selected\n");
	LPCWSTR result = str.c_str();
	OutputDebugString(result);

	return false;
}

執行結果

當選中option時，VS的輸出對話方塊中將輸出我們設定的監聽處理結果。

xml完整原始碼

<?xml version="1.0" encoding="UTF-8"?>
<Window size="600,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <Control />
        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
        <Box width="21" margin="4,6,0,0">
          <Button class="btn_wnd_max" name="maxbtn"/>
          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
        </Box>
      <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
    </HBox>

    <!--下面是中間的控制元件-->
    <VBox padding="30, 30, 30, 30" >   
      <HBox>
        <VBox>
          <!-- Buttons -->
          <Button class="btn_global_blue_80x30" name="btn_blue" text="blue" />
          <Button class="btn_global_white_80x30" name="btn_white" text="white"/>
          <Button class="btn_global_red_80x30" name="btn_red" text="red"/>
        </VBox>
        
        <!--checkbox-->
        <VBox>
          <CheckBox class="checkbox_font12" name="checkbox1" text="checkbox1" margin="0,5,0,10" selected="true"/>
          <CheckBox class="checkbox_font12" name="checkbox2" text="checkbox2" margin="0,5,0,10"/>
          <CheckBox class="checkbox_font12" name="checkbox3" text="checkbox3" margin="0,5,0,10"/>
        </VBox>

        <!-- option-->
        <VBox>
          <Option class="circle_option_2" name="option1" group="option_group" text="option1" margin="0,3,0,10" selected="true"/>
          <Option class="circle_option_2" name="option2" group="option_group" text="option2" margin="0,3,0,10"/>
          <Option class="circle_option_2" name="option3" group="option_group" text="option3" margin="0,3,0,10"/>
        </VBox>
        
      </HBox>
    </VBox> <!--下面是中間的控制元件 結束-->
  </VBox>
</Window>