Пытаясь сохранить на изображение рядом друг с другом в UWP

Question

Я пытаюсь поставить изображение рядом с другом, а затем ниже и в той же схеме, как и в приведенном выше

кода я пытаюсь как ниже

<Grid Name="mainGridView"> 
    <Grid.Background> 
     <ImageBrush ImageSource="Assets/info_bg.png"/> 
    </Grid.Background> 
    <Grid.RowDefinitions> 
     <RowDefinition x:Name="rowDefSubjectHeadingGrid" Height="1*"/> 
     <RowDefinition x:Name="rowDefSubjectListGrid" Height="4.4*"/> 
     <RowDefinition x:Name="rowDefButtonGrid" Height="1*"/> 
    </Grid.RowDefinitions> 
    <Grid Grid.Row="0" Background="#339FFE"> 
     <Image Source="Assets\back_bg.png" HorizontalAlignment="Left" Stretch="Fill" Width="33" Height="33" 
       Margin="10,0,0,0"/> 
     <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="120,1,0,0" Foreground="White" 
        Text="Class" FontSize="29" FontStyle="Normal"/> 
     <Image Source="Assets\ic_selected_class_box.png" HorizontalAlignment="Center" Stretch="Fill" Width="30" Height="30" 
       Margin="45,7,0,0"/> 
     <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="42,-12,0,0"> 
      <TextBlock Text="I" /> 
     </Canvas> 
     <Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Width="50" Height="50" 
       Margin="0,1,15,0"/> 
    </Grid> 
    <Grid x:Name="ImageGrid" Grid.Row="1">    

     <ScrollViewer VerticalScrollBarVisibility="Auto"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 

       <Image Grid.Row="0" Grid.Column="0" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="1" Grid.Column="0" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="0" Grid.Column="1" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="1" Grid.Column="1" Source="Assets/ic_eye_icon.png" Width="179"/> 
      </Grid> 
     </ScrollViewer> 
    </Grid> 
    <Grid Grid.Row="2" Background="#339FFE"> 
    </Grid> 
</Grid> 

выше полный формат кода, который я пытаюсь вы можете проверить здесь

Answer 1

Поскольку вы хотите макет сетки, просто использовать сетку с 2 рядами и 2 колонками:

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <Image Grid.Row="0" Grid.Column="0" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="1" Grid.Column="0" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="0" Grid.Column="1" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="1" Grid.Column="1" Source="Assets/StoreLogo.png"/> 
    </Grid> 
</ScrollViewer>