XAML四大原则及五种常见布局

大家好，欢迎来到IT知识分享网。

xaml介绍

xaml就是微软为构建应用程序界面而创建的一种描述性语言一种编程语言
xaml里面的控件相当于类，控件的属性相当于封装的对象

XAML必须遵循的4大原则：

1. XAML是大小写区分的，元素和属性的名称必须严格区分大小写。
2. 所有的属性值，无论它是什么数据类型，都必须包含在双引号中；
3. 所有的元素都必须是封闭的；如<Button …/> …
4. 最终的XAML文件也必须是合适的XML文档。

**常用的五种布局：**Canvas Grid StackPanel DockPanel WrapPanel

布局一：Canvas：

<Canvas>
        <Button Name="btn1" Height="100" Width="100" Content="btn1" Margin="10"/>
        <Button Name="btn2" Height="100" Width="100" Content="btn2" Margin="10"/>
</Canvas>

总结：两个button按钮重叠了，只显示越接近结束标签 </Canvas>的控件
若需要改变button的位置，就要给button控件设置Canvas.Left、 Canvas.Top、Canvas.Bottom 和Canvas.Right这四个属性。
所以Canvas得重点在绝对布局，对要求不太高的界面和比较固定的界面

布局二：Grid：

<Grid>
        <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button Name="btn1" Height="40" Width="40" Content="btn1" />
        <Button Grid.Row="1" Grid.Column="1" Name="btn2" Height="40" Width="40" Content="btn2" />
</Grid>

总结：
    然后在看看生成的窗口：以中心为轴
通过Grid.RowDefinitions和Grid.ColumnDefinitions两组属性把窗体分成一个个网格，  RowDefinition 表示网格的行，只有一个Height属性，没有Width属性，*表示该行占据窗体剩下的所有的高度，如都设为*则表示平分窗体。如上所示，你还可以让窗体3:1，只要将两个行定义分别设置为3*和*就可以了。
ColumnDefinition 表示网格的列，只有一个Width属性没有Height属性，
*表示该行占据窗体剩下的所有的宽度，如都设为*则表示平分窗体。如上所示，你还可以让窗体3:1，只要将两个行定义分别设置为3*和*就可以了。
Grid实现的是一种网格布局，这种布局是相当强大的，可以并且用起来也非常灵活。``

布局三：StackPanel：

<StackPanel>
 		<Button Name="btn1" Height="40" Width="40" Content="btn1" />
        <Button Name="btn2" Height="40" Width="40" Content="btn2" />
</StackPanel>

总结：从窗口中间部位，从顶部开始，从上到下排列控件。
布局默认是竖向布局，改变横向布局需要设置StackPanel的Orientation属性
    Orientation="Horizontal" 横向布局，从窗体中部，左侧开始从左向右排列控件。
    Orientation="Vertical"纵向布局，默认属性。

布局四：DockPanel

<DockPanel>
        <Button Name="btn1" Height="40" Width="40" Content="btn1" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
</DockPanel>

总结：左中位置开始，控件依次排列，最后一个控件将剩余区域从中心填充。
同StackPanel不同，Dockpanel布局依靠的是它的四个附加在其余控件上的
附加属性，看下表：
DockPanel.Dock属性	说明
Top	顶部，如果设置，从中间顶部开始依照上述原则布局
Left	左部，默认布局
Right	右部，如果设置，从中间右侧开始依照上述原则布局
Button	底部，如果设置，从中间底部开始依照上述原则布局

<DockPanel>
        <Button DockPanel.Dock="Bottom" Name="btn1" Height="40" Width="40" Content="btn1" />
        <Button DockPanel.Dock="Bottom" Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
        <Button Height="40" Width="40" Content="btn2" />
  </DockPanel>

界面表现如下：

有上述描述代码可知，此处StackPanel从底部开始布局两个btn，
在剩余的空间中（窗体上部），然后从默认位置左部开始依次放置btn，
最后一个btn将最后剩余的空间填充。

布局五：WrapPanel

1     <WrapPanel>
 2         <Button Name="btn1" Height="40" Width="40" Content="btn1" />
 3         <Button Height="40" Width="40" Content="btn2" />
 4         <Button Height="40" Width="40" Content="btn2" />
 5         <Button Height="40" Width="40" Content="btn2" />
 6         <Button Height="40" Width="40" Content="btn2" />
 7         <Button Height="40" Width="40" Content="btn2" />
 8         <Button Height="40" Width="40" Content="btn2" />
 9         <Button Height="40" Width="40" Content="btn2" />
10         <Button Height="40" Width="40" Content="btn2" />
11         <Button Height="40" Width="40" Content="btn2" />
12     </WrapPanel>

总结：从窗体左上角开始，多控件的自动换行。同StackPanel一样，它也有表示纵向和横向的Orientation属性
如果将其Orientation属性设置Vertical那么排列将会从左上角开始，从上到下排列，下面没有空余将会从第二行开始从上而下重新排列。
WrapPanel主要提供的功能是从窗体左上角开始，多控件的自动换行。（默认）