Xamarinフォーム - グリッド列を含む幅を塗りつぶす画像を取得しますか？

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

     } 

    } 

また、画像にAspectFitとEndAndExpandを追加することはできますが、決して100％正しいとは限りません。 Resultant view from a 5" KitKat Android Emulator

アドバイスはありますか？

おかげ

Answer 1

私はここでの問題はEndAndExpand水平選択肢だと思います。私が理解している限り、...AndExpandのコンテンツはそれ以外の場合は表示されません。さらに、グリッドの列幅を*と3*に設定しました。これは、最初の列がグリッド幅の4分の1を占めるため、展開するスペースがないことを意味します。

この問題は、結果をどのように見せるかによって、複数の解決策が考えられます。あなたは、列

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

に関するAutoと*のために行くことができるか、両方のオプションがあなたの問題を解決する必要があり、画像の使用はのみ利用可能なスペース

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

作ることができます。

ただし、は、さらにうまくいく可能性があります。グリッドを使用する代わりに、ListViewを使用することができます。 ListViewでは、セルのデータバインド機能を使用できます。すべてのビュービルドコードでコードを混乱させる必要はありませんが、きちんとしたXAMLですべてを宣言できます。