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

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

本章将教大家如何运用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之路

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

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

时间: 2024-08-07 06:16:23

零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用的相关文章

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? ? ? 就是要让不会的新手都看的懂! ? ? ? <实至名归的容器大哥> Blend 4内的容器有很多种,比较常运用到的除了有Grid.Can

零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? ? 就是要让不会的新手都看的懂! ? 01 开始专案 打开Blend後选择Top Menu的 File->New Project(快捷键Shift+

零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 附上简单的范例,请点击进行换页,并注意换页内容 范例请点我 ? 跟着范例做做看吧! 01 使用小猴子附上的的范例档案,或是自己做一个类似下图的版面 ? (范例内的

零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? ? ? 01 开启一个新专案,并且置入一个Button,调整到适当大小 ? 在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同 不熟的人请看如何用Blend制作一

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------

零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 本章将教大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 范例内有文字方块可以输入文字,以及密码栏: 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页 打错字了....不

零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变藏宝箱! ? 本章将教大家如何运用CheckBox做实作上的变化:看我怎麽把CheckBox变藏宝箱! ? 最近帮公司做了一个互动式的小游戏,运用了CheckBox的功能,就顺便介绍给大家 为了利益回避,以及日後不必要的麻烦,本章范例已经简化了很多东西,只留下与相关的图片及功能 ? 01 先简单介绍

零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里

原文:零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? ? 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? 就是要让不会的新手都看的懂! ? ?