Silverlight 4：当内容变得更窄时，StackPanel 不会调整大小

Question

我正在使用 Silverlight 4 和 Blend 4。

我有一个（水平的）堆栈面板，其中包括一些文本框和一个按钮。堆栈面板设置为拉伸到内容使用的大小。文本框也在自动调整大小。

当我向文本框添加文本时，文本框的大小会增大，堆栈面板也会增大。到目前为止一切顺利。

当我从文本框中删除文本时，文本框大小会缩小（例外），但堆栈面板大小不会。

当内容（文本框）变小时，是否有任何技巧可以让堆栈面板改变大小？

提前致谢， 弗兰克

这是 UserControl 的 XAML：

<Grid x:Name="LayoutRoot">
  <StackPanel x:Name="StackPanelBorder" Orientation="Horizontal">
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex">
        </TextBox>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True">
        </TextBox>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click">
        </Button>
  </StackPanel>
</Grid>

Answer 1

如果您希望 StackPanel 与其中的项目一起水平调整大小，您需要将 Horizo​​ntalAlignment 从默认值“Stretch”更改为其他值。

默认情况下，堆栈面板会拉伸以填充其父控件的整个空间，因为 Horizo​​ntalAlignment 设置为拉伸。这使得它难以扩大和缩小规模。

您需要将 Horizo​​ntalAlignment 设置为“Left”、“Right”或“Center”。然后堆栈面板将仅与其中的项目一样宽。但要明智地选择，因为堆栈面板随后会停靠在其父控件内的那个位置。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

注意：如果这不能解决您的问题，那么您的父控件有问题，而不是您的 StackPanel。

MSDN website for HorizontalAlignment

Answer 2

为此，您最好使用Grid。只需创建一个带有 3 个自动列的 Grid，它的大小就会适合内容。

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex" Grid.Column="0"/>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True" Grid.Column="1"/>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click" Grid.Column="2"/>
</Grid>

在大多数情况下，您最好使用Grid。 StackPanel 是一个有用的控件，但我经常觉得它被过度使用了。

Answer 3

我已将您的代码修改如下。请检查。

<Grid x:Name="LayoutRoot">
  <ScrollViewer x:Name="PageScrollViewer" >
  <toolkit:WrapPanel x:Name="mywrapPanel" Orientation="Vertical" Width="{Binding ActualWidth, ElementName=LayoutRoot}">
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex" Width="{Binding ActualWidth, ElementName=mywrapPanel}">
        </TextBox>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True" Width="{Binding ActualWidth, ElementName=mywrapPanel}">
        </TextBox>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click" HorizontalAlignment="Right" Width="80" Margin="2">
        </Button>
  </toolkit:WrapPanel>
  </ScrollViewer>
</Grid>

如果在 WrapPanel 的 Orientation 中使用 Horizo​​ntal，则可能必须将 Height 属性绑定到 ActualHeight。 “工具包”可以作为 xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 包含在标题中 希望这会有所帮助。

Answer 4

你需要这样的东西：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

另外，我不认为有一个可以拉伸的文本框是一个好主意，除非它是必需的。您应该在文本框上指定宽度，使其不会拉伸。

另外，如果上述解决方案不起作用，那么您应该发布您的 xaml 以便我们查看文档大纲。