Xaml中UI布局之Grid
2012-01-29 14:13
288 查看
Xaml中的Grid控件相当于Html中的Table标签,用表格的行列来控制布局。
基本定义如下:
基本定义如下:
<Grid x:Name="Grid1" Grid.Row="3" Grid.Column="3" Height="300" Margin="12,0,12,0" >//Row,Column属性用来设置Grid几行几列 <Grid.RowDefinitions>//这个标签用来对Grid的行属性进行设置,可以设置高度等 <RowDefinition Height="100"></RowDefinition> <RowDefinition Height="100"></RowDefinition> <RowDefinition Height="100"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions>//设置Grid列属性的样式, <ColumnDefinition Width="150"></ColumnDefinition> <ColumnDefinition Width="150"></ColumnDefinition> <ColumnDefinition Width="150"></ColumnDefinition> </Grid.ColumnDefinitions> //设置完毕的grid的行列属性样式之后就可以添加,控件,控件中的Grid.Row和Gird.Column用来设置该控件在Grid位于第几行,第几列 <Button x:Name="btn1" Content="Button1" Grid.Row="0" Grid.Column="0"></Button> <Button x:Name="btn2" Content="Button2" Grid.Row="1" Grid.Column="0"></Button> <Button x:Name="btn3" Content="Button3" Grid.Row="2" Grid.Column="1"></Button> <Button x:Name="btn4" Content="Button4" Grid.Row="0" Grid.Column="2"></Button> </Grid>
<Grid.RowDefinitions> <Grid.ColumnDefinitions> 在这个两个标签中设置行列的高度和宽度属性有几种方式 1.固定大小:固定大小就是写数字,类似代码,写好固定的width或者height,如果控件大小超过了行列的大小仅仅会显示控件的一部分内容 2.Auto自动大小,行列的大小会随着控件的大小变化而变化 3.比例设置大小,用星号*表示。比如设置第一行高度1*,第二行高度是2*,那么第二列的高度就是第一例的2倍高度。他们会根据整个Grid的高度来按比例分配计算
相关文章推荐
- XAML Grid布局
- XAML布局:StackPanel、Grid、生成连连看游戏布局
- Android-UI布局---RecyclerView学习(四)匹配GridLayoutManager的ItemDecoration
- UI布局引擎Layout 之 QGraphicsGridLayout
- Visual Studio 2015 WPF增强:调试查看UI布局,Xaml修改tag更智能
- Xaml中UI布局之StackPanel
- 基于modern ui for wpf的在线公开课平台 之三 使用grid布局
- ui-grid 网格布局
- 详解jQuery移动页面开发中的ui-grid网格布局使用
- Android进阶UI之百分比布局库(percent-support-lib) 解析与扩展
- WPF(Grid , StackPanel布局等入门)
- Angular中ui-grid的使用详解
- 二、UI-Grid 排序
- Kendo UI grid数据聚合实例
- 深入浅出android/ophone UI实现水平布局的Tab控件
- ui-grid
- Grid布局20行代码快速生成瀑布流
- WP8.1 UI 编程 三、布局
- 布局+基本UI