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

I am trying to put image beside other and then below also in same pattern as in the above

我试图将图像放在其他地方,然后在下面也采用与上面相同的模式

code i am trying is as below

我正在尝试的代码如下

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

above is the full format of code which i am trying you can check here

以上是我试图在这里查看的完整格式的代码

1 个解决方案

#1

Since you want a grid layout, just use a Grid with 2 rows and 2 columns:

由于您需要网格布局,只需使用包含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>