選擇中心控制/列

Question

我有一個網格與多個控件，我想選擇這些控件（或哪個網格列）將在中心，然後讓其他列/控件放置在相鄰的它。我會怎麼做？

Answer 1

更新：

以下模式：

<Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="MainControl's height"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="MainControl's width"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

將總是迫使MainControl爲中心，只要其他控制將在*部件來限定。換句話說，如果上述Grid中的位置[1,1]包含您的MainControl，則可以爲位置[0,0]，[0,1]，...，[2,2]定義具有不同行/列定義的不同Grids，以在自定義位置包裝更多具有自定義大小的控件。

例如此XAML：

<Window Title="MainWindow" Height="600" Width="800" > 
    <Grid x:Name="myGrid"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="200"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="200"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid Grid.Row="0" Grid.Column="0"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="40"/> 
       <RowDefinition Height="50"/> 
       <RowDefinition Height="80"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="70"/> 
       <ColumnDefinition Width="150"/> 
       <ColumnDefinition Width="30"/> 
      </Grid.ColumnDefinitions> 
      <Button Grid.Row="0" Grid.Column="0" Content="0,0"/> 
      <Button Grid.Row="0" Grid.Column="1" Content="0,1"/> 
      <Button Grid.Row="1" Grid.Column="1" Content="1,1"/> 
      <Button Grid.Row="2" Grid.Column="2" Content="2,2"/> 
     </Grid> 
     <Button Background="LightBlue" Grid.Row="1" Grid.Column="1" Content="1,1"/> 
     <Grid Grid.Row="2" Grid.Column="2"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="80"/> 
       <RowDefinition Height="35"/> 
       <RowDefinition Height="30"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="60"/> 
       <ColumnDefinition Width="90"/> 
       <ColumnDefinition Width="50"/> 
      </Grid.ColumnDefinitions> 
      <Button Grid.Row="0" Grid.Column="0" Content="0,0"/> 
      <Button Grid.Row="1" Grid.Column="0" Content="1,0"/> 
      <Button Grid.Row="1" Grid.Column="1" Content="1,1"/> 
      <Button Grid.Row="2" Grid.Column="0" Content="2,0"/> 
      <Button Grid.Row="2" Grid.Column="2" Content="2,2"/> 
     </Grid> 
    </Grid> 
</Window> 

將定位控制是這樣的：

Answer 2

什麼是你想在佈局方面實現？您的網格策略將決定整個佈局的行爲方式，特別是如果您期望它根據窗口大小進行縮放。如果您希望佈局對窗口大小做出反應，那麼您使用「自動」和「星形調整」策略。如果您實際上不關心調整大小，並且您希望有一個固定的佈局，那麼您可以在列之間共享網格大小。

方案1 如果你想實現純粹包含未知大小的物體中間列，該列必須完全居中，那麼你需要用左，右柱來緩衝這個中間列，根據Bahman_Aries的例子。

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

從這樣的結果是，因爲他們需要（所期望的呈現寬度）放置在中間列項會消耗盡可能多的寬度，並且兩個遺留列將一分爲二的剩餘空間，因爲每個具有1 *的值。換句話說，如果您的中間列對象請求200寬度，並且您的窗口總寬度爲1000，那麼左側和右側列將都有400（800/2）。

請注意，縮小窗口大小時，星號大小的列會裁剪您的內容。這是設計。如果你想讓你的比例持續下去，你可以考慮將你的佈局包裝在ViewBoxes（或整個網格）中。

方案2 - 如果你正在尋找的只是其中規定了，沒有關於縮放內容的網格，（重：中間一列消耗它需要什麼，然後將左，右列時，他們有同樣成長大內容），那麼你可以使用SharedSizeScope功能。

<Grid IsSharedSizeScope="True"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="MyRatio"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="MyRatio"/> 
     </Grid.ColumnDefinitions> 
    </Grid> 

什麼，這將實現的是，每當你的第2列的增長，它也將傳播其大小以0列，本質上確保您的第1列始終居中。

與場景1的主要區別在於場景2根據其子元素具有固定大小，而場景1具有根據其父容器行爲的結構。

編輯：有一個明顯的例子情景1：

<Grid ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
     <ColumnDefinition Width="Auto"></ColumnDefinition> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="4*"></RowDefinition> 
     <RowDefinition Height="Auto"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <StackPanel Grid.Row="1" x:Name="TheLeftComponents" Orientation="Horizontal" HorizontalAlignment="Right" > 
    <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
    </StackPanel> 
    <Ellipse x:Name="TheMiddleComponent" Grid.Row="1" Grid.Column="1" Height="40" Width="40" Stroke="Black" StrokeThickness="1" ></Ellipse> 
    <StackPanel Grid.Row="1" Grid.Column="2" x:Name="TheRightComponents" Orientation="Horizontal" HorizontalAlignment="Left" > 
     <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
     <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
     <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
     <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
     <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse> 
    </StackPanel> 
</Grid>