c# - Xamarin Forms - 获取图像以填充包含网格列的宽度？

Question

Xamarin Forms 在尝试确保图像与其包含列的宽度匹配时出现问题。 (想想带有图片和描述的简单产品列表)。

XAML 代码是:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="formsApp.MainPage">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="20, 40, 20, 20"
                Android="20, 20, 20, 20"
                WinPhone="20, 20, 20, 20" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <ScrollView>
      <StackLayout VerticalOptions="FillAndExpand"
                   HorizontalOptions="FillAndExpand"
                   Orientation="Vertical"
                   Spacing="15" >
        <Grid x:Name="testGrid"  VerticalOptions="Center">
        </Grid>
      </StackLayout>
    </ScrollView>
  </ContentPage.Content>
</ContentPage>

后面的C#代码是:

public MainPage()
    {
        InitializeComponent();

        testGrid.BackgroundColor = Color.Gray;
        testGrid.Padding = new Thickness(10D);
        testGrid.RowDefinitions = new RowDefinitionCollection();
        testGrid.ColumnDefinitions = new ColumnDefinitionCollection();

        testGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        testGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(3, GridUnitType.Star) });

        for (int MyCount = 0; MyCount < 20; MyCount++)
        {
            testGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
        }

        for (int i = 0; i < testGrid.RowDefinitions.Count(); i++)
        {
            StackLayout st = new StackLayout() { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Center, IsClippedToBounds = true };

            st.Children.Add(new Image
            {
                Source = ImageSource.FromUri(new Uri("https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300")),
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.EndAndExpand
            });

            testGrid.Children.Add(st, 0, i);

            testGrid.Children.Add(new Label
                {
                    Text = "Row" + i + " description.... fdsfsdf sdf sdfsd fsdf sdf sdf sdfsd fsd fsdf sdf sd fsd fsdf "
            }, 1, i);

        }

    }

我已经应用了各种选项，例如将图像包装在 Stack 布局中(使用堆栈布局选项)以及向图像添加 AspectFit 和 EndAndExpand，但它永远不会 100% 正确。 Resultant view from a 5" KitKat Android Emulator

有什么建议吗？

谢谢

Answer 1

我认为这里的问题是 EndAndExpand 水平选项。据我所知，...AndExpand expand 如果内容不合适，则相应的 View 。此外，您已将网格的列宽设置为 * 和 3*，这意味着第一列将占用网格宽度的四分之一，因此有没有扩展的空间。

此问题有多种可能的解决方案 - 取决于您希望结果的外观。您可以针对列选择 Auto 和 *

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

或者你可以让图像只使用可用空间

st.Children.Add(new Image
{
    Source = "...",
    Aspect = Aspect.AspectFit,
    HorizontalOptions = LayoutOptions.Fill
});

这两种选择都应该可以解决您的问题。

但是，请注意，您甚至可以做得更好。您可以使用 ListView 而不是使用网格。使用 ListView，您可以为您的单元格使用数据绑定(bind)的强大功能。您不必将所有 View 构建代码弄得一团糟，而是可以用简洁的 XAML 声明所有内容。