Как сохранить соотношение сторон на масштабируемом, прокручиваемом контенте в WPF?

Я новичок в WPF, и я столкнулся с проблемой, которая кажется немного сложной для решения. В принципе, я хочу, чтобы сетка 4x4 была масштабируемой, но сохраняла квадратное (или любое другое произвольное) соотношение сторон. Это на самом деле кажется довольно сложным, что меня удивляет, потому что я представляю себе его достаточно общее требование.

Я начинаю с определения Grid следующим образом:

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

Теперь, если вы установите растягивание, оно может заполнить Окно или любой другой контейнер, в который вы его помещаете. Строки и столбцы являются однородными, но соотношение сторон не фиксировано.

Затем я попытался поместить его в StackPanel, чтобы использовать доступное пространство. Не помогло. Что меня достало в основном из того, что было, когда я вспомнил Viewboxes.

<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 используется для растягивания или масштабирования дочернего элемента и позволяет вам контролировать способ растяжения ребенка. Ознакомьтесь с здесь.

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

Ответ 2

В этом случае лучший выбор - UniformGrid. Это полезно, только если вы хотите сетки NxN.

Ответ 3

Будет ли параметр SizeToContent = "WidthAndHeight" в окне дать вам поведение, которое вы после?

Ответ 4

положите 0,25 * вместо * для каждого столбца и строки RowWidth