WPF, как получилось, как работает вертикаль!

Question

Я пытаюсь заставить вертикальное растяжение работать как положено в WPF, но по какой-то причине оно занимает только необходимое пространство, а не доступное.

Во-первых, я использую WPF с C # и Prism.

В Shell.xaml (основной xaml для приложения) у меня есть сетка с 2 столбцами и одной строкой. Идея состоит в том, чтобы иметь боковую панель и основную область приложения. Сетка основной области приложения установлена ​​на Auto Width и Auto Height. Это работает, как и ожидалось, и масштабируется, чтобы соответствовать всему приложению по высоте и ширине.

Затем я использую призму для вставки представления (в качестве компонента UserControl) в основную область приложения. UserControl также установлен на Auto Width и Height, и, глядя на настройки по умолчанию в Expression Blend, HorizontalAlignment и VerticalAlignment устанавливаются на растяжение!

Однако загруженный призмой UserControl растягивается только по ширине, а не по высоте! Задав для этого цвет фона для визуальной обратной связи, я вижу, что он занимает только вертикальное пространство по мере необходимости, а не всю доступную область!

Что может быть решением для этого? Я попытался выполнить все настройки вручную, переопределяя их вручную на «Ширина и высота», «Горизонтальное и вертикальное выравнивание на растяжение», но, похоже, ничего не работает, как ожидалось!

Код: (Shell.xaml)

<Window Height="1140" Width="1450">
    <Grid Margin="0" Background="White">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Background="#FFEEEEEE" Grid.Column="0" Grid.Row="0">   
            </Grid>          
            <ItemsControl Width="Auto" Height="Auto" Grid.Row="0" Grid.Column="1" Name="MainRegion" cal:RegionManager.RegionName="MainRegion" Padding="10" Margin="10, 0, 0, 0" Background="#FFFFFFD5" />
        </Grid>
    </Grid>
</Window>

(представление, которое должно наследовать родительскую высоту):

<UserControl Width="Auto" Height="Auto" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <!-- I want this to take the full width and height of the parent -->
</UserControl>

Так это ограничение в способе загрузки представлений в основной xaml, или это ограничение UserControl, или что-то еще, что я не понимаю?

Просто чтобы уточнить; Я вижу цвет фона ItemsControl, определенный в Shell.xaml, растягивающийся как по горизонтали, так и по вертикали, но не фон вида, загруженного в ItemsControl.

Обратите внимание, что я удалил некоторые xaml, чтобы облегчить понимание!

Спасибо!

Answer 1

Значением по умолчанию для ItemsControl.ItemsPanelTemplate является StackPanel, которое сжимает всех своих детей по вертикали, давая описанные вами симптомы.

Решение code-zoop изменило это на <Grid>. Это будет хорошо работать до тех пор, пока в регионе может быть только один вид. Но если у региона более одного вида, все они будут лежать друг на друге, а не рядом друг с другом.

Если вы хотите, чтобы область могла обрабатывать несколько видов, но позволяла видам расширяться до полного размера области, используйте вместо этого DockPanel:

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <DockPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Это поместит первый вид на панель слева, следующий рядом с ним и т. Д. До последнего вида, который заполнит все оставшееся пространство.

Если вы предпочитаете, чтобы несколько представлений складывались вертикально, как это было в StackPanel, вам нужно настроить это в ItemContainerStyle:

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <DockPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="DockPanel.Dock" Value="Top" />
    </Style>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>

Answer 2

Я нашел решение. Я должен переопределить шаблон ItemsPanel, чтобы использовать сетку (или аналогичный контейнер):

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Grid/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

В этом случае я также удалил некоторые из xaml, чтобы сделать их более читабельными!

Спасибо

Answer 3

Пробовали ли вы установить для HorizontalContentAlignment и VerticalContentAlignment значение Stretch в ItemsControl ?