【细说windows8开发——UI篇】布局和视图
来源:互联网 发布:linux ssh开启 编辑:程序博客网 时间:2024/06/06 09:51
本篇的的主要内容
****所有代码为完整代码,不是部分或者添加的代码,均通过测试。
****欢迎问题反馈和交流 : zhu_yifan@me.com
布局分类
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布局,我们可以这样设置
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 哦!!列也一样。
- 【细说windows8开发——UI篇】布局和视图
- 【细说windows8开发——UI篇】页面导航
- 【细说windows8开发——UI篇】让控件动起来——简单的说说
- 【细说windows8开发——UI篇】控件风格化--让你的控件更漂亮
- [Win8]Windows8开发入门(三):导航、布局和视图
- vici mvc开发第三篇——视图和布局
- [教程] Windows8 游戏开发教程-一、Metro UI 和绘图
- IOS开发—UI表视图
- 新时尚Windows8开发(27):根据应用程序的视图状态调整UI
- Android UI 开发入门—线性布局
- 新时尚Windows8开发(21):分组视图
- 新时尚Windows8开发(25):缩放视图
- UI开发----自定义视图和视图控制器(Controller)
- DevExpress助您开发Windows8 UI应用程序
- 【ios 汇总 - UI 视图布局 】
- Web设计资源:Windows8的Metro UI风格布局案例
- 第二章 UI开发——Android 布局类型
- Android UI 开发入门—线性布局练习
- ASP.NET设计模式之Query Object模式
- 用Python处理一个csv文档
- Vimball : 基于vim的插件管理器
- Treblecross UVA10561
- 傅里叶三角级数和复数表示的级数之间的转变
- 【细说windows8开发——UI篇】布局和视图
- HttpClient获取重定向之后的网址信息
- 搜索二叉树的应用
- 陈淙靓是个农民!
- FFT算法MATLAB实现与测试
- 软件项目管理系统-账务管理-项目收款
- 有了接口,微信什么都能做
- Windows下mysql忘记root密码解决方法
- Rails3程序在产品模式下出现assert文件404错误的问题