零元学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之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您