У меня есть ListBox, у которого есть сетка ItemsPanel. У меня есть несколько ListBoxItems, и я использую их с Grid.Column / Row, чтобы правильно расположить их в сетке. Я помещаю элемент Image в каждый ListBoxItem. Каждый элемент изображения имеет в качестве источника файл PNG размером 256x256.
Когда я запускал приложение, каждый ListBoxItems растягивается повсюду, а ListBox становится ужасающе огромным. Я не знаю, почему это происходит. Как предотвратить растяжение / расширение ListBoxItems, чтобы размер соответствовал родительскому элементу ListBox?
Я пробовал StretchDirection DownOnly для каждого изображения, но все по-прежнему растягивается. Вот мой XAML
<Grid>
<ListBox Margin="10"
BorderThickness="0"
Focusable="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid IsItemsHost="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="3"
Grid.RowSpan="3">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="3"
Grid.Row="0">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="3"
Grid.Row="1">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="3"
Grid.Row="2">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="0"
Grid.Row="3">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="1"
Grid.Row="3">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
<ListBoxItem Grid.Column="2"
Grid.Row="3">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem> />
<ListBoxItem Grid.Column="3"
Grid.Row="3">
<Image Source="CCTV.png"
RenderOptions.BitmapScalingMode="HighQuality"
Stretch="Uniform"
StretchDirection="DownOnly" />
</ListBoxItem>
</ListBox>
</Grid>
Редактировать
Вот чего я хочу добиться, но с изображением внутри каждого ListBoxItem