第二張圖像與列表框中第一張圖像的底部重疊c＃

Question

如果只有一個圖像被添加到數據庫中，我的視圖被綁定到，我的WP8應用程序將顯示整個圖像。如果我向數據庫添加另一個圖像，它將顯示兩個圖像，但第二個圖像與第一個圖像的底部重疊。有沒有辦法增加它們之間的差距，所以這不會發生？

這裏是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

試試這個，

<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>