Xamarin表单 - 获取图像以填充包含网格列的宽度？

Question

Having an issue with Xamarin Forms trying to ensure an image matches the width of its containing column. (Think of a simple product listing with a picture and description).

XAML code is:

 <?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# code behind is:

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

        }

    }

I have applied various options such as wrapping the image in a Stack layout (with options on stack layout) and also adding AspectFit and EndAndExpand to the image but it is never 100% correct. Resultant view from a 5" KitKat Android Emulator

Any advice?

Thanks

Answer 1

I think the issue here is the EndAndExpand horizontal option. As far as I have understood, the ...AndExpand expand the respective views if the content would not fit otherwise. Furthermore you've set the column widths of the grid to * and 3* which would mean, that the first column would take a fourth of the grid width, hence there is no space to expand.

There are multiple possible solutions to this issue - depending on how you want the result to look. You could go for Auto and * regarding the columns

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

or you could make the image use only the available space

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

Both options should solve your problem.

But , please note, that you could even do better. Instead of using a grid, you could use a ListView . With ListView s you can use the power of data binding for your cells. You would not have to clutter your code with all that view-building code, but could declare everything in neat XAML.