零元學Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用

本章将教大家如何運用Blend的内建元件RaidoButton做出選單選項，以及配合的布局容器運用

?

01

首先開一個新的專案，把Layout的顔色調整一下，并且在版面切完後放入一個Rectangle

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_2.png"></a>

問卷會有題目，是以我們放入一個TextBlock

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_4.png"></a>

02

接着随意的在畫面上放入幾個RadioButton，你可以在Assets-&gt;Controls下找到它

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_6.png"></a>

為了做到使RadioButtond可以自動整齊的排列，請使用StackPanel

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_8.png"></a>

看下圖，是不是整齊多了呢?

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_10.png"></a>

我們按下F5看看在浏覽器時會長怎樣

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_12.png"></a>

03

接下來，為了讓題目與RadioButton可以自動排列，是以需要把題目的TextBlock以及RadioButton放進StackPanel裡

請選起題目的TextBlock以及選項RadioButton後單擊滑鼠右鍵-&gt;Group Into-&gt;StackPanel

其實，把TextBlock以及RadioButton放進StackPanel還有另一個好處是，不需要擔心題目與選項會因為版面或視窗的調整而互相覆寫到，這是StackPanel特性的好處。

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_14.png"></a>

04

有時題目的長度或許不一定，以下要講的就是遇到各種狀況的對應方式

當然，若是你的題目長度固定，你可以跳過這段

貼上文字後，按下F5，你可以看到文字太多是以擠壓到RadioButton，使得它超出範圍是以被切掉了

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_16.png"></a>

Group Into-&gt;ScrollViewe，把題目的TextBlock包起來

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_18.png"></a>

是不是多出了ScrollBar呢?

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_20.png"></a>

調整一下剛剛跑掉的RadioButton的位置，完成後按下F5看成果

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_22.png"></a>

05

如果你想讓文字長度超過範圍才會出現ScrollBar，照着下面的步驟設定就好噜!

在ScrollViewer-&gt;VerticalScrollBarcVisibility的下拉式選單，把Visible改選為Auto

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1012/2ff737813350_F3C4/image_24.png"></a>

因為設定改為Auto，是以文字長度超過範圍就會出現ScrollBar，如果沒有超過長度則不會出現ScrollBar

小整理：

(1) 因為RadioButton是不能複選的，是以當使用者選取群組中的一個選項按鈕時，會自動清除其他選項按鈕；雖然RadioButton在同一個容器隻能被選取1個，不過若是在不同容器裡的RadioButton，就算在同一個頁面還是可以被選取的喔!

(2) RadioButton 和 CheckBox控制項兩者的功能類似：皆是讓使用者選擇選取或清除，但差别在於CheckBox可以同時選取多個選項按鈕，RadioButton 則否。

附上範例專案

本篇的教學就到此。

(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)

一步一步邁向HIE之路

喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特别需要，請在文章回應處留言，我會盡快回覆您