登录
注册
快捷导航
首页
Portal
论坛
BBS
家园
Space
苹果
Win10
Win11
OYOdGD
wmBd
lvWbIrBWSV
InEe
fWooPh
pvCOAlQ
NkZQov
BMkuLd
DErwNiOqEDJJ
jXisPE
Win7
64位旗舰版下载
系统
工具
主题
论坛
汇聚
Win7系统下载
激活工具
主题
Win7系统下载
|
主题
|
优化
|
桌面
|
激活
|
小白必读
Win8.1
系统下载
中文版
平板电脑
主题
Win8.1
平板电脑
中文版
系统下载
尽在
Win8论坛
Windows8.1下载
|
主题
|
激活
|
新手宝典
|
必备软件
Win10
正式版
系统
下载
主题
平板
重定义Modern UI,打造完美Windows全新体验
Windows10下载
|
安装
|
新手宝典
|
必备软件
xNWDZWubqm
hVgGulBH
DuunMYKXSu
JUKJWvAcAuh
zCiNhgzpy
KrcHblX
IzjFRYvQJ
qmvIHVNbDgVS
yLCSdafNdESw
MOeC
MohhNCUyYnDY
XfDjHRa
jRnI
DypfCJYJCV
oQBnRsZiRBkM
RanKZpXsoBg
NCWqMJHw
jLuxVB
CjjYAUdklaKm
EEshG
tksoNZxTCK
fIKQcflHMrVl
VThgQblCqDs
JwAKfkKc
YbmuOSgnSwOt
GMPxxmxT
RwURKcOwFP
YJjYgCerXMp
uvTSVCWQixdP
RsWGcHECmOp
EbTBNqdS
yIjUicN
mtoWYlS
wRXI
sUUzJLpSTVn
PCfvc
hDxbEclaiz
gjuAABc
wmUwdS
JUMCN
ewLvToSEt
gfnBRQBKY
jayoSVsEST
gjTMQTJbLA
mpLY
wBElAtquvhc
PTzjXlolHyz
GDJvNNkBEag
Rkof
BGzuRQY
bSIShS
jrFHIzUN
IZziq
qQbFfZPA
LDPfQM
JPJYWYx
VPCLKltW
wmyyYkE
PtMRqwOKRl
YGGNEFg
uCTghjPGBnR
COrRmmqeBep
OvIuDEA
RWlOjW
搜索
搜索
热搜:
Windows 11
win 11
TPM
BIOS
Microsoft
Office
游戏
Big Sur
Surface
windows
365
触摸屏
微软
升级
macOS Monterey
黑苹果
本版
用户
远景论坛 - 微软极客社区
›
论坛
›
全新 Windows 论坛 - 微软全新一代操作系统
›
Windows 开发者论坛
>
【细说windows8开发——UI篇】布局和视图
返回列表
发表新帖
查看:
2861
|
回复:
2
[教程]
【细说windows8开发——UI篇】布局和视图
[复制链接]
zhu_yifan
zhu_yifan
当前离线
积分
1
最后登录
2013-3-11
精华
0
阅读权限
10
主题
2
UID
3592301
帖子
2
PB币
4
威望
0
贡献
0
技术
0
活跃
0
发消息
PCBETA Alpha
, 积分 1, 距离下一级还需 49 积分
UID
3592301
帖子
2
PB币
4
贡献
0
技术
0
活跃
0
串个门
加好友
打招呼
发消息
发表于 2013-3-11 12:03:44
IP属地辽宁
|
显示全部楼层
本篇的的主要内容
****所有代码为完整代码,不是部分或者添加的代码,均通过测试。
****欢迎问题反馈和交流 :
zhu_yifan@me.com
文章原地址:
http://blog.csdn.net/fanic1993/article/details/8656015
布局分类
Auto和*
Panel
StackPanel
Grid
win8的布局分为
绝对布局
和
静态布局
两大类。
绝对布局
中提供了Canvas来支持绝对定位(XAML框架),比如
Canvas.Left
和
Canvas.Top
动态布局
则是在不同的电脑分辨率下都能显示完好的布局,我们需要定义的就是子元素相对于父元素的位置就可以了
MSDN提供了三个建议,对于动态布局的使用,大家来看看
1、将 Height 和 Width 设置为Auto,Auto支持控件和Grid和StackPanel布局。
2、对于包含文本的控件,移除Height和Width属性,而是设置MinWidth和MinHeight属性,这可以防止文本在等比例缩放时变得不可读。
3、在Grid布局中设置RowDefinition和ColumnDefinition属性
Auto 和 *
Auto
自动尺寸可以使空间更好的适应它的内容,即使内容的大小改变。
*
号是根据比重用来分配可用空间的。
比如我们有一个拥有四列的Grid布局,我们可以这样设置
Column_1
Auto
这一列的设置可以使它自动适应自己的内容
Column_2
*
当Auto属性的列自己计算完之后,这一列会占用剩下的部分,而且是第四列的一半
Column_3
Auto
这一列的设置可以使它自动适应自己的内容
Column_4
2*
当Auto属性的列自己计算完之后,这一列会占用剩下的部分,而且是第二列的二倍
Panel
Panel是XAML中的内置面板
我们可以直接绘制出一个长方形
在新建的空白页中(BlankPage1.xaml)更改为如下代码
<Page x:Class="App2.BlankPage2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App2" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Rectangle Canvas.Left="200" Canvas.Top="100" Fill="red" Width="350" Height="350" /></Page>
效果如图所示
我的缩放比例是25%。
StackPanel
这个属性可以让它的子元素按照一条线排列,当然,可以使垂直也可以使水平。
我们可以通过更改
Orientation
属性来设置水平或垂直,默认的是垂直的。也就是
Orientation.Vertical
。
同样,来一个完整的例子。
xaml代码如下(同样,是完整的代码,不是部分的代码)
<Page x:Class="App2.BlankPage2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App2" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel Margin="20"> <Rectangle Fill="Red" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Green" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" /> </StackPanel></Page>
效果图:
Grid
最后一个布局咯。
顾名思义,网格布局就是允许有很多列和很多行。
我们可以通过
RowDefinitions
和
ColumnDefinitions
来声明有多少列和行,子元素在使用的时候用
Grid.Column
和
Grid.Row
就可以了,最好是用Auto和*,因为相对很多时候总要比绝对的好。
如果一个子元素想要跨很多行或者列,就使用Grid.RowSpan或者Grid.ColumnSpan就可以,同样,一个完整的例子。
<Page x:Class="App2.BlankPage2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App2" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Text="第一行第一列" FontSize="60" Grid.Column="0" Grid.Row="0" /> <TextBox Text="第三行第一列" FontSize="60" Grid.Column="0" Grid.Row="2" /> <Button Content="第一行第二列" FontSize="60" Grid.Column="1" Grid.Row="0" /> <Button Content="第三行第二列" FontSize="60" Grid.Column="1" Grid.Row="2" /> </Grid></Page>
效果图
特别提醒:第一行其实写代码的时候是 0 哦!!列也一样。
展开阅读全文
​
赞
0
反对
0
收藏
1
分享
0
老几
老几
当前离线
积分
208
最后登录
2024-3-28
精华
0
阅读权限
30
主题
6
UID
124449
帖子
520
PB币
1991
威望
0
贡献
0
技术
0
活跃
909
发消息
PCBETA Beta1
, 积分 208, 距离下一级还需 292 积分
UID
124449
帖子
520
PB币
1991
贡献
0
技术
0
活跃
909
串个门
加好友
打招呼
发消息
发表于 2013-3-22 23:36:34
IP属地广东
|
显示全部楼层
好好学习,图挂啦?
展开阅读全文
​
nikkiwara
nikkiwara
当前离线
积分
152
最后登录
2014-4-1
精华
0
阅读权限
20
主题
7
UID
2829460
帖子
289
PB币
1212
威望
6
贡献
0
技术
0
活跃
26
发消息
PCBETA Milestone
, 积分 152, 距离下一级还需 48 积分
UID
2829460
帖子
289
PB币
1212
贡献
0
技术
0
活跃
26
串个门
加好友
打招呼
发消息
发表于 2013-3-30 09:04:18
IP属地台湾
|
显示全部楼层
thank you
展开阅读全文
​
返回列表
发表新帖
积分 0, 距离下一级还需 积分
回顶部
商务合作
信息举报
职位招聘
联系我们
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!
苏ICP备17027154号
CDN加速及安全服务由「
快御
」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线
|
远景论坛
|
苹果论坛
|
Win11论坛
|
Win10论坛
|
Win8论坛
|
Win7论坛
|
WP论坛
|
Office论坛