当前位置：首页 > news >正文

5.0 WPF的基础介绍1-Grid,Stack,button

news 来源：原创 2025/6/9 11:30:08

一、介绍

布局面板	说明
Canvas	允许以任何方式放置子控件。不会对子控件位置施加任何控制
DockPanel	子控件紧贴四条边中的任意一边。最后一个控件则充满剩余区域
Grid	可分为若干行与若干列
StackPanel	沿水平方向或者垂直方向进行排列
WrapPanel	也是沿着水平或者竖直排列，但是以多行多列方式排行。

1.Grid可以分成几行几列（行列的高度或宽度可以指定具体尺寸，也可以使用比例(1*,2*,下边表示第3行比第4行高一倍)

Grid可以嵌套Grid,或者其他控件比如stackpanel

<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="100"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>

2. stackpanel

可以横向（Orientation="Horizontal"）或者纵向（Orientation="Vertical"）排列其中的控件。

3. button，文本内容是Content（与winform不同）

二、实际例子如下：

  <Grid ShowGridLines="true">
     <Grid.RowDefinitions>
         <RowDefinition Height="20"/>
         <RowDefinition Height="100"/>
         <RowDefinition Height="2*"/>
         <RowDefinition Height="1*"/>
     </Grid.RowDefinitions>
     <Button x:Name="btnFile" Content="文件" Height="20" Width="50" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="0" Margin="0,0,0,0  " Click="btnFile_Click"/>
     <Button Content="编辑" Height="20" Width="50" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="0" Margin="50,0,0,0  "/>
     <Button Content="视图" Height="20" Width="50" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="0" Margin="100,0,0,0  "/>
     <Button Content="项目" Height="20" Width="50" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="0" Margin="150,0,0,0  "/>
     <StackPanel Grid.Row="1" Grid.Column="0">
         <Button Content="按钮3" Height="50" Width="50" HorizontalAlignment="Left"/>
         <Button Content="按钮4" Height="50" Width="50" HorizontalAlignment="Left"/>
     </StackPanel>

     <StackPanel Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
         <Button Content="按钮5" VerticalAlignment="Top" Height="30" Width="50" HorizontalAlignment="Left"/>
         <Button Content="按钮6" VerticalAlignment="Center" Height="30" Width="50" HorizontalAlignment="Left"/>
         <Button Content="按钮7" VerticalAlignment="Bottom" Height="30" Width="50" HorizontalAlignment="Left"/>
     </StackPanel>
     <Grid  Grid.Row="3" Grid.Column="0">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="70"/>
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <StackPanel Grid.Column="0">
             <Button Content="按钮8" Height="20"/>
             <Button Content="按钮9" Height="20"/>
         </StackPanel>
         <StackPanel Grid.Column="1">
             <Button Content="按钮10" Height="20" Width="70"/>
             <Button Content="按钮11" Height="20" Width="70"/>
         </StackPanel>
     </Grid>              
 </Grid>