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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。
原文: 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」


本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。

就是要让不会的新手都看的懂!

<排排站、乾净整洁>

StackPanel的特性为推叠、并且排序,我们来看下面的实做。

01

开启一个新专案後,在主要工作区放入一个StackPanel

10-1

?

接着,随意放入物件,我们来看看效果(范例放置的是Button)

10-2

?

会发现Button随着StackPanel垂直且整齐的排列,并且自动调整宽度贴着StackPanel。

?

02

来看看StackPanel的Layout设定有甚麽不一样的。

StackPanel比较特别的是多了Orientation选项,预设是Vertical垂直排列;

点击後方下拉式选单,可以改为Horizontal水平排列。

10-3

?

跟Grid一样,StackPanel也可以设定Margin,关於Grid不了解的朋友可以看这里

由於,我们放入的Button预设为Auot,所以自动调整宽度贴着StackPanel,这里可以使用Margin调整Button的大小。

若是你不想要Button自动调整宽度贴着StackPanel,你也可以针对Button设定宽高或是边界的属性。

?

03

接下来,要介绍的是ScrollViewer,我们直接延续StackPanel的范例往下做。

在主要工作区,放入一个ScrollViewer

10-4

?

选定StackPanel後,把StackPanel拉进ScrollViewer里

10-5

?

而ScrollViewer会对过长的内容自动生成拖动的控制bar

10-6

?

我们也可以从Properties->Layout->VerticalScrollBarVisibility设定

Auto = 当内容过多时,自动显示bar

Disabled = 禁用bar

Hidden = 隐藏bar

Visible =显示bar

范例选择Hidden,如下图,右侧的bar不见了

10-7

?

也可以设定当滑鼠移到ScrollViewer的显示方式

从Properties->Common Properties->Cursor设定

10-8

?

Cursor有许多选项,一般来说,都是使用Arrow(箭头),大家可以自己试试看其他的设定。

还有很多好玩的设定,这边就不一一介绍噜!

下一章,将会以实作介绍Border的特性与设定。

本篇的教学就到此。

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

?

一步一步迈向HIE之路

 

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

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

 

 

目录
相关文章
|
6月前
|
NoSQL 关系型数据库 Redis
Docker的通俗理解和通过宿主机端口访问Redis容器的实例
本文目标:引导初学者入门Docker,理解镜像、容器和宿主机概念,学习常用Docker命令,特别是如何创建并从Redis容器通过宿主机端口访问。 关键点: - Docker核心:镜像(类)、容器(实例)、宿主机(运行环境)。 - `docker pull` 拉取镜像,如 `redis:3.0`。 - `docker run -d --name` 后台运行容器,如 `my-redis`。 - `-p` 参数做端口映射,如 `6379:6379`。 - `docker exec -it` 交互式进入容器,如 `bash` 或执行命令。
265 4
|
6月前
|
监控 Serverless 文件存储
函数计算产品使用问题之如何确保新建的实例拉取的是最新的自定义容器镜像
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
SQL Shell 数据库
在TDengine容器中创建初始化数据库的Shell命令实例
以上就是在Docker容器环境中部署并初始化TDengine数据库的全过程,希望对你有所帮助。
66 0
|
4月前
|
运维 Ubuntu Shell
掌握Docker容器的创建:从镜像到实例
【8月更文挑战第27天】
681 4
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
150 0
|
5月前
|
Java 容器
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
110 0
|
6月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
79 0
|
7月前
|
JavaScript 容器
vue element plus Container 布局容器
vue element plus Container 布局容器
231 0
|
15天前
|
Kubernetes Cloud Native Docker
云原生时代的容器化实践:Docker和Kubernetes入门
【10月更文挑战第37天】在数字化转型的浪潮中,云原生技术成为企业提升敏捷性和效率的关键。本篇文章将引导读者了解如何利用Docker进行容器化打包及部署,以及Kubernetes集群管理的基础操作,帮助初学者快速入门云原生的世界。通过实际案例分析,我们将深入探讨这些技术在现代IT架构中的应用与影响。
56 2
|
5天前
|
Kubernetes Linux 开发者
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
28 5
下一篇
无影云桌面