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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
原文: 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I


本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Pathlistbox」

?

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Pathlistbox

?

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

?

<先来了解Pathlistbox的基本功能>

01

开启一个新专案後,在主要工作区放入一个Ellipse,接着我们放入TextBlock,并打入你要的文字

?

为了要看出功能特别的地方,这里要直接多做一个动作:

选取已经打入文字的TextBlock後,直接复制并贴上数个(不用管位置,让数个TextBlock重叠即可)

如下图

13-1

?

接着,在AssetsSearch键入PathlistBox

13-2

?

再来,我们直接放在左上角後,把刚刚的TextBlock全选,放入PathlistBox里

13-3

?

02

选取PathlistBox的状态下,Properties会多出Layout Path的属性设定

在Layout Path里有个同心圆的小圈圈,请把它拉到我们所绘的Ellipse

如下图

13-4

?

这时候,你的画面应该会变成范例图片这样

13-6

?

Capacity:用来调整显示项目数量的上限

13-5

项目数跟刚刚比是不是变多了?

?

当然你也要有这麽多项目数才行,意思是:Capacity并不会自动生出项目,而是由以现有的项目数下去做调整

【举例说明】

? 置入PathlistBox的TextBlock总共有8个,你可以设定显示数量为5,在画面上的TextBlock就只会显示五个

? 但你若是设定显示数量为9,画面上的TextBlock一样只会显示8个

?

Padding:是设定项目间的间距(数字越小距离越近)

?

Orientation:是设定项目的方向

如下图(本来设定为None,范例改为OrientToPath)

13-7

?

Start:设定项目排列起始位子,预设为0%,即为12点钟方向

?

?

<PathlistBox应用实例>

了解PathlistBox的基本操作後,来看看到底可以用在甚麽地方

?

来制作一个小花!

01

清空主要工作区後,放入一个大小适中的Ellipse,为PathlistBox等等的路径

再来,我们要制作PathlistBox的内容项目

一样运用大小适中Ellipse拉出花瓣,并更改为渐层色彩後,复制4个起来(这时我们有5个花瓣)

13-8

?

02

一样在左上置入一个PathlistBox後,把刚刚所做的五个花瓣放入PathlistBox里面

接着在花瓣路径Ellipse上,拉入LayoutPath内的同心圆小圈圈

13-9

?

03

运用Padding以及Orientation调整花瓣

13-10

?

04

我们直接选取PathlistBox所附着的路径(Ellipse),把花朵往上移一点

(花瓣会跟着路径变化喔!试试变化案例里的路径Ellipse看看?)

?

加上花蕊、茎和叶,就大功告成啦!!!

13-11

?

记得要结合先前教学的动画或其它功能喔!才能做到整合以及实做。

?

PathlistBox还可以做出很多效果,就请慢慢去发掘噜!

往後有机会,我会再利用各种布局容器,制作更多的范例

?

?

记得结合之前所学喔!(想知道如何做出来,请看下章教学)

当您看到不错效果的作品,若您不嫌弃的话请给我图片或位置,让我来试着分部解析并且分享给大家喔!

?

?

本篇的教学就到此。

?

?

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

一步一步迈向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` 或执行命令。
277 4
|
6月前
|
监控 Serverless 文件存储
函数计算产品使用问题之如何确保新建的实例拉取的是最新的自定义容器镜像
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
SQL Shell 数据库
在TDengine容器中创建初始化数据库的Shell命令实例
以上就是在Docker容器环境中部署并初始化TDengine数据库的全过程,希望对你有所帮助。
92 0
|
4月前
|
运维 Ubuntu Shell
掌握Docker容器的创建:从镜像到实例
【8月更文挑战第27天】
846 4
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
199 0
|
5月前
|
Java 容器
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
157 0
|
6月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
85 0
|
7月前
|
存储 运维 Kubernetes
容器服务ACK常见问题之在ALB中看不到新的实例如何解决
容器服务ACK(阿里云容器服务 Kubernetes 版)是阿里云提供的一种托管式Kubernetes服务,帮助用户轻松使用Kubernetes进行应用部署、管理和扩展。本汇总收集了容器服务ACK使用中的常见问题及答案,包括集群管理、应用部署、服务访问、网络配置、存储使用、安全保障等方面,旨在帮助用户快速解决使用过程中遇到的难题,提升容器管理和运维效率。
|
7月前
|
JavaScript 容器
vue element plus Container 布局容器
vue element plus Container 布局容器
254 0
|
7月前
|
Java 容器
Java常用组件、容器与布局
Java常用组件、容器与布局
139 0