试图在 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>

试图在 uwp 中保持彼此相邻的图像

Trying to keep to image beside each other in uwp

xaml

uwp

uwp-xaml