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

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

移动先行之谁主沉浮? 带着你的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列的表格,在其中放元素

  

  效果:

  

 

  2.综合案例:计算器页面模仿

  创建一个基本页(WP统一样式)

  

  生成的页面,代码放在下面grid里面

  

  布局分析:(对空格和=来说,实现的话就要合并单元格)

  

  定义部分(上面的样式先忽略,和css有点相似,不会用的话在每个控件后面打属性值就可以了,后面会讲)

  

  下面是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>

 

完整代码

  补充点:* 和 auto (举一个简单例子)

  

  

 

2.布局控件 - StackPanel

  类似于 HTML 中的 DIV 标签;

  用于将子元素沿 垂直/水平(Orientation)方向排布;

  如果子内容超出面板,则会超出面板边界,但视觉上会被截断。

 

  案例

  

 我们平时对齐方式是 HorizontalAlignment和VerticalAlignment,Orientation是StackPanel等的排布方式,不要搞混淆

   

 

3.布局控件 - Canvas(画布)

  Canvas 中的每一个元素就相当于在 HTML 中设置了 “position:absolute”;

  可以通过 Canvas.Left、Canvas.Top 设置定位位置;
可以使用 Canvas.ZIndex 附加属性明确指定分层

 

  案例:(图形化设置背景用 fill 来填充)

  

  效果:

  

 

View Code

4.布局控件 - VariableSizedWrapGrid

  元素以行或列排列,当达到 MaximumRowsOrColumns 值会时会自动换行至新行或新列。

  由 Orientation 属性指定是按行还是列排列元素。

  通过使用附加属性 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan,内容可跨越多行和多列。

  根据 ItemHeight 和 ItemWidth 属性的指定设置元素大小。

  不需要定义行和列的 Grid

 

  案例:(磁贴和非正常布局使用,一般不怎么用)

  

  效果:

   

View Code

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

 

 

时间: 2024-08-18 05:11:28

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

04.移动先行之谁主沉浮----XAML的探索

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)   XMAL引入 XAML 类似于 HTML,是一种特殊的XML语言 XAML本质上属于一种.NET Programming Language 主要应用在 Windows 8.Windows Phone.Silverlight 和 WPF 中   1.XMAL 命名空间的声明 分析一下头文件 详细注解 在属性里面改过名字后就会以x:开头 补充:xmlns(

vc++在MFC对话框上用程序生成控件(比如Text和Edit控件),求如何实现?

问题描述 vc++在MFC对话框上用程序生成控件(比如Text和Edit控件),求如何实现? vc++我想在MFC对话框上用程序生成控件(比如Text和Edit控件),求如何实现?(不是用工具条拖动控件到对话框上) 1.用程序生成控件2.控件在对话框上准确定位 求大神指导下 解决方案 一个 CreateWindow() 就能搞定,例子很多,自己找. 解决方案二: MFC我没有研究过,但我想MFC中应该可以调用Win32API吧,可以看看这几个,虽然不是MFC,但是在MFC里想必是可以用的.htt

重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

原文:重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 [源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 作者:webab

timer-DEV 第三方控件中的使用中自定义用户控件里面的Timer 控件的使用

问题描述 DEV 第三方控件中的使用中自定义用户控件里面的Timer 控件的使用 用户控件中使用的代码如下:/asp:ScriptManager /asp:Timer /asp:Literal /asp:UpdatePanel 为什么到事件刷新的时候会报 " Sys.WebForms.PageRequestManagerParserErrorException: 未能分析从服务器收到的消息." 这个错误呢?请指教一下 解决方案 asp不会,jsp会一点,祝你好运!

01.移动先行之谁主沉浮----我的第一个程序

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)   添加项目 看看项目,和以前大不同了,很多东西都用不了了,比如file类等[MainPage.xaml相当于主窗体] App.xaml里面的App()方法相当于main方法 添加一个button 写点代码,调试信息输出+文本赋值 选择一个适合的模拟器 启动后的样子 按钮显示出来了 这个是输出 点几下看看效果==>完美~~~(其实这个单击事件应该叫做

(论坛答疑点滴)如何在一个用户控件内操作另外一个用户控件的中的控件?

控件 比如一个论坛,上面一个top用户控件用来登陆,下面一个buttom的用户控件用来显示在线人数,要求登陆以后立即刷新online中的在线人数,就需要在一个用户控件中操作另外一个用户控件中的控件(这2个用户控件都包含在一个页面中) 看过 http://www.cnblogs.com/lovecherry/archive/2005/03/25/125515.html 和 http://www.cnblogs.com/lovecherry/archive/2005/04/11/135543.htm

WinForm控件开发总结(三) 认识WinForm控件常用的Attribute

在前面的文章里我们制作了一个非常简单的控件.现在我们回过头来看看这些代码透露出什么信息. 这个类是直接从Control类派生出来的,自定义控件都是直接从Control类派生出来的.这个类定义了 一个属性TextAlignment,用来控制文本在控件中显示的位置: [ Category("Alignment"), Description("Specifies the alignment of text.") ] public ContentAlignment Text

asp.net控件开发(一) 显示控件内容

asp.net控件的显示自然会离不开输出HTML.CSS.Javascript等前台的显示内容,所以开发一个控件的时候第一件事就是要知道如何输出客户端要显示的内容. 一.选择基类 asp.net中所有的标准控件都可以拿过来作为基类,如果我们要开发的控件只是对原有的标准控件做一些功能上的加强的话(如:你对TreeView的CheckBox添加一些随动的功能),就可以直接拿标准控件过来作为基类. 一般的如果开发的控件从标准里面找不到合适的,可以从三个类中来继承: System.Web.UI.Cont

Access的控件布局之控件大小

对齐是最经常使用到的布局方法之一,可能你已经掌握了这种方法. 在控件的属性中你能观察到,控件在改变大小后,控件的宽度和高度改变了,而左边距和上边距是不变的. 假设有4个控件 至最高的效果 至最短的效果 假设有4个控件 至最宽的效果 至最窄的效果 正好容纳通常会把控件缩得很小,所以一般只应用在标签控件上. 假设有4个控件 这是正好容纳后的效果