本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用
?
本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用
?
?
01
首先开一个新的专案,把Layout的颜色调整一下,并且在版面切完後放入一个Rectangle
?
问卷会有题目,所以我们放入一个TextBlock
?
02
接着随意的在画面上放入几个RadioButton,你可以在Assets->Controls下找到它
?
为了做到使RadioButtond可以自动整齐的排列,请使用StackPanel
(忘记StackPanel怎麽用了吗?请看这篇)
?
看下图,是不是整齐多了呢?
?
我们按下F5看看在浏览器时会长怎样
?
03
接下来,为了让题目与RadioButton可以自动排列,所以需要把题目的TextBlock以及RadioButton放进StackPanel里
请选起题目的TextBlock以及选项RadioButton後单击滑鼠右键->Group Into->StackPanel
?
其实,把TextBlock以及RadioButton放进StackPanel还有另一个好处是,不需要担心题目与选项会因为版面或视窗的调整而互相覆盖到,这是StackPanel特性的好处。
?
04
有时题目的长度或许不一定,以下要讲的就是遇到各种状况的对应方式
?
当然,若是你的题目长度固定,你可以跳过这段
?
我们放入长一点的文字试看看,请复制这个网址的一大段文字,当成是我们的题目
贴上文字後,按下F5,你可以看到文字太多所以挤压到RadioButton,使得它超出范围所以被切掉了
?
有个布局容器可以解决这个方法,那就是ScrollViewer(点我看ScrollViewer介绍)
Group Into->ScrollViewe,把题目的TextBlock包起来
?
是不是多出了ScrollBar呢?
?
调整一下刚刚跑掉的RadioButton的位置,完成後按下F5看成果
?
05
如果你想让文字长度超过范围才会出现ScrollBar,照着下面的步骤设定就好噜!
在ScrollViewer->VerticalScrollBarcVisibility的下拉式选单,把Visible改选为Auto
?
因为设定改为Auto,所以文字长度超过范围就会出现ScrollBar,如果没有超过长度则不会出现ScrollBar
?
?
小整理:
(1) 因为RadioButton是不能复选的,所以当使用者选取群组中的一个选项按钮时,会自动清除其他选项按钮;虽然RadioButton在同一个容器只能被选取1个,不过若是在不同容器里的RadioButton,就算在同一个页面还是可以被选取的喔!
(2) RadioButton 和 CheckBox控制项两者的功能类似:皆是让使用者选择选取或清除,但差别在於CheckBox可以同时选取多个选项按钮,RadioButton 则否。
?
?
附上范例专案
?
?
?
本篇的教学就到此。
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您