WPF快速入门2—布局WrapPanel，DockPanel，StackPanel，Canvas

一、WrapPanel 以一行或一列来布置控件

        Orientation="Horizontal" 水平排列     

效果：

       


 

二、DockPanel 元素的排列停靠方式，置于顶部或者下部或者左部、右边

        LastChildFill="True"最后控件自动填满

效果：

      


 

三、框架布局 DockPanel、 StackPanel

效果

     


 

代码：

<Window x:Class="WpfApplication1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<DockPanel Name="dockPanel1">
<StackPanel DockPanel.Dock="Bottom" Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center" >
<!--DockPanel.Dock="Bottom"DockPanel底排列 Orientation="Horizontal"垂直排列 HorizontalAlignment="Right"右排列-->
<Button Content="OK" Margin="10,10,2,10" Padding="3" Name="button1"/>
<Button Content="Cancel" Margin="2,10,10,10" Padding="3" Name="button2"/>
</StackPanel>
<TextBox DockPanel.Dock="Top"  Name="textBox1" Text="This is Tast!" />
</DockPanel>
</Window>

效果：

StackPanel 元素按照水平或垂直方向排列，两个方向只能选其一

代码：

<StackPanel Background="LightBlue">
<TextBox x:Name="textbox1" Margin="5"/>
<TextBox x:Name="textbox2" Margin="5"/>
<StackPanel Orientation="Horizontal">
<!--Orientation="Horizontal"内控件水平排列-->
<TextBox x:Name="textbox3" Width="140" Margin="5"/>
<TextBox x:Name="textbox4" Width="120" Margin="5"/>
</StackPanel>
<Button x:Name="button1" Margin="5">
<Image Source="Images/0_131167408810Ed.gif" Width="200" Height="30"/>
</Button>
</StackPanel>

四、Canvas 坐标定位

    <Canvas>

        <Button Canvas.Left="152" Canvas.Top="209"
Content="Button" Height="23" Name="button1" Width="75" />

    </Canvas>