0

目前，我正在努力让控件在 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 并显示图像列表。由于这样的列表可能超过窗口的宽度，我想在 StackPanel 周围添加 ScrollViewer，其中 VerticalScrollBar 被禁用（因为我只希望它从左到右流动，我只需要 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。其他一切都一样，那么为什么在滚动查看器中它会继续变大？

我在这里做错了什么？

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

4

2 回答 2

1

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

  • 按钮的内容包含一张图片
  • 宽度/高度已绑定到它的高度/宽度。
  • 按钮内容高于其宽度（当绑定设置为高度->宽度时）

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

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

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

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

基本上，因为图像的行为是始终保持它的比例。解决这种“行为”是使 Button 内容的宽度大于高度。如果 Button 内容的宽度高于它的高度，那么 Binding 会强制它的宽度变小。这以某种方式使图像表现正确。

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

Margin="30 ,0"

To Image 将解决它永无止境的增长问题。

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

于 2011-01-25T20:24:22.853 回答
0

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

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

OLDER：
“现在将溢出高度继续变大”我假设您的意思是按钮的宽度和高度。那是因为您将宽度直接绑定到高度。

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

于 2011-01-24T16:37:33.480 回答