close

image


一上二下排列，基本上可以先定義兩列兩行，

然後針對第一列(Grid.Row=0)特別定義跨兩行，也就是Grid.ColumnSpan=”2”

第二列因為沒有跨行所以不用另外定義Grid.ColumnSpan 

   1: <Grid>
   2:    <Grid.RowDefinitions >
   3:        <RowDefinition Height="100" />
   4:        <RowDefinition />
   5:    </Grid.RowDefinitions>
   6:    <Grid.ColumnDefinitions >
   7:        <ColumnDefinition Width="200" />
   8:        <ColumnDefinition />
   9:    </Grid.ColumnDefinitions>
  10:  
  11:    <!--Panel-->
  12:    <Border Grid.Row="0" Grid.Column="0" Background="Blue"  Grid.ColumnSpan="2" />
  13:    <!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon"   />-->
  14:    <Border Grid.Row="1" Grid.Column="0" Background="Green" />
  15:    <Border Grid.Row="1" Grid.Column="1" Background="Red"  />
  16: </Grid>

接著如果想要做到執行時期動態調整上下列垂直方向分配的比例，或是左右兩行水平方向分配的比例

可以加入GridSplitter

   1: <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />
   2:  
   3: <GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent"                     HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />




參考資料:

1. [WPF] 使用Grid與GridSplitter排版布局

全站熱搜
創作者介紹
創作者 me1237guy 的頭像
me1237guy

天天向上

me1237guy 發表在 痞客邦 留言(0) 人氣()