Wpf: Lưới: Làm thế nào tôi có thể chia sẻ chiều rộng chiều cao cột/hàng?

Question

Tôi có một mạng lưới với 3 cột và 5 dòng:

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

    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <Label Grid.Row="0" Grid.Column="0">Gas Volume Fraction</Label> 
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=GasVolumeFraction}" MinWidth="40"></TextBox> 
    <Label Grid.Row="0" Grid.Column="2">-</Label> 

    <Label Grid.Row="1" Grid.Column="0">Density</Label> 
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Density}" MinWidth="40"></TextBox> 
    <Label Grid.Row="1" Grid.Column="2">kg/m3</Label> 

    <Label Grid.Row="2" Grid.Column="0" Content="Curve speed" Style="{StaticResource curveSpeed}" ></Label> 
    <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Density}" Style="{StaticResource curveSpeed}" MinWidth="40"></TextBox> 
    <Label Grid.Row="2" Grid.Column="2" Style="{StaticResource curveSpeed}">rpm</Label> 

    <WrapPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3"> 
     <RadioButton>Delta pressure</RadioButton> 
     <RadioButton>Head</RadioButton> 
    </WrapPanel> 

    <WrapPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3"> 
     <RadioButton>Efficiency</RadioButton> 
     <RadioButton>Power</RadioButton> 
     <RadioButton>Torque</RadioButton> 
    </WrapPanel> 

</Grid> 

Các textbox và radiobutton có những yêu cầu không gian khác nhau, mà làm cho các hàng render với chiều cao khác nhau dựa trên nội dung của họ. Làm thế nào tôi có thể làm cho các hàng có kích thước đồng đều, nhưng không lớn hơn những gì cần thiết? Nói cách khác: Tôi muốn cùng chiều cao như thiết lập Height = "Auto" cho một hàng có chứa một hộp văn bản (phần tử lớn nhất trong lưới của tôi) và sau đó sử dụng chiều cao đó cho tất cả các hàng.

Answer 1

Lý tưởng nhất là bạn sẽ sử dụng hàng với ngôi sao cỡ như bạn có và thiết lập các Grid để VerticalAlignment="Top", nhưng tiếc là ngôi sao cỡ không hoạt động khi lưới kích thước nội dung của nó.

Thay vì sử dụng một lưới đơn, hãy sử dụng UniformGrid cho bố cục dọc với điều khiển lưới lồng nhau cho bố cục nằm ngang. Bạn có thể đặt SharedSizeScope trên các cột trong lưới bên trong sao cho kích thước cột được chia sẻ giữa chúng.

<UniformGrid Rows="5" VerticalAlignment="Top" Grid.IsSharedSizeScope="True"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="A"/> 
      <ColumnDefinition SharedSizeGroup="B"/> 
      <ColumnDefinition SharedSizeGroup="C"/> 
     </Grid.ColumnDefinitions> 

     <Label Grid.Column="0">Gas Volume Fraction</Label> 
     <TextBox Grid.Column="1" Text="{Binding Path=GasVolumeFraction}" MinWidth="40"></TextBox> 
     <Label Grid.Column="2">-</Label> 
    </Grid> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="A"/> 
      <ColumnDefinition SharedSizeGroup="B"/> 
      <ColumnDefinition SharedSizeGroup="C"/> 
     </Grid.ColumnDefinitions> 

     <Label Grid.Column="0">Density</Label> 
     <TextBox Grid.Column="1" Text="{Binding Path=Density}" MinWidth="40"></TextBox> 
     <Label Grid.Column="2">kg/m3</Label> 
    </Grid> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="A"/> 
      <ColumnDefinition SharedSizeGroup="B"/> 
      <ColumnDefinition SharedSizeGroup="C"/> 
     </Grid.ColumnDefinitions> 
     <Label Grid.Column="0" Content="Curve speed" Style="{StaticResource curveSpeed}"></Label> 
     <TextBox Grid.Column="1" Text="{Binding Path=Density}" Style="{StaticResource curveSpeed}" MinWidth="40"></TextBox> 
     <Label Grid.Column="2" Style="{StaticResource curveSpeed}">rpm</Label> 
    </Grid> 
    <WrapPanel> 
     <RadioButton>Delta pressure</RadioButton> 
     <RadioButton>Head</RadioButton> 
    </WrapPanel> 
    <WrapPanel> 
     <RadioButton>Efficiency</RadioButton> 
     <RadioButton>Power</RadioButton> 
     <RadioButton>Torque</RadioButton> 
    </WrapPanel> 
</UniformGrid> 

Answer 2

Bạn có thể sử dụng liên kết với ActualWidth và ActualHeight của TextBlock lớn nhất của bạn.

<Grid x:Name="grid" ShowGridLines="True"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="{Binding Path=ActualHeight, ElementName=biggestTB}"/> 
      <RowDefinition Height="{Binding Path=ActualHeight, ElementName=biggestTB}"/>       
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=biggestTB}"/> 
      <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=biggestTB}"/>       
     </Grid.RowDefinitions> 
     <TextBlock Grid.Row="0" Grid.Column="0" x:Name="biggestTB" Text="biggest textblock content" TextWrapping="Wrap"/> 
     <TextBlock Grid.Row="1" Grid.Column="1" Text="content" TextWrapping="Wrap"/> 
    </Grid> 

Answer 3

Tôi biết đây là một câu hỏi cũ, nhưng tôi sẽ trả lời cho bất kỳ ai tình cờ gặp điều này trong khi googling.

Có một giải pháp rất đơn giản cho vấn đề này, sử dụng SharedSizeScope được đề cập bởi Quartermeister.

<Grid IsSharedSizeScope="True"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" SharedSizeGroup="groupName" /> 
     <RowDefinition Height="Auto" SharedSizeGroup="groupName" /> 
     <RowDefinition Height="Auto" SharedSizeGroup="groupName" /> 
    </Grid.RowDefinitions> 

    ... 
</Grid> 

Chỉ cần đảm bảo rằng bạn đặt Grid.IsSharedSizeScope thành true và đảm bảo rằng mỗi RowDefinition đều có cùng SharedSizeGroup và các hàng phải tự động và có kích thước bằng nhau. Điều này cũng làm việc cho các cột.