如何让 stackpanel 调整大小以适应它堆叠的控件?
How do I get stackpanel to resize to fit the controls it's stacking?
我正在制作一个工具栏。我希望 window 的宽度等于按钮的总宽度。 StackPanel 似乎非常适合这项工作,因为它会将所有内容排列起来,但不会拉伸。
<Window Width="auto">
<StackPanel Orientation="Horizontal" Width="auto">
<Button />
<Button />
</StackPanel>
</Window>
如何进行这项工作?
改为使用带列的网格。
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
您可以使用 UniformGrid 而不是 StackPanel 使 window 的宽度等于按钮的总宽度。
<UniformGrid Margin="10" Rows="1" HorizontalAlignment="Right"
VerticalAlignment="Bottom">
<Button Grid.Column="0" Content="No" FontSize="18" Margin="5" Padding="6,3"/>
<Button Grid.Column="1" Content="Yes, Absolutely" Margin="5" Padding="6,3"/>
<Button Grid.Column="2" Content="Maybe" Margin="5" Padding="6,3"/>
</UniformGrid>
UniformGrid 提供了每个单元格都是相同的高度和相同的宽度。这就是您想要的,因为您可以避免手动设置按钮大小。
更新:
我建议不要使用 Stackpanel。即使您让 Stackpanel 填充它的父级,它的子级仍然 "stacks" 而不会填充 Stackpanel。
我找到了一个非常简单的解决方案!几乎每个人(我一直在搜索大量页面)都建议切换控件类型或更复杂的东西,但实际上,它要简单得多:
<Window SizeToContent="Width"
这是唯一需要更改的地方。
此位出处:,题中排名第二的答案,我觉得比较好
根据您的设置,您只需使用 StackPanel 的对齐即可实现。例如这个 XAML
<Window Width="350" Height="350" ...>
<Grid>
<StackPanel
Background="Green">
<Border
Width="100"
Height="100"
Background="Blue" />
<Border
Width="100"
Height="100"
Background="Red" />
</StackPanel>
</Grid>
</Window>
将创建这个(面板拉伸到父级的大小):
而这个面板:
<Window Width="350" Height="350" ...>
<Grid>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Green">
<Border
Width="100"
Height="100"
Background="Blue" />
<Border
Width="100"
Height="100"
Background="Red" />
</StackPanel>
</Grid>
</Window>
将创建这个(大小为包含的两个边框):
我正在制作一个工具栏。我希望 window 的宽度等于按钮的总宽度。 StackPanel 似乎非常适合这项工作,因为它会将所有内容排列起来,但不会拉伸。
<Window Width="auto">
<StackPanel Orientation="Horizontal" Width="auto">
<Button />
<Button />
</StackPanel>
</Window>
如何进行这项工作?
改为使用带列的网格。
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
您可以使用 UniformGrid 而不是 StackPanel 使 window 的宽度等于按钮的总宽度。
<UniformGrid Margin="10" Rows="1" HorizontalAlignment="Right"
VerticalAlignment="Bottom">
<Button Grid.Column="0" Content="No" FontSize="18" Margin="5" Padding="6,3"/>
<Button Grid.Column="1" Content="Yes, Absolutely" Margin="5" Padding="6,3"/>
<Button Grid.Column="2" Content="Maybe" Margin="5" Padding="6,3"/>
</UniformGrid>
UniformGrid 提供了每个单元格都是相同的高度和相同的宽度。这就是您想要的,因为您可以避免手动设置按钮大小。
更新:
我建议不要使用 Stackpanel。即使您让 Stackpanel 填充它的父级,它的子级仍然 "stacks" 而不会填充 Stackpanel。
我找到了一个非常简单的解决方案!几乎每个人(我一直在搜索大量页面)都建议切换控件类型或更复杂的东西,但实际上,它要简单得多:
<Window SizeToContent="Width"
这是唯一需要更改的地方。
此位出处:,题中排名第二的答案,我觉得比较好
根据您的设置,您只需使用 StackPanel 的对齐即可实现。例如这个 XAML
<Window Width="350" Height="350" ...>
<Grid>
<StackPanel
Background="Green">
<Border
Width="100"
Height="100"
Background="Blue" />
<Border
Width="100"
Height="100"
Background="Red" />
</StackPanel>
</Grid>
</Window>
将创建这个(面板拉伸到父级的大小):
而这个面板:
<Window Width="350" Height="350" ...>
<Grid>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Green">
<Border
Width="100"
Height="100"
Background="Blue" />
<Border
Width="100"
Height="100"
Background="Red" />
</StackPanel>
</Grid>
</Window>
将创建这个(大小为包含的两个边框):