Second image overlapping the bottom of the first image in a listbox c#

Question

If only one image is added to the database that my View is binded to, my WP8 app will display the whole image. If I add another image to the database, it will display both images, but the second one is overlapping the bottom of the first. Is there a way to add a gap between them so this doesn't happen?

Here is the xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Images}" SelectionChanged="MainLongListSelector_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="14,5,4,10">
                        <!--<Image Width="200" Source="HappyDragon.jpg"/>-->

                        <!--<Image x:Name="OutputImage" />-->
                        <Image x:Name="img" Source="{Binding ImageData, Converter={StaticResource ImageConverter}}"
                               MaxWidth="250" MaxHeight="300" Margin="10,10,0,10" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <RotateTransform x:Name="ImageRotate" Angle="90" />
                            </Image.RenderTransform>
                        </Image>

                    </Grid>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
</Grid>

Answer 1

Try this one,

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x:Name="MainLongListSelector" Height="300" Margin="0,0,-12,0" ItemsSource="{Binding Images}" SelectionChanged="MainLongListSelector_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="14,5,4,10">
                    <!--<Image Width="200" Source="HappyDragon.jpg"/>-->

                    <!--<Image x:Name="OutputImage" />-->
                    <Image x:Name="img" Source="{Binding ImageData, Converter={StaticResource ImageConverter}}"
                           MaxWidth="250" MaxHeight="300" Margin="10,30,0,20" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="ImageRotate" Angle="90" />
                        </Image.RenderTransform>
                    </Image>

                </Grid>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>