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

Question

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

Итак, как мне это сделать? Я лаю не на том дереве? Есть ли лучший / более простой способ сделать это?

Answer 1

Вам необходимо поместить содержимое (сетку) в ViewBox и установить Viewbox.Stretch Свойство в Stretch.Uniform

Элемент управления Viewbox используется для растяжения или масштабирования дочернего элемента и позволяет контролировать способ растяжения дочернего элемента. Проверьте примеры здесь.

_{(источник: microsoft.com )}

Answer 2

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

Answer 3

Вам нужно установить SizeToContent="WidthAndHeight" в окне, чтобы дать вам поведение, которое вы после.

Answer 4

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