如何在 WPF 中保持可缩放、可滚动内容的纵横比？

Posted 2023-04-12

技术标签:

【中文标题】如何在 WPF 中保持可缩放、可滚动内容的纵横比？【英文标题】：How do I keep aspect ratio on scalable, scrollable content in WPF? 【发布时间】：2010-09-22 06:47:53 【问题描述】：

我对 WPF 还很陌生，遇到了一个似乎很难解决的问题。基本上我想要一个可扩展但保持正方形（或任何其他任意）纵横比的 4x4 网格。这实际上看起来很棘手，这让我感到惊讶，因为我认为这是一个相当普遍的要求。

我从这样的网格定义开始：

<Grid>
  <Grid.RowDefinitions>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
  </Grid.ColumnDefinition>
  ...
</Grid>

现在，如果您将其设置为拉伸，它可以填充 Window 或您放入的任何容器。行和列是统一的，但纵横比不固定。

然后我尝试将其放入 StackPanel 以使用可用空间。没有帮助。当我想起 Viewbox 时，最让我感动的是什么。

<StackPanel Orientation="Horizontal">
  <Viewbox>
    <Grid Height="1000" Width="1000"> <!-- this locks aspect ratio -->
      <Grid.RowDefinitions>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
      </Grid.ColumnDefinition>
      ...
    </Grid>
  </viewbox>
  <Label HorizontalAlignment="Stretch">Extra Space</Label>
</StackPanel>

现在我的内容可以缩放并保持纵横比。问题是，如果窗口不够宽，我的一些网格就会脱离屏幕。如果是这样的话，我希望能够滚动到它。同样，我可能需要一个最小尺寸，这也可能导致垂直滚动。

现在我尝试将 StackPanel 和 Grid（分别）放入适当的 ScrollViewer 容器中，但内容不再缩放以适应窗口。它变成全尺寸，这不好。

那么我该怎么做呢？我在吠叫错误的树吗？有没有更好/更简单的方法来做到这一点？

【问题讨论】：

【参考方案1】：

您需要将内容（网格）放在Viewbox 中，并将Viewbox.Stretch Property 设置为Stretch.Uniform

Viewbox 控件用于拉伸或缩放子元素，并允许您控制子元素的拉伸方式。在此处查看examples。

_{（来源：microsoft.com）}

【讨论】：

有没有办法将框架锁定到统一拉伸的边缘？使用 ViewBox 时子元素的渲染质量很糟糕【参考方案2】：

在这种情况下，您最好的选择是UniformGrid。这仅在您需要 NxN 网格时才有用。

【讨论】：