第一章-布局

0、Window窗体只允许存在一个对象，此时可以用布局控件放入其余的控件

 

1、常见的布局控件

　　继承自Panel类:Grid、StackPanel、WrapPanel、DockPanel、UninformGrid、Canvas

　　不继承Panel类Border

 

2、Grid

　　Grid可以创建网格，如果没指定行和列默认为1行1列，创建行和列的语法如下

 <!--该Grid为4行3列-->
 <Grid>
     <!--行定义-->
     <Grid.RowDefinitions>
         <RowDefinition></RowDefinition>
         <RowDefinition></RowDefinition>
         <RowDefinition></RowDefinition>
         <RowDefinition></RowDefinition>
     </Grid.RowDefinitions>
     <!--列定义-->
     <Grid.ColumnDefinitions>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
     </Grid.ColumnDefinitions>
 </Grid>

 

　　可以指定控件所在的行和列

     <!--控件未指名行和列时，默认位于第一行第一列-->
      <Button Height="30" Width="50" Content="测试"></Button>
      <!--控件可指定行和列时，索引从0开始-->
      <Button Grid.Column="2" Grid.Row="0" Height="30" Width="50" Content="测试"></Button>

 

　　可以指定Grid的高和宽

 <Grid.RowDefinitions>
     <!--将Grid平均划分为5份，第三行占100，剩下 两行前将剩余高度分为4份，各占2份-->
     <RowDefinition Height="2*"></RowDefinition>
     <RowDefinition Height="2*"></RowDefinition>
     <RowDefinition Height="100"></RowDefinition>
   
 </Grid.RowDefinitions>
 <!--列定义-->
 <Grid.ColumnDefinitions>
     <!--指定具体宽度-->
     <ColumnDefinition Width="100"></ColumnDefinition>
     <!--根据所在窗格的大小自适应大小，与控件宽度报持一致-->
     <ColumnDefinition  Width="auto"></ColumnDefinition>
     <ColumnDefinition></ColumnDefinition>
 </Grid.ColumnDefinitions>

 

　　合并单元格ColumnSpan

 <!--跨列合并-->
 <Button Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Height="50" Width="100" Content="测试"></Button>

 

GridSplitter,其还有一个预览效果ShowsPreview，默认为False　　

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <TextBlock Text="hell0 hell0hell0hell0hell0hell0hell0hell0hell0hell0hell0hell0" 
                   TextWrapping="Wrap"
                   Background="Red"
                   FontSize="30"/>

        <!--分割符-->
        <GridSplitter Grid.Column="1" Width="10" HorizontalAlignment="Center"></GridSplitter>
        <TextBlock Text="World WorldWorldWorldWorldWorldWorldWorldWorldWorldWorldWorldWorldWorld" 
                  TextWrapping="Wrap"
                  Background="Blue"
                   Grid.Column="2"
                  FontSize="30"/>
    </Grid>

 

3、StackPanel　　

　　使用堆栈方式放置子元素

      <!--放置方向Orientation:纵向(默认)、横向-->
      <!--Margin 外边距:
        一个值时:上下左右均为该值
        两个值时:第一个为左右边距，第二个为上下边距
        四个值时:从左开始，顺时针方向
-->
      <StackPanel Orientation="Horizontal">
          <Button Height="50" Margin="10" Width="100"></Button>
          <Button Height="100" Margin="10,20" Width="140"></Button>
          <Button Height="20" Width="41" Margin="1,2,3,4"></Button>
          <Button Height="20" Width="41"></Button>
      </StackPanel>

 

4、Border

　　Border不是布局控件，他是一个装饰器。它只能包含一段嵌套内容(通常是布局面板),并为其添加背景或在其周围添加边框。为了深入地理解Border控件

 

5、WrapPanel面板

　　在可能的空间中,以一次一行或一列的方式布置控件。

　　默认情况下,WrapPanel.Orientation属性设置为Horizontal;控件从左向右进行排列,再在下一行中排列。

                           WrapPanel.Orientation属性设置为Vertical,从而在多个列中放置元素　　　

 <WrapPanel>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
     <Button Height="50" Width="150"></Button>
 </WrapPanel>

 

6、DockPanel面板

    <!--LastChildFill属性设置为true,该该置告诉DockPanel面板使最后一个元素占满剩余空间-->
    <DockPanel LastChildFill="False">
        <Button Height="100" DockPanel.Dock="Top">上</Button>
        <Button Height="120" DockPanel.Dock="Bottom">下</Button>
        <Button Height="120" DockPanel.Dock="Left">左</Button>
        <Button Height="120" DockPanel.Dock="Right">右</Button>
        <Button>中</Button>
    </DockPanel>

　　　　　　　　

 

7、UniformGrid面板

　　 UniformGrid面板不需要预先定义的列和行。相反,通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小

  <UniformGrid>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
      <Button Width="100" Height="30"></Button>
  </UniformGrid>

　　　　　　

 

8、Canvas

　　　　Canvas根据坐标进行绘制，Canvas面板中有多个互相重叠的元素,可通过设置Canvas.ZIndex附加属性来控制它

们的层叠方式。

　　　　添加的所有元素通常都具有相同的ZIndex值0。如果元素具有相同的ZIndex值,就按它们在Canvas.Children集合中的顺序进行显示,这个顺序依赖于元素在XAML标记中定义的顺序。

    <Canvas Height="400" Width="700">
        <Button Height="40" Width="100" Canvas.Top="100"></Button>
        <Button Height="40" Width="100" Canvas.Bottom="50"></Button>
        <Button Height="40" Width="100" Canvas.Left="100"></Button>
        <Button Height="40" Width="100" Canvas.Right="100">右</Button>
        <Button Height="40" Width="100" Canvas.Right="100" Panel.ZIndex="1">右外</Button>
    </Canvas>