第一章-布局

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>