Xamarin表單 - 獲取圖像以填充包含網格列的寬度？

Xamarin表單試圖確保圖像與其包含列的寬度匹配時出現問題。（想象一下帶有圖片和說明的簡單產品列表）。Xamarin表單 - 獲取圖像以填充包含網格列的寬度？

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

有什麼建議嗎？

感謝

來源

2017-01-30 David Whiteford

我覺得這裏的問題是EndAndExpand水平選項。據我所知，如果內容不適合其他的話，各個視圖都會擴展。此外，您已將網格的列寬設置爲*和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，您可以使用數據綁定功能來處理您的單元格。您不必使用所有構建視圖的代碼來混淆您的代碼，但可以在純XAML中聲明所有內容。

來源

2017-01-30 11:01:21

感謝您的支持。我去了第二個確實解決問題的選項。但是我注意到了其他一些東西：如果原始圖像對於空間來說太大，那麼行高會擴展到原始大小（寬度很好），儘管實際生成的圖像在頂部很好地放置正確。底部有這麼大的空間嗎？ –

Xamarin表單 - 獲取圖像以填充包含網格列的寬度？

回答

相關問題