WPF сохраняет контроль в идеальной форме прямоугольника (ширина и высота переплета)

Question

В настоящее время я изо всех сил пытаюсь заставить элемент управления отображаться в форме коробки в 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 и отображаю список изображений.Поскольку такой список может превышать ширину окна, я хотел добавить ScrollViewer вокруг StackPanel, где отключен VerticalScrollBar (поскольку я хочу, чтобы он двигался только слева направо, мне нужен только HorizontalScrollBar).

После добавления 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) ваша кнопка теперь будет увеличиваться и увеличиваться (ширина и высота) .Единственное изменение, которое я сделал, это добавление ScrollViewer вокруг StackPanel.все остальное то же самое, так почему же оно продолжает увеличиваться, когда внутри прокрутки просмотра?

Что я здесь не так делаю?

Редактировать: добавлено изображение результата из второго примера.

Answer 1

Хорошо, я нашел решение.Это «поведение» возникает, если выполняются следующие условия:

• Содержимое кнопки содержит изображение
• Ширина / высота имеет привязку к ее высоте / ширине.
• Содержание кнопки превышает ее ширину (если для привязки задано значение height-> width)

Это можно проверить очень легко.Если вы удалите все внутри Button.Content, кроме изображения, все это «почти» работает (кнопка не станет меньше, если вы уменьшите высоту строки с помощью GridSplitter, но она увеличится).

Однако если вы затем добавите Margin="0, 0, 0, 1" к изображению, то произойдет то же поведение, что и раньше (то есть оно будет расти бесконечно).

В основном происходит следующее:

1. Высота кнопки больше, чем ее ширина.
2. Привязка видит ее и делает ее шире
3. Изображение видит, что оно стало шире и становится выше, чтобы сохранить его соотношение (в данном случае 1:1)
4. Изображение выдвигается выше.
5. Высота кнопки больше, чем ее ширина, перейдите к шагу 2.

В основном, потому что поведениеизображение должно всегда держать это соотношение.Обойти это «поведение» - значит сделать содержимое Button шире, чем по высоте.Если ширина содержимого Button больше его высоты, то Binding принудительно уменьшит ее ширину.Это каким-то образом заставляет изображение вести себя правильно.

Во втором примере, добавив, например, следующее:

Margin="30 ,0" 

To Image решит проблему его бесконечного роста.

Я не уверен, что объяснил это очень хорошо, поэтому, пожалуйста, прокомментируйте, если у вас есть предложения, которые могут улучшить это объяснение.

Answer 2

РЕДАКТИРОВАТЬ: ОК, я немного возился с вашим кодом, и я могу подтвердить, что кнопка действительно растет бесконечно большой.Я не могу сказать, почему это происходит.Вероятно, некоторые внутренние измерения становятся неэффективными.Я обнаружил, что использование любого элемента управления панели в качестве содержимого кнопки (в данном случае Grid) вызовет проблему, как и StackPanel или DockPanel и так далее.Возможно, вам было бы лучше, если бы вы не помещали эти элементы в кнопку и вместо этого использовали какой-то другой элемент управления.Это действительно должна быть кнопка?

OLD:
Высота кнопки продолжает увеличиваться, вероятно, потому что сама ячейка сетки продолжает увеличиваться.Если вы используете разветвитель сетки для изменения размера компонентов сетки, то кнопка примет всю высоту ячейки, в которой она находится. Возможно, было бы более разумно, если бы вы объяснили обстоятельства, при которых она «становится больше».если подумать, если это что-то, что находится в элементе управления элементами, то почему сплиттер сетки и пустая ячейка в первую очередь?

OLDER:
By 'теперь будет переполняться, высота будет продолжатьбольше 'Я предполагаю, что вы имеете в виду ширину и высоту вашей кнопки.Ну, это потому, что у вас есть ширина, привязанная непосредственно к высоте.

Если вы имеете в виду «НЕ переполнится ...», то это совсем другая история, связанная с размером строк вашей сетки.Возможно, вам следует уточнить, в чем заключается ваша настоящая проблема, и, возможно, привести в качестве примера действительный XAML.(В XAML в вашем сообщении отсутствует тег '' в содержимом кнопки.