且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件

更新时间:2022-06-24 12:48:50

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点)

移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)

 

一、布局类控件
Grid、StackPanel、Canvas、 VariableSizedWrapGrid
1.布局控件 - Grid
  网格控件,网格布局;
  相当于 HTML 中的 Table 标签;
  但是注意 Table 更重要的是展示数据,而 Grid 则是专门为布局所生;
 
  属性标记
    Grid.RowDefinitions:行定义,元素类型 RowDefinition,必要属性 Height
    Grid.ColumnDefinitions:列定义,元素类型 ColumnDefinition,必要属性 Width
    Width 和 Height属性单位为像素,有两个特殊值“*”、“auto”
   
  常用附加属性 :
    Grid.Row:定义当前元素所出现的行号
    Grid.Column :定义当前元素所出现的列号
    Grid.RowSpan :定义当前元素所跨的行数
    Grid.ColumnSpan:定义当前元素所跨的列数
    
  1.案例:定义一个3行2列的表格,在其中放元素
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  效果:
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 
  2.综合案例:计算器页面模仿
  创建一个基本页(WP统一样式)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  生成的页面,代码放在下面grid里面
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  布局分析:(对空格和=来说,实现的话就要合并单元格)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  定义部分(上面的样式先忽略,和css有点相似,不会用的话在每个控件后面打属性值就可以了,后面会讲)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  下面是ui部分:(注意:row从0开始,column也是从0开始
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--输出框-->
     <TextBox x:Name="RLog" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Grid.ColumnSpan="5" Margin="0,0,0,20"></TextBox>
 
     <!--第1行按键-->
     <Button Grid.Row="2" Click="Button_Click">MC</Button>
     <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">MR</Button>
     <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">MS</Button>
     <Button Grid.Row="2" Grid.Column="3" Click="Button_Click">M+</Button>
     <Button Grid.Row="2" Grid.Column="4" Click="Button_Click">M-</Button>
 
     <!--第2行按键-->
     <Button Grid.Row="3" Click="Button_Click">←</Button>
     <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">CE</Button>
     <Button Grid.Row="3" Grid.Column="2" Click="Button_Click">C</Button>
     <Button Grid.Row="3" Grid.Column="3" Click="Button_Click"></Button>
     <Button Grid.Row="3" Grid.Column="4" Click="Button_Click">√</Button>
 
     <!--第3行按键-->
     <Button Grid.Row="4" Click="Button_Click">7</Button>
     <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">8</Button>
     <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">9</Button>
     <Button Grid.Row="4" Grid.Column="3" Click="Button_Click">/</Button>
     <Button Grid.Row="4" Grid.Column="4" Click="Button_Click">%</Button>
 
     <!--第4行按键-->
     <Button Grid.Row="5" Click="Button_Click">4</Button>
     <Button Grid.Row="5" Grid.Column="1" Click="Button_Click">5</Button>
     <Button Grid.Row="5" Grid.Column="2" Click="Button_Click">6</Button>
     <Button Grid.Row="5" Grid.Column="3" Click="Button_Click">*</Button>
     <Button Grid.Row="5" Grid.Column="4" Click="Button_Click">1/x</Button>
 
     <!--第5行按键-->
     <Button Grid.Row="6" Click="Button_Click">1</Button>
     <Button Grid.Row="6" Grid.Column="1" Click="Button_Click">2</Button>
     <Button Grid.Row="6" Grid.Column="2" Click="Button_Click">3</Button>
     <Button Grid.Row="6" Grid.Column="3" Click="Button_Click">-</Button>
     <Button Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Stretch" Click="Button_Click">=</Button>
 
     <!--第6行按键-->
     <Button Grid.Row="7" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Click="Button_Click"></Button>
     <Button Grid.Row="7" Grid.Column="2" Click="Button_Click">.</Button>
     <Button Grid.Row="7" Grid.Column="3" Click="Button_Click">+</Button>

 

07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件 完整代码
  补充点:* 和 auto (举一个简单例子)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 
2.布局控件 - StackPanel
  类似于 HTML 中的 DIV 标签;
  用于将子元素沿 垂直/水平(Orientation)方向排布;
  如果子内容超出面板,则会超出面板边界,但视觉上会被截断。
 
  案例
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 我们平时对齐方式是 HorizontalAlignment和VerticalAlignment,Orientation是StackPanel等的排布方式,不要搞混淆
   07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 
3.布局控件 - Canvas(画布)
  Canvas 中的每一个元素就相当于在 HTML 中设置了 “position:absolute”;
  可以通过 Canvas.Left、Canvas.Top 设置定位位置;
可以使用 Canvas.ZIndex 附加属性明确指定分层
 
  案例:(图形化设置背景用 fill 来填充)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  效果:
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 
07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件 View Code

4.布局控件 - VariableSizedWrapGrid

  元素以行或列排列,当达到 MaximumRowsOrColumns 值会时会自动换行至新行或新列。
  由 Orientation 属性指定是按行还是列排列元素。
  通过使用附加属性 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan,内容可跨越多行和多列。
  根据 ItemHeight 和 ItemWidth 属性的指定设置元素大小。
  不需要定义行和列的 Grid
 
  案例:(磁贴和非正常布局使用,一般不怎么用)
  07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
  效果:
   07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件 View Code

 注意:如果发现打完代码没反应==>按图示操作: 

 07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
 

本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/4877244.html,如需转载请自行联系原作者