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

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

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

 

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

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

    原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...

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

    原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...

  3. 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果

    原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...

  4. 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)

    原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...

  5. 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)

    原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend ...

  6. 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)

    原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...

  7. 零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

    原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作 ...

  8. 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

    原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...

  9. 零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷

    原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷, ...

随机推荐

  1. 【Material Design视觉设计语言】开篇

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...

  2. hibernate annotation 相关主键生成策略

    Hibernate 默认的全面支持 13 物种生成策略 : 1. increment 2.  identity 3. sequence 4. hilo 5. seqhilo 6. uuid 7. uu ...

  3. xaml 添加 region

    原文:xaml 添加 region 本文告诉大家如何在 xaml 添加 region 在 VisualStudio 2015 和 VisualStudio 2017 微软支持在 xmal 使用 reg ...

  4. 【u253】售货厅

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 售票厅出售关于音乐会的票,取代原来的卖一张票的形式,而是一组座号连续的票.售票室已经收到很多预订.每个 ...

  5. HSSFWorkBooK用法 ---Excel表的导出和设置

    public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...

  6. 一款有意思的 Qt 飞行仪表控件

    最近在网上偶然发现一款Qt飞行仪表板控件,真的很酷哦! 是一款开源软件, 直接编译运行:  美工还是不错的! 控件操作非常简单: void MainWindow::timerEvent( QTimer ...

  7. 神经网络的 Delta 学习规则(learning rule)

    1. δ 学习规则 1986 年,由认知心理学家 McClelland 和 Rumellhart 在神经网络训练中引入了 Δ 学习规则,该规则亦可称为连续感知器学习规则(与离散感知器学习规则相并行). ...

  8. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

  9. 它们的定义Activity跳转动画

    本来觉得是一个非常小的需求, 后来我发现总是 错误, 采用Theme于 4.0在 操作不是很容易使用. 后来查阅资料, 须要在finish 后面 和 startActivity 后面加入 overri ...

  10. OpenCV图像的基础叠加

    程序及分析 /* * FileName : blend.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Mon 28 Ju ...