2017-07-14 28 views
1

我試圖實現這種網格:WPF網格列不同的大小和位置

enter image description here

,所以我需要有一個網格,如果他們是在不同的行兩列可以是不同的。 (對於行也應該是可能的)。

我的網格,以便遠遠看上去像這樣

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="50"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Label Content="Left" Grid.Column="0" /> 
     <GridSplitter HorizontalAlignment="Right" 
       VerticalAlignment="Stretch" 
       Grid.Column="1" ResizeBehavior="PreviousAndNext" 
       Width="5" Background="#FFBCBCBC"/> 
    <Label Content="Right" Grid.Column="2" /> 

    <GridSplitter HorizontalAlignment="Stretch" 
        ResizeDirection="Rows" 
       VerticalAlignment="Stretch" 
       Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext" 
       Height="5" Background="#FFBCBCBC"/> 

    <Label Content="Left" Grid.Column="0" Grid.Row="2"/> 
    <GridSplitter HorizontalAlignment="Right" 
       VerticalAlignment="Stretch" 
       Grid.Column="1" Grid.Row="2" ResizeBehavior="PreviousAndNext" 
       Width="5" Background="#FFBCBCBC"/> 
    <Label Content="Right" Grid.Column="2" Grid.Row="2" /> 
</Grid> 

我怎樣才能實現這一目標?

回答

1

您可以使用多個Grids裏面是這樣的:

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <!-- First Row--> 
     <Grid> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="50"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 


      <Label Content="Left" Grid.Column="0" /> 

      <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1" 
          ResizeBehavior="PreviousAndNext" 
          Width="5" 
          Background="#FFBCBCBC" 
          /> 

      <Label Content="Right" 
        Grid.Column="2" 
        /> 
     </Grid> 



     <GridSplitter HorizontalAlignment="Stretch" 
        ResizeDirection="Rows" 
       VerticalAlignment="Stretch" 
       Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext" 
       Height="5" Background="#FFBCBCBC"/> 

     <!-- Second Row --> 
     <Grid Grid.Row="2"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="50"/> 
      </Grid.ColumnDefinitions> 


      <Label Content="Left" 
        Grid.Column="0" 
        Grid.Row="2" 
        /> 

      <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1" 
          Grid.Row="2" 
          ResizeBehavior="PreviousAndNext" 
          Width="5" 
          Background="#FFBCBCBC" 
          /> 

      <Label Content="Right" 
        Grid.Column="2" 
        Grid.Row="2" 
        /> 

     </Grid> 

    </Grid> 

在你不到底想通過GridSplitter以影響其他行 - 這樣只需使用一個Grid每行。這通常不是很好,你寧願Grid.ColumnSpanGrid.RowSpan,但在你的問題這是最微不足道的解決方案。

Result

+0

這看起來像一個我想要的目的。 我正在使用的系統是一個更加動態的系統,我剛剛發佈了一個示例。 我只是不知道這是否是正確的方式來做到這一點。但似乎是這樣。 非常感謝! – PuRe

0

的解決方案取決於你想在圖像顯示一個問題的解決方案還是要通用的解決方案。 對於這個特定的設置,您可以定義三列,然後對於第一行,定期使用第一列,第二行將Grid.ColumnSpan=2添加到子控件。這將合併第二和第三列。 對於第二行,使用Grid.ColumnSpan=3,所有列將被合併。 對於第二行,在第一列中使用Grid.ColumnSpan=2

您可以在不同的配置中使用類似的方法。但是,如果您想要完全通用的解決方案,則無法使用常規網格來完成此任務,並且您必須實施您自己的網格控件,併爲每一行定義列定義並計算子控件的佈局。

1

垂直使用3行,第1行和第3行各有3列。 3行'列不相互對齊。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <GridSplitter HorizontalAlignment="Stretch" 
      ResizeDirection="Rows" 
      VerticalAlignment="Stretch" 
      Grid.Column="0" Grid.Row="1" ResizeBehavior="PreviousAndNext" 
      Height="5" Background="#FFBCBCBC"/> 

    <GridSplitter HorizontalAlignment="Stretch" 
      ResizeDirection="Rows" 
      VerticalAlignment="Stretch" 
      Grid.Column="0" Grid.Row="3" ResizeBehavior="PreviousAndNext" 
      Height="5" Background="#FFBCBCBC"/> 

    <Grid Grid.Row="0"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="auto"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <GridSplitter HorizontalAlignment="Right" 
      VerticalAlignment="Stretch" 
      Grid.Column="1" ResizeBehavior="PreviousAndNext" 
      Width="5" Background="#FFBCBCBC"/> 
    </Grid> 

    <Grid Grid.Row="4"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="auto"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <GridSplitter HorizontalAlignment="Right" 
      VerticalAlignment="Stretch" 
      Grid.Column="1" ResizeBehavior="PreviousAndNext" 
      Width="5" Background="#FFBCBCBC"/> 
    </Grid> 
</Grid> 

enter image description here

+0

是的,這跟以前一樣,是我一直在尋找的,謝謝! – PuRe