本篇的的主要内容
****所有代码为完整代码,不是部分或者添加的代码,均通过测试。
****欢迎问题反馈和交流 : [email protected]
-
布局分类
-
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 哦!!列也一样。