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

I'm fairly new to WPF and I've come across a problem that seems a bit tricky to solve. Basically I want a 4x4 grid thats scalable but keeps a square (or any other arbitrary) aspect ratio. This actually seems quite tricky to do, which surprises me because I would imagine its a reasonably common requirement.

我是WPF的新手，我遇到了一个似乎有点棘手的问题。基本上，我想要一个可伸缩的4x4网格，但是要保持一个正方形(或任意的)高宽比。这看起来很棘手，这让我很惊讶，因为我认为这是一个相当普遍的需求。

I start with a Grid definition like this:

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

<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>

Now if you set that to stretch, it can fill the Window or whatever container you put it in. The rows and column are uniform but the aspect ratio isn't fixed.

如果你让它拉伸，它可以填满窗口或者任何你放进去的容器。行和列是一致的，但是纵横比不是固定的。

Then I tried putting it in a StackPanel to use the available space. Didn't help. What did get me most of the way there was when I remembered Viewboxes.

然后我试着把它放在堆栈面板中，以使用可用的空间。没有帮助。当我想起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>

Now my content scales and keeps aspect ratio. The problem is that if the window isn't wide enough some of my grid is off the screen. I'd like to be able to scroll to it if that were the case. Likewise, I might need a minimum size, which might lead to vertical scrolling too.

现在我的内容扩展并保持长宽比。问题是，如果窗口不够宽，我的一些网格就会从屏幕上消失。如果是这样的话，我希望能够滚动到它。同样，我可能需要一个最小的尺寸，这也可能导致垂直滚动。

Now I've tried putting my StackPanel and Grid (separately) in an appropriate ScrollViewer container but then the content no longer scales to fit the window. It goes to full size, which is no good.

现在，我尝试将我的StackPanel和Grid(分别)放到一个适当的ScrollViewer容器中，但是内容不再按比例缩放以适合窗口。它会变成全尺寸，这是不好的。

So how do I go about doing this? Am I barking up the wrong tree? Is there a better/easier way of doing this?

那么我该怎么做呢?我找错人了吗?有更好/更简单的方法吗?

4 个解决方案

#1

You need to put the content (the grid) inside a ViewBox and set the Viewbox.Stretch Property to Stretch.Uniform

您需要将内容(网格)放在一个ViewBox中，并设置该ViewBox。拉伸属性Stretch.Uniform

The Viewbox control is used to stretch or scale a child element and lets you control the way the child is stretched. Check the examples here.

Viewbox控件用于拉伸或缩放子元素，并允许您控制子元素的拉伸方式。检查这里的例子。

alt text http://i.msdn.microsoft.com/ms635549.img_mmgraphics_stretchenum(en-us,VS.90).jpg

alt文本http://i.msdn.microsoft.com/ms635549.img_mmgraphics_stretchenum(en - us,应用程序). jpg

#2

In this instance, your best bet is a UniformGrid. This is only useful if you want NxN grids.

在本例中，您最好的选择是使用均变网格。这只有在需要NxN网格时才有用。

#3

Will setting SizeToContent="WidthAndHeight" on the window give you the behaviour you're after?

在窗口上设置SizeToContent=“WidthAndHeight”会给你想要的行为吗?

#4

-2

put 0.25* instead of * for each Column and RowWidth

为每一列和行宽用0.25*代替*

#1