Wpf:网格:如何共享列/行高宽度? [英] Wpf: Grid: How can i share column/row height width?
问题描述
我有一个 3 列 5 行的网格:
I have a grid with 3 columns and 5 rows:
<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>
文本框和单选按钮有不同的空间要求,这使得行根据其内容呈现不同的高度.如何使行的大小均匀,但不大于必要的大小?换句话说:我想要与为包含文本框(网格中最大的元素)的行设置 Height="Auto" 相同的高度,然后对所有行使用该高度.
The textboxes and radiobuttons have different space requirements, which makes the rows render with different heights based on their content. How can I make the rows evenly sized, but not larger than whats necessary? In other words: I want the same height as setting Height="Auto" for a row which contains a textbox (the biggest element in my grid) and then use that height for all the rows.
推荐答案
理想情况下,您将使用具有星形大小的行并将网格设置为 VerticalAlignment="Top"
,但不幸的是星形大小当网格调整到其内容时不起作用.
Ideally you would use rows with star sizing as you have and set the Grid to VerticalAlignment="Top"
, but unfortunately star sizing doesn't work when the grid sizes to its content.
不要使用单个网格,而是使用 UniformGrid 用于垂直布局,嵌套 Grid 控件用于水平布局.您可以在内部网格中的列,以便列大小在它们之间共享.
Instead of using a single Grid, use a UniformGrid for the vertical layout with nested Grid controls for horizontal layout. You can set a SharedSizeScope on the columns in the inner grids so that the column sizing is shared between them.
<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>
这篇关于Wpf:网格:如何共享列/行高宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!