WPF 将控制保持在完美的矩形形状（绑定宽度和高度）

Question

目前，我正在努力让控件在 WPF 中以框形状显示，而无需将结果写入代码。这是我希望它看起来像的一个工作示例：

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="120"/>
      <RowDefinition Height="3" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
      <Button Margin="6" VerticalAlignment="Stretch" Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}">
        <Grid>
          <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Image Source="http://blog.joeclarmusic.com/images/rss-icon.jpg" />
          <TextBlock Foreground="Black" TextAlignment="Center" Grid.Row="1" FontSize="11" Text="{Binding Path=Name}" Margin="0, 5, 0, 0" HorizontalAlignment="Center" TextWrapping="Wrap" />
        </Grid>
      </Button>
    </StackPanel>
    <GridSplitter Grid.Row="1" Background="#DDDDDD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
  </Grid>

好的，这一切都很酷而且很好。在我当前的设计中，我使用 ItemsControl 并显示图像列表。由于这样的列表可能超出窗口的宽度，因此我想在禁用 VerticalScrollBar 的 StackPanel 周围添加 ScrollViewer（因为我只希望它从左向右流动，所以我只需要 Horizo​​ntalScrollBar）。

添加 ScrollViewer 后：

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="120"/>
      <RowDefinition Height="3" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ScrollViewer>
      <StackPanel Orientation="Horizontal">
        <Button Margin="6" VerticalAlignment="Stretch" Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}">
          <Grid>
          <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Image Source="http://blog.joeclarmusic.com/images/rss-icon.jpg" />
          <TextBlock Foreground="Black" TextAlignment="Center" Grid.Row="1" FontSize="11" Text="{Binding Path=Name}" Margin="0, 5, 0, 0" HorizontalAlignment="Center" TextWrapping="Wrap" />
         </Grid>    
        </Button>
      </StackPanel>
    </ScrollViewer>
    <GridSplitter Grid.Row="1" Background="#DDDDDD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
  </Grid>

在我的计算机中的 kaxaml 1.7.1 中运行时的上述图像： jonatan.nilsson.is/wpf_with_scrollviewer.jpg

如果您在 Kaxaml（或 WPF 窗口/页面）中运行它，您的 按钮现在将继续变得越来越大（宽度和高度）。我所做的唯一更改是在 StackPanel 周围添加 ScrollViewer。其他一切都是一样的，那么为什么它在滚动查看器中不断变大呢？

我在这里做错了什么？

编辑： 添加了第二个示例的结果图像。

Answer 1

好的，我找到了解决方案。如果满足以下条件，则会发生此“行为”：

• 按钮的内容包含图像
• 宽度/高度与其高度/宽度绑定。
• 按钮内容高于其宽度（当绑定设置为高度->宽度时）

您可以很容易地测试这一点。如果删除 Button.Content 中除图像之外的所有内容，则整个内容“几乎”有效（如果使用 GridSplitter 使行高变小，按钮不会变小，但它会变大）。

但是，如果您随后将 Margin="0, 0, 0, 1" 添加到图像，则会发生与之前相同的行为（即，它无限增长）。

发生的情况基本上是这样的：

1. 按钮高度高于其宽度。
2. 绑定看到它并使其变宽
3. 图像看到它变宽并使其自身更高以保持其比例（在本例中为 1:1）
4. 图像将自身推得更高。
5. 按钮高度高于其宽度，请转到步骤 2。

基本上，因为图像的行为是始终保持其比例。要解决此“行为”，就是使按钮内容的宽度大于高度。如果按钮内容的宽度高于其高度，则绑定将强制其宽度降低。这在某种程度上使图像表现正确。

在我的第二个示例中，添加例如：

Margin="30 ,0" 

To Image 将解决其永无休止的增长问题。

我不确定我是否解释得很好，所以如果您有可能改进此解释的建议，请发表评论。

Answer 2

编辑：
好的，我稍微修改了一下你的代码，我可以确认按钮确实变得无限大。我真的无法说出为什么会发生这种情况。可能某些内部测量已经变得无聊了。我确实发现使用任何面板控件作为按钮内容（在本例中为网格）都会导致问题，StackPanel 或 DockPanel 等也会导致问题。也许您最好不要将这些项目放在按钮中，而是使用其他控件。它真的需要一个按钮吗？

旧：
按钮的高度不断变大，可能是因为网格单元本身不断变大。如果您使用网格分割器来调整网格组件的大小，那么该按钮将呈现其所在单元格的整个高度。如果您要解释它“不断变大”的情况，也许会更有意义想想看，如果这是要驻留在项目控件中的东西，为什么首先要使用网格拆分器和空单元格？

较旧的：
我认为“现在将溢出，高度会变得越来越大”，我认为您指的是按钮的宽度和高度。那是因为宽度直接与高度绑定。

如果您的意思是“不会溢出......”，那么这是另一个故事，完全与网格行的大小有关。也许您应该澄清您的实际问题是什么，并且也许提供一些有效的 XAML 作为示例。 （您帖子中的 XAML 按钮内容中缺少 '' 标记。