页面中未显示不同的 png 图像

Question

我在 Xamarin 表单中创建了一个页面并尝试显示 4 个图像。这些图像为 png 格式。但是我一次只能看到一个 png 图片，而不是全部

我尝试在 StackLayout 之外移动图像标签，但它没有显示。但是，如果我对所有 5 个图标使用相同的 png 图像，我可以看到它们。 如果我评论第一张图片，我只能看到第二张图片。

<ContentPage.Content>
      <StackLayout HorizontalOptions="CenterAndExpand"
                   VerticalOptions="CenterAndExpand"
                   Padding="10"
                   Spacing="30">
            <Label Style="{StaticResource HeadingLblStyle}" Text="{Binding AssetPalletScanning}" />

            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".33*"/>
                    <ColumnDefinition Width=".33*"/>
                    <ColumnDefinition Width=".33*"/>
                </Grid.ColumnDefinitions>
                <StackLayout HorizontalOptions="Center"
                       Spacing="10"
                       Style="{StaticResource VStackStyle}">
                    <Grid WidthRequest="100" HeightRequest="100">
                        <ct:CustomButton x:Name="btnInventoryPallet"
                               Grid.Row="0"
                               WidthRequest="100"
                               HeightRequest="100"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               BackgroundColor="{StaticResource DeepSea}"
                               BorderRadius="50"
                               Command="{Binding MoveChagneCommand}"
                               CommandParameter="Inventory"/>
                        <StackLayout Grid.Row="0"
                           WidthRequest="50"
                           HeightRequest="50"
                           HorizontalOptions="Center"
                           VerticalOptions="Center" BackgroundColor="{StaticResource DeepSea}">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
                            </StackLayout.GestureRecognizers>

                            <Image HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Source="inventory.png">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
                                </Image.GestureRecognizers>
                            </Image>
                        </StackLayout>
                    </Grid>
                    <Button HorizontalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    Command="{Binding MoveChagneCommand}"
                    CommandParameter="Inventory"
                    FontFamily="{StaticResource RegularFont}"
                    FontSize="{StaticResource BigSize}"
                    Text="{Binding AssetInventoryPallet}"
                    TextColor="{StaticResource HippieBlue}" />
                </StackLayout>

                <StackLayout HorizontalOptions="Center"
                       Spacing="10" Grid.Column="1"
                       Style="{StaticResource VStackStyle}">

                    <Grid WidthRequest="100" HeightRequest="100">
                        <ct:CustomButton x:Name="btnProductionPallet"
                               Grid.Row="0"
                               WidthRequest="100"
                               HeightRequest="100"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               BackgroundColor="{StaticResource DeepSea}"
                               BorderRadius="50"
                               Command="{Binding MoveChagneCommand}"
                               CommandParameter="Production"/>
                        <StackLayout Grid.Row="0"
                           WidthRequest="50"
                           HeightRequest="50"
                           HorizontalOptions="Center"
                           VerticalOptions="Center">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
                            </StackLayout.GestureRecognizers>                          
                            <Image HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Source="production.png" >
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
                                </Image.GestureRecognizers>
                            </Image>
                        </StackLayout>
                    </Grid>
                    <Button HorizontalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    Command="{Binding MoveChagneCommand}"
                    CommandParameter="Production"
                    FontFamily="{StaticResource RegularFont}"
                    FontSize="{StaticResource BigSize}"
                    Text="{Binding AssetProductionPallet}"
                    TextColor="{StaticResource HippieBlue}" />
                </StackLayout>

                <StackLayout HorizontalOptions="Center"
                       Spacing="10" Grid.Column="2"
                       Style="{StaticResource VStackStyle}">

                    <Grid WidthRequest="100" HeightRequest="100">
                        <ct:CustomButton x:Name="btnTeardownPallet"
                               Grid.Row="0"
                               WidthRequest="100"
                               HeightRequest="100"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               BackgroundColor="{StaticResource DeepSea}"
                               BorderRadius="50"
                               Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
                        <StackLayout Grid.Row="0"
                           WidthRequest="50"
                           HeightRequest="50"
                           HorizontalOptions="Center"
                           VerticalOptions="Center">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
                            </StackLayout.GestureRecognizers>                        
                            <Image HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Source="teardown.png" >
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
                                </Image.GestureRecognizers>
                            </Image>
                        </StackLayout>
                    </Grid>
                    <Button HorizontalOptions="CenterAndExpand"
                    BackgroundColor="Transparent"
                    Command="{Binding MoveChagneCommand}"
                    CommandParameter="Teardown"
                    FontFamily="{StaticResource RegularFont}"
                    FontSize="{StaticResource BigSize}"
                    Text="{Binding AssetTeardownPallet}"
                    TextColor="{StaticResource HippieBlue}" />
                </StackLayout>
            </Grid>
            <Label Style="{StaticResource HeadingLblStyle}" Text="{Binding StorageUnitLocation}" />
        <StackLayout HorizontalOptions="Center"
                         Spacing="10"
                         Style="{StaticResource VStackStyle}">
          <Grid WidthRequest="100" HeightRequest="100">
            <ct:CustomButton x:Name="btnMoveChange"
                                 Grid.Row="0"
                                 WidthRequest="100"
                                 HeightRequest="100"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center"
                                 BackgroundColor="{StaticResource DeepSea}"
                                 BorderRadius="50"
                                 Command="{Binding PalletZoneCommand}" />
                    <StackLayout Grid.Row="0"
                             WidthRequest="50"
                             HeightRequest="50"
                             HorizontalOptions="Center"
                             VerticalOptions="Center">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding PalletZoneCommand}" />
                        </StackLayout.GestureRecognizers>                      
                        <Image HorizontalOptions="Center"
                                VerticalOptions="Center"
                                Source="zone_location.png" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding PalletZoneCommand}"/>
                            </Image.GestureRecognizers>
                        </Image>
                    </StackLayout>
                </Grid>
          <Button HorizontalOptions="CenterAndExpand"
                      BackgroundColor="Transparent"
                      Command="{Binding PalletZoneCommand}"
                      FontFamily="{StaticResource RegularFont}"
                      FontSize="{StaticResource BigSize}"
                      Text="{Binding PalletZoneLocation}"
                      TextColor="{StaticResource HippieBlue}" />
        </StackLayout>         
        </StackLayout>
  </ContentPage.Content>

预期结果 - 应该显示所有 5 个图标，但实际结果 - 一次只显示一个图标，如果使用相同的图像，则显示所有图标

Answer 1

我认为您在顶级 Grid 内的 StackLayouts 上缺少 Grid.Row 属性 - 所以它们最终都显示在第 0 行。