How to prevent ListBoxItem which has Image element from stretching or expanding?

Question

I have a ListBox which has a Grid its ItemsPanel. I have several ListBoxItems and use with Grid.Column/Row to position them within the grid correctly. I put an Image element inside every ListBoxItem. Every Image element has a 256x256 PNG file as its source.

When I ran the application, every ListBoxItems stretches all over the place and the ListBox became hideously huge. I dont know why this happens. How do I prevent the ListBoxItems from stretching/expanding and so that the size fits the ListBox's parent element?

I tried StretchDirection DownOnly for every image but everything still stretches. Here's my 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>

Edit

Here's what the problem looks

Here's what I want to achieve, but with Image inside each ListBoxItem

Set ColumnDefinition Width="256" if they have fixed width & height — Miguel

Kelly Kelly · Accepted Answer · 2017-05-22T04:33:48

Need to limit the size from the image like so:

<Image Source="{StaticResource Delete}" Width="16" Height="16" />

How to prevent ListBoxItem which has Image element from stretching or expanding?

Edit

1 Answers