如何使图像适合堆栈布局或网格？

Question

我有一个图像，在 xamarin 中形成图像调整以适合堆栈布局。 现在我迁移到 .net MAUI，图像没有调整，但部分图像被 stacklayout 隐藏或 stacklayout 吞没了部分图像。 紫色背景是另一个堆栈布局，它将包含也适合紫色堆栈布局的其他图像。

    <StackLayout x:Name="PlayingWindow">
        <StackLayout HorizontalOptions="Center"  VerticalOptions="End"  Padding="2" x:Name="PlayingWindow1" >
            </Grid>

        <Grid Grid.Row="1" >
            <ScrollView HorizontalOptions="Center"  VerticalOptions="End"  Padding="2" x:Name="PlayingWindow1"  >
                <Grid x:Name="mainGrid"    
                  Grid.Row="1"  Padding="2,0" RowSpacing="2" ColumnSpacing="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <!-- Initialized for Portrait m\ -->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <!-- History display. -->



                    <Label Text="Levels:" Grid.Row="0" Grid.Column="0" BackgroundColor="LightGreen" HeightRequest="15"/>
                    <Label Text="1" Grid.Row="0" Grid.Column="1" x:Name="Level" BackgroundColor="LightGreen" />
                    <Label Text="Timer:" Grid.Row="0" Grid.Column="2"  x:Name="Time" BackgroundColor="DarkGray"  />
                    <Label Text="" Grid.Row="1" Grid.Column="0"  x:Name="Callback" BackgroundColor="DarkGray"  />
                    <Label Text="Commands:" Grid.Row="1" Grid.Column="1" x:Name="Card" BackgroundColor="DarkGray"  />
                    <Label Text="Player6" Grid.Row="1" Grid.Column="2"  x:Name="Player6" BackgroundColor="DarkGray"  />
                    <Label x:Name="TimeContainer1" Text="" BackgroundColor="White"   Grid.Row="1" Grid.Column="2" />
                    <Image Source="" x:Name="ImageCommands" Grid.Row="1" Grid.Column="2" HorizontalOptions="Center"  VerticalOptions="Center" >
                        <Image.GestureRecognizers >
                            <TapGestureRecognizer Tapped ="Imagejokerb" />
                        </Image.GestureRecognizers >
                    </Image>
                    <Button x:Name="initiator" Text="Me" BackgroundColor="LightGreen"   Grid.Row="1" Grid.Column="3" Pressed="play"  CornerRadius="25"  />
                </Grid>



            </ScrollView >
        </Grid>

        </StackLayout >

        <ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
            <StackLayout  Orientation="Horizontal" x:Name="PlayingWindow2">

                <Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center"  VerticalOptions="Center"  >
                    <Image.GestureRecognizers >
                        <TapGestureRecognizer Tapped ="TapGestureRecognizer_pickme_5" />
                    </Image.GestureRecognizers >
                </Image>

                <Image  x:Name="droppedCard" HorizontalOptions="Center"  VerticalOptions="Center"  />

            </StackLayout>

        </ScrollView>
        <ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
            <StackLayout Orientation="Horizontal" x:Name="PlayingWindow3" BackgroundColor="MediumPurple">

                <Image Source="pickme.png" x:Name="VariableImagepickmeb" HorizontalOptions="Center"  VerticalOptions="Center" IsVisible="false" >
                    <Image.GestureRecognizers >
                        <TapGestureRecognizer Tapped ="Imagepickmeb" />
                    </Image.GestureRecognizers >
                </Image>
                <Image Source="pickme.png" x:Name="VariableImagepickmer" HorizontalOptions="Center"  VerticalOptions="Center" IsVisible="false" >
                    <Image.GestureRecognizers >
                        <TapGestureRecognizer Tapped ="Imagepickmer" />
                    </Image.GestureRecognizers >
                </Image>
               
            </StackLayout>
        </ScrollView>
    </StackLayout>

我希望将图片调整为堆栈布局比例。 可以帮忙吗？

Answer 1

首先，您在 StackLayout 中将 ScrollViews 堆叠在彼此之上，并且您的图像位于其中一个 ScrollViews 内部的 StackLayout 中，这意味着包含图像的 StackLayout 将有一个溢出隐藏图像的一部分。 您应该可以滚动到它。

您可以使用图像删除 StackLayout 周围的 ScrollView。

[更新]

至少您应该将Image.Aspect属性设置为AspectFit或Fill ： https://learn.microsoft.com/en-us/do.net/maui/user-interface/controls/image#control-image-scaling ：

<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal">
    <StackLayout Orientation="Horizontal" x:Name="PlayingWindow2">
        <Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center" VerticalOptions="Center"
               Aspect="AspectFit">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_pickme_5"/>
            </Image.GestureRecognizers>
        </Image>
        <Image x:Name="droppedCard" HorizontalOptions="Center" VerticalOptions="Center"/>
    </StackLayout>
</ScrollView>

但是，当 Width 和 Height 都没有以任何方式受到限制时，自动调整图像大小不适用于 ScrollViews。

另外，如果你想继续向视图添加项目，那么我建议使用不同类型的视图。 例如，您可以使用 Horizo HorizontalListView ( Sharpnado.CollectionView package ) 或CollectionView或任何允许您显示一组视图或数据的东西，因为与包裹在 ScrollView 中的 StackLayout 相比，它们更适合动态布局和数据，这更适合于在编译时已知的视图元素。