OYOdGD
wmBd
lvWbIrBWSV
InEe
fWooPh
pvCOAlQ
NkZQov
BMkuLd
DErwNiOqEDJJ
jXisPE
Win10论坛

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
搜索
查看: 2861|回复: 2

[教程] 【细说windows8开发——UI篇】布局和视图 [复制链接]

Rank: 1

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_1Auto这一列的设置可以使它自动适应自己的内容
Column_2*当Auto属性的列自己计算完之后,这一列会占用剩下的部分,而且是第四列的一半
Column_3Auto这一列的设置可以使它自动适应自己的内容
Column_42*当Auto属性的列自己计算完之后,这一列会占用剩下的部分,而且是第二列的二倍
PanelPanel是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最后一个布局咯。
顾名思义,网格布局就是允许有很多列和很多行。
我们可以通过RowDefinitionsColumnDefinitions来声明有多少列和行,子元素在使用的时候用Grid.ColumnGrid.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 哦!!列也一样。


Rank: 5Rank: 5Rank: 5

UID
124449
帖子
520
PB币
1991
贡献
0
技术
0
活跃
909
发表于 2013-3-22 23:36:34 IP属地广东 |显示全部楼层
好好学习,图挂啦?

Rank: 2Rank: 2

UID
2829460
帖子
289
PB币
1212
贡献
0
技术
0
活跃
26
发表于 2013-3-30 09:04:18 IP属地台湾 |显示全部楼层
thank you
回顶部
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号  CDN加速及安全服务由「快御」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win11论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛