Какой элемент управления XAML следует использовать для сохранения всех дочерних элементов в своих границах в WPF?

Question

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

Использование XAML ниже, когда окно слишком узкое, содержимое сокращается до соответствия. Отлично. Моя проблема в том случае, если окно слишком коротка, содержимое выпадать на дно, как это:

<ItemsControl ItemsSource="{Binding GroupStatsDisplayList}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Background="Red" Margin="5" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Viewbox Margin="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" Height="Auto" > 
       <ListBox> 
        <StackPanel Orientation="Horizontal" Margin="5" Background="Blue"> 
         <Label Content="{Binding GroupID}" FontWeight="Bold"/> 
         <Label Content="{Binding GroupName}" Width="100" FontWeight="Bold" /> 
         <Label Content="{Binding CallsInQueue}" FontWeight="Bold" /> 
         <Label Content="{Binding TSF}" FontWeight="Bold" /> 
        </StackPanel> 
       </ListBox> 

      </Viewbox> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Я прочитал в ответах на подобные вопросы, что ItemsControl использует StackPanel, как его по умолчанию ItemsPanel и что StackPanel делает вести себя так, как я вижу. Для решения таких проблем, как мой, была рекомендована сетка.

Так что я попытался рассказать свою ItemsControl использовать сетку:

<ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid Background="Red" Margin="5" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

лучше, потому что содержание этого размер при ограниченном в любом направлении. Хуже, потому что кажется, что есть только один элемент ViewBox-> ListBox, который обновляется последним элементом моей коллекции (я могу видеть три элемента цикла коллекции через дисплей при запуске приложения). Я не вижу всех элементов в моей коллекции на экране, только последний.

Я также читал, что DockPanel может спасти меня ...

<ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <DockPanel Background="Red" Margin="5" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

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

Как получить макет, который похож на первое изображение, но будет уменьшаться, чтобы соответствовать самому маленькому размеру окна?

Answer 1

Почему у вас есть ListBox в DataTemplate, когда у вас есть только один жесткий код StackPanel? Чтобы уточнить это: ItemTemplate определяет, как вы хотите, чтобы один элемент отображался в вашей коллекции предметов. Например, вы можете создать ItemTemplate, который показывает обложку альбома слева, имя исполнителя рядом с ним, а внизу - рейтинг звезд. Сетка не должна использоваться как ItemPanel, потому что для этого вам нужно будет предоставить динамическую сборку Grid/Col Definitions. Использование ViewBox - мой лучший совет. Но не в ItemTemplate, это будет только размер одного ребенка, viewbox вокруг всего itemscontrol.

Answer 2

Я не делал WPF в то время, и, вероятно, это не считается очень хорошей практикой, но, может быть, вы могли бы просто использовать scaletransform на всей вашей gui?

Мне всегда нравилось играть с ними.

Answer 3

Это XAML, который я использовал на основе ответа от dowhilefor.

<Viewbox Margin="3" > 
    <ItemsControl ItemsSource="{Binding GroupStatsDisplayList}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal" Margin="1" Background="LightGreen"> 
        <Label Content="{Binding GroupID}" FontWeight="Bold"/> 
        <Label Content="{Binding GroupName}" Width="100" FontWeight="Bold" /> 
        <Label Content="{Binding CallsInQueue}" FontWeight="Bold" /> 
        <Label Content="{Binding TSF}" FontWeight="Bold" /> 
       </StackPanel> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Viewbox>