Какой элемент управления 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 в качестве панели элементов по умолчанию и что StackPanel ведет себя так, как я вижу. Сетка была рекомендована для преодоления таких проблем, как моя.

Итак, я попытался указать своему ItemsControl использовать Grid:

<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 в вашем шаблоне данных, когда у вас есть только один жестко закодированный элемент StackPanel? Чтобы уточнить, что: ItemTemplate определяет, как вы хотите, чтобы один элемент отображался в вашей коллекции предметов. Например, вы можете создать ItemTemplate, который показывает обложку альбома слева, имя исполнителя рядом с ним и внизу звездный рейтинг. Сетка не должна использоваться в качестве ItemsPanel, потому что для этого вам нужно будет предоставить динамическую коллекцию Grid / Col Definitions. Использование ViewBox - мой лучший совет. Но не в ItemTemplate, это будет иметь размер только один дочерний элемент, окно просмотра вокруг всего элемента items.

Answer 2

Это 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>

Answer 3

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

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