今天为了更好的理解上一章提到的几种布局方式:

  1. 叠加 StackPanel 
  2. 停靠(上,下,左,右) DockPanel 
  3. 自动停靠(横向纵向) WrapPanel 

这里我们将我们的串口应用程序程序布局一下,

 1     <Grid>
 2         <DockPanel>
 3             <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Width="auto">
 4                 <GroupBox Header="Configuration" Height="auto" >
 5                     <StackPanel Orientation="Vertical">
 6                         <Label Content="COM" Name="m_Com"/>
 7                         <ComboBox Name="myCOM"/>
 8                         <Label Content="BaudRate" Name="m_Baud"/>
 9                         <ComboBox Name="myBaudRate"/>
10                     </StackPanel>
11                 </GroupBox>
12                 <GroupBox Header="Start" Height="181">
13                     <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
14                         <Button Name="myBtn" Content="Open" Margin="5,10,10,5" Click="Btn1_Click"/>
15                         <Button Content="Clear" Margin="5,10,10,5" Click="Btn2_Click"/>
16                     </StackPanel>
17                 </GroupBox>
18             </StackPanel>
19             <StackPanel DockPanel.Dock="Left" Orientation="Vertical">
20                 <GroupBox Header="DataReceived" Height="auto" Name="m_DataReceived">
21                     <TextBox Name="m_textBox1" VerticalScrollBarVisibility="Auto" AcceptsReturn="True"
22                              Height="210"/>
23                 </GroupBox>
24                 <GroupBox Header="DataTransimt" Height="auto" Name="m_DataSend">
25                     <TextBox Name="m_textBox2" VerticalScrollBarVisibility="Auto" AcceptsReturn="True"
26                              Height="50"/>
27                 </GroupBox>
28             </StackPanel>
29         </DockPanel>
30     </Grid>
XAML

相关文章: