Xamarin Forms - Get Image to Fill Breite der Raster Spalte?

Question

Ein Problem mit Xamarin Forms, das versucht, sicherzustellen, dass ein Bild der Breite der enthaltenen Spalte entspricht. (Denken Sie an eine einfache Produktliste mit einem Bild und einer Beschreibung).

XAML-Code ist:

<?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 hinter ist:

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

     } 

    } 

ich verschiedene Optionen wie Einwickeln das Bild in einem Stapel Layout angelegt haben (mit Optionen auf Stack-Layout) und AspectFit und EndAndExpand zum Bild hinzufügen, aber es ist nie 100% richtig. Resultant view from a 5" KitKat Android Emulator

Irgendwelche Tipps?

Dank

Answer 1

Ich denke, die hier Ausgabe die Option EndAndExpand horizontal ist. Soweit ich das verstanden habe, erweitern die ...AndExpand die jeweiligen Ansichten, wenn der Inhalt sonst nicht passen würde. Außerdem haben Sie die Spaltenbreiten des Gitters auf * und 3* eingestellt, was bedeuten würde, dass die erste Spalte ein Viertel der Gitterbreite einnehmen würde, daher gibt es keinen Platz zum Erweitern.

Es gibt mehrere mögliche Lösungen für dieses Problem - je nachdem, wie das Ergebnis aussehen soll. Sie könnten

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

für Auto und * in Bezug auf die Spalten gehen oder man könnte die Bild Nutzung der zur Verfügung stehende Raum nur machen

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

Beide Optionen sollten Ihr Problem lösen.

Aber, bitte beachten Sie, dass Sie sogar besser machen könnten. Anstatt ein Raster zu verwenden, können Sie auch ListView verwenden. Mit ListView s können Sie die Datenbindung für Ihre Zellen nutzen. Sie müssten Ihren Code nicht mit all dem Code zum Erstellen von Ansichten durcheinander bringen, sondern alles in ordentlichem XAML deklarieren.