試圖保持圖像彼此旁邊，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>