使用 ListBox 和 StackPanel 的所有可用空间作为 ItemsPanelTemplate

Question

I use a ListBox to show the contents of an ObservableCollection in my view. In my simplified example, I just use an image for each item like that:

<Window>
    <Window.Resources>
        <DataTemplate DataType="{x:Type viewModel:HealthCriterionViewModel}">
            <Image VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="Optionsh.png" Stretch="Fill" />
        </DataTemplate>
    </Window.Resources>

    <ListBox ItemsSource="{Binding HealthCriteria}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Window>

HealthCriteria is a collection of type HealthCriterionViewModel .

What I get is this:

What I want is this (stretch images to use all available space both vertically and horizontally):

How can I achieve this?

Answer 1

I suggest you can't achieve it with ItemsControl. Because contents presenter size is not fixed, it's scrollable area. So size of each element should be fixed. It can be limited directly in ItemsPanel with "Weight" or "Height" (depends on orientation) properties or limited by content size.